From 10a50645eff5d7b233d09b9199eb008d8b3118d2 Mon Sep 17 00:00:00 2001 From: Kit Date: Mon, 12 Jan 2026 08:25:43 +0100 Subject: [PATCH 1/2] fix(ui): flatten nav into horizontal scroll on mobile/tablet On screens under 1100px, the nav groups were displaying in a confusing grid-like pattern. This flattens all nav items into a single horizontal scrollable row using display:contents to unwrap the group containers. Also fixes the issue where collapsed nav groups would hide items on mobile (where the toggle button is hidden), making them inaccessible. --- ui/src/styles/layout.mobile.css | 50 +++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css index 35ec7e8fa..d6a82babe 100644 --- a/ui/src/styles/layout.mobile.css +++ b/ui/src/styles/layout.mobile.css @@ -1,3 +1,53 @@ +/* Tablet/Mobile nav fix (under 1100px) - single horizontal scroll row */ +@media (max-width: 1100px) { + /* Flatten nav into single horizontal scroll */ + .nav { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 6px; + padding: 10px 12px; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + + .nav::-webkit-scrollbar { + display: none; + } + + /* Nav groups should flow inline, not stack */ + .nav-group { + display: contents; /* Flatten group wrapper - items flow directly into .nav */ + } + + .nav-group__items { + display: contents; /* Flatten items wrapper too */ + } + + /* Hide group labels on tablet/mobile */ + .nav-label { + display: none; + } + + /* Don't hide nav items even if group is "collapsed" */ + .nav-group--collapsed .nav-group__items { + display: contents; + } + + .nav-item { + padding: 8px 14px; + font-size: 13px; + border-radius: 10px; + white-space: nowrap; + flex-shrink: 0; + } + + .nav-item::before { + display: none; + } +} + /* Mobile-specific improvements */ @media (max-width: 600px) { .shell { From b77070cccf138cfd6bb471834421d8770e9518ad Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Mon, 12 Jan 2026 08:13:49 +0000 Subject: [PATCH 2/2] fix: keep mobile nav flattened (#771) (thanks @carlulsoe) --- CHANGELOG.md | 1 + README.md | 4 ++-- scripts/clawtributors-map.json | 1 + ui/src/styles/layout.mobile.css | 8 +------- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce2464038..5f6d751d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -57,6 +57,7 @@ - Installer UX: add `--install-method git|npm` and auto-detect source checkouts (prompt to update git checkout vs migrate to npm). ### Fixes +- Control UI: flatten nav into a single horizontal scroll row on tablet/mobile (and always show collapsed group items). (#771) — thanks @carlulsoe. - macOS: start + await local gateway before onboarding wizard begins. - Models/Onboarding: configure MiniMax (minimax.io) via Anthropic-compatible `/anthropic` endpoint by default (keep `minimax-api` as a legacy alias). - Agents/Browser: cap Playwright AI snapshots for tool calls (maxChars); CLI snapshots remain full. (#763) — thanks @thesash. diff --git a/README.md b/README.md index 365df020f..64b3c35fc 100644 --- a/README.md +++ b/README.md @@ -472,6 +472,6 @@ Thanks to all clawtributors: andrewting19 Asleep123 bolismauro cash-echo-bot Clawd conhecendocontato evalexpr gtsifrikas HazAT hrdwdmrbl hugobarauna Jarvis kitze kkarimi levifig Lloyd loukotal martinpucik mickahouan Miles mrdbstn MSch nexty5870 prathamdby reeltimeapps RLTCmpe Rolf Fredheim roshanasingh4 Samrat Jha snopoke - The Admiral wes-davis wstock YuriNachos Zach Knickerbocker zknicker Azade ddyo Erik latitudeki5223 - Manuel Maly Mourad Boustani pcty-nextgen-ios-builder Quentin Randy Torres thesash William Stock + The Admiral wes-davis wstock YuriNachos Zach Knickerbocker zknicker Azade carlulsoe ddyo Erik + latitudeki5223 Manuel Maly Mourad Boustani pcty-nextgen-ios-builder Quentin Randy Torres thesash William Stock

diff --git a/scripts/clawtributors-map.json b/scripts/clawtributors-map.json index 9dc6bb837..e8ee95bc7 100644 --- a/scripts/clawtributors-map.json +++ b/scripts/clawtributors-map.json @@ -1,5 +1,6 @@ { "ensureLogins": [ + "carlulsoe", "jdrhyne", "latitudeki5223", "manmal", diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css index d6a82babe..755dd2725 100644 --- a/ui/src/styles/layout.mobile.css +++ b/ui/src/styles/layout.mobile.css @@ -114,12 +114,7 @@ } .nav-group { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 6px; - margin-bottom: 0; - flex-shrink: 0; + display: contents; } .nav-label { @@ -322,4 +317,3 @@ height: 14px; } } -