✨ (grapher) prevent controls from overflowing

[sophiamersmann]

Keeps controls from overflowing on smaller screens. See screenshots 👇🏻

The "Show selection only" toggle on the table tab is moved into the settings drawer. The rest are just CSS touchups.

We compute the widths of the content switchers and the toggle to determine if there is enough space for the table toggle. I could have implemented this in a simpler way using breakpoints, but I wanted to make sure that we only hide the table toggle if absolutely necessary.

Before	After

[sophiamersmann]

• #3677
• #3589
• #3642 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server): Site	Admin	Wizard

Login: ssh owid@staging-site-grapher-controls

• Site-screenshots: https://github.com/owid/site-screenshots/compare/grapher-controls
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/grapher-controls

SVG tester:

Number of differences (default views): 1 ([3c9272](https://github.com/owid/owid-grapher-svgs/commit/3c927209d7ab6505459b3acb3b0cd8fcbc41feec)) ❌ Number of differences (all views): 6 ([99535c](https://github.com/owid/owid-grapher-svgs/commit/99535ca22831359df4e81d1282c687c2a402eec8)) ❌

Edited: 2024-06-10 12:14:38 UTC Execution time: 1.27 seconds

[notion-workspace[bot]]

Prevent Controls from Overflowing