Skip to content

DevIndex: Refactor StatusToolbar layout for mobile responsiveness #9222

@tobiu

Description

@tobiu

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 semantic Neo.container.Base with an hbox layout.
  • Reverted the main toolbar layout back to Flexbox (hbox with wrap: '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.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions