Block navigation toolbar items overlap on media-text

[koke]

To Reproduce
Steps to reproduce the behavior:

1. Insert a media-text block
2. Focus on the paragraph on the right
   Screenshots

Smartphone (please complete the following information):

• Device: iPhone 11 (Simulator)
• OS: iOS 13

Additional context
Add any other context about the problem here.

[lukewalczak]

Hello @koke, I've checked that issue (after pulling all new changes from gutenberg) and right now on vertical mode items within Media&Text block are aligned one above the other, on horizontal mode I'm not able to reproduce it.

horizontal	vertical

[koke]

That seems fine now, but I'm thinking this might break in other cases where translations for the block title might be longer. When the text doesn't fit, the text should be ellipsized or cut off, but the icons should not overlap

[lukewalczak]

I've discovered that navigation Toolbar is a bit broken on the largest font on iOS:

• icons are overlapping
• component name goes beyond the container

vertical	horizontal

Currently Toolbar height is fixed and the value is 44px. @iamthomasbishop What do you think about expanding container to fit icons along with label in two lines? Ellipsing / cutting off the label is not ideal case for a11y. Do you have other suggestions?

[lukewalczak]

Another solution can be changing (decreasing) the title fontSize to fit within a container.

[iamthomasbishop]

Can we set a max font-size on the label? I think it's inevitable that we'll run into issues w/ long names (esp translations), but a max size might help limit the issue.

[lukewalczak]

I'm thinking right now of kinda compromise between setting a max font-size along with ellipsing long names. What I mean is to use props called maxFontSizeMultiplier and ellipsizeMode. It allows us to give the user a full name if it's not so long or ellipsed a bit in the wrong case.
Look at the screenshots for reference:

short	long

[iamthomasbishop]

Ah ok. As you mentioned, not great for a11y, but I think it's okay as a start. I wonder if we do something when that's long-pressed to show a tooltip or something other thing?

Also worth mentioning that the block dev guidelines recommend short names for all block names, so if a block-maker uses a super-long name they're probably running into these types of issues in more places.