Issues with Tags pane layout

Overview: Some tag display problems that need to be corrected after the Q3 release. These are remaining bugs from Scenario 7 of STSMACOM-113. Moved to separate Jira per Michal. Michal also explained: Scenarios 7 and 12 will need to wait until we have support for it in multi selection component. Ideally we should create separate JIRAs for them. I'm hoping John Coburn will be able to help us here in the future.

Steps to Reproduce:

1. Log into FOLIO-snapshot-stable as diku_admin
2. Go to Users App
3. Display User Details for a User
4. Click the Tags icon at the top of the detail record
5. Add a few tags

Actual Results: See red issues in the following scenario

1. • Given the Tags Pane
   • When it is viewed
   • Then the layout should appear like this
     • Header Tags
     • Sub-header [number] Tags representing the number of tags currently assigned to the record
     • Any existing assigned tags, in alphabetical order.
     • Each tag appears as its own separate box
     • An "x" appears in the right side of each tag's box, to allow the individual tag to be unassigned from the record.
     • Assigned tags can display next to each other, unless that would cause a tag to wrap to the next line, in which case move it to the following line.
     • A-M: second tag does not move to the next line correctly; exceeds the display box; see SecondTagNotDisplayedCorrectly screenshot
     • If one tag is too long to fit on one line, it can wrap to the next line
     • A-M: really long tag does not wrap to the next line; see LongTag screenhot.
     • All tags for the record are displayed, with no shortening or ellipses
     • If many tags are assigned to a record, extend the Tag Pane into a longer pane that can be scrolled down

Additional Information: see attached screenshots and video