The title of a table, a flex container, consists of two parts:
- Title label
- Toolbar (buttons and burger menu)
For example, if the title label takes up 70% of the width and the toolbar 20%, the user can resize the window so that the table loses a maximum of 10% of its width without the display changing noticeably. Any reduction beyond 10% shrinks both parts of the title equally. This ensures that, in the worst-case scenario, the toolbar—including the buttons—is displayed across multiple lines. This is unattractive. The title label is “truncated” and styled with an ellipsis using ` text-overflow `.
Implementation
The toolbar, a Flex item, must not become smaller than its content. Therefore, once a certain size is reached, only the title label is scaled down.
Test
Select a DemoTypes:A element and navigate to the priority table. Enter edit mode and reduce the window’s width. The toolbar must not be displayed across multiple lines.