Platform: Toolbar comment button cut in half on small editor width

[Sebastian-ubs]

On a small editor width the other toolbar controls (back, forward, style) move up a bit to make space for a scrollbar, whereas the comment button stays and so is cut in half / overlayed by the horizontal scrollbar:

In Firefox this is not seen, as Firefox uses a smaller scrollbar. In Chrome and Electron it is visible like can be seen above - this screenshot is from the scripture-editor codesandbox

Besides with a small editor width this also happens in a wider editor, when there is a long style name selected in the dropdown, which increases its width.

[irahopkinson]

@Sebastian-ubs thanks for trying things out in the editor. Any thoughts on what it should do instead? And/or how to fix it?

[Sebastian-ubs]

Not sure how technically those other ui elements shrink / re-arrange, but I would expect the comment button to behave similar.

[Sebastian-ubs]

In general the toolbar should ideally never need to show vertical scrollbars, but adapt to the available width by

• defining the dropdown width not based on its content, but shrinking / growing according to available space
• define a reasonable min-width and if smaller, hide controls in an overflow menu

[Sebastian-ubs]

a working solution seems to be

    .toolbar-item.block-controls {
      max-width: calc(100% - 140px);
      .icon.block-marker.nb {
        min-width: 20px;
      }
      .chevron-down {
        min-width: 16px;
      }
    }

Which of course is not very flexible with the hard coded 140px, but does its job for now.