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
blockedBy[]
blocking[]
closedAtFeb 21, 2026, 2:03 AM

DevIndex: Refactor StatusToolbar layout for mobile responsiveness

Closed v12.0.0 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 added the enhancement label on Feb 21, 2026, 1:58 AM
tobiu added the design label on Feb 21, 2026, 1:58 AM
tobiu added the ai label on Feb 21, 2026, 1:58 AM
tobiu referenced in commit d150135 - "feat: Refactor DevIndex StatusToolbar layout for mobile responsiveness (#9222)" on Feb 21, 2026, 2:02 AM
tobiu assigned to @tobiu on Feb 21, 2026, 2:02 AM
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.
tobiu closed this issue on Feb 21, 2026, 2:03 AM