-
-
Notifications
You must be signed in to change notification settings - Fork 202
DevIndex: Refactor StatusToolbar layout for mobile responsiveness #9222
Copy link
Copy link
Closed
Labels
Description
The StatusToolbar in the DevIndex home view previously wrapped awkwardly on small mobile screens (like iPhone 12 portrait, 390px width). The layout pushed visible rows to a second line while trying to keep total contributions on the first line, leading to a broken and unreadable user interface during streaming.
This issue tracks the refactoring of the toolbar's layout to provide a robust, responsive 2-row layout on mobile devices without relying on DOM hacks (like dummy break components) or brittle CSS Grid constraints.
Changes:
- Grouped the statistics labels (
Total Contributions,•,Visible Rows) into a semanticNeo.container.Basewith anhboxlayout. - Reverted the main toolbar layout back to Flexbox (
hboxwithwrap: 'wrap'). - Adjusted SCSS to ensure the semantic stats container properly drops to a second row as a single, unbroken unit when space is constrained.
- Maintained the transparent background and right-alignment for the new stats container.
- Cleaned up unused, single-purpose CSS classes from the component configurations.
Reactions are currently unavailable