LearnNewsExamplesServices
Frontmatter
id9222
titleDevIndex: Refactor StatusToolbar layout for mobile responsiveness
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtFeb 21, 2026, 1:58 AM
updatedAtFeb 21, 2026, 2:03 AM
githubUrlhttps://github.com/neomjs/neo/issues/9222
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
contentTrust
projected
quarantined0
signals[]
blockedBy[]
blocking[]
closedAtFeb 21, 2026, 2:03 AM

DevIndex: Refactor StatusToolbar layout for mobile responsiveness

Closed v12.0.0/archive-v12-0-0-chunk-3 enhancementdesignai
tobiu
tobiu commented on Feb 21, 2026, 1:58 AM

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.
tobiu
tobiu Feb 21, 2026, 2:03 AM

Input from Gemini 3 Pro:

✦ Refactored the DevIndex StatusToolbar for better mobile responsiveness.

  • Grouped the statistics labels (Total Contributions, •, Visible Rows) into a semantic Neo.container.Base with an hbox layout.
  • Set 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.