Content translation provides a card with editing tools in the tools column. After the initial implementation (T176422), some adjustments may be needed for it to better fit the available space.

Currently, the tools overflow the card and horizontal scroll appear. Making the layout look broken and the tools harder to access. This is illustrated below:

Proposed solution

Several interventions are proposed to solve the issue:

Make the buttons smaller
The buttons used in the editing toolbar are larger that the same ones when they are used in VE. It seems that the toolbar in CX is based on a 16px font size. To adjust the size, we may want to use a 14px font size instead.

Move the Cite tool inside the "..." menu
We can make the Cite tool available inside the "more" ("...") menu. The action should be styled as it is in Visual Editor, with the quote icon (") and the label.

(Consider) moving the tools dynamically inside the "..." menu
Ideally, tools that do not fit in the toolbar could be moved dynamically to the "more" menu based on the available space. This requires to detect when there is not enough room for the default tools to fit in the card.

In addition, we need to deal with the tool groups that provide multiple tools inside a drop-down (e.g., the list drop-down includes bullet and numbered list tools among other options). When such groups move inside the "..." menu, the individual tools of such group can be added to the "..." menu, and separator lines can be used to differentiate the groups.

For an initial iteration we may want to do a quick exploration to determine the complexity of this approach, and create a separate ticket for it if it requires a bigger effort.

(Alternatively) allow the editing card to wrap into multiple rows
If the previous approach is too complex for an initial iteration, we can start with the same approach currently used by Visual editor as a first step: make tools to wrap to a second row when there is not enough room for them to fir in a single row. In the example below the editing toolbar is shown for a 850px wide window, where it goes to two lines: