feat(mobile): standardize the mobile experience — consistent footer, dark-mode fix, slimmer chrome#83
Merged
Conversation
…dark-mode fix, slimmer chrome Make the whole app feel like one mobile product, not the desktop UI shrunk. - Consistent footer on EVERY page: the bottom nav (List · Graph · More) moves from the Workspace into the Layout shell via a shared MobileBottomNav + ViewModeContext (viewMode lifted out of Workspace). List/Graph jump to the workspace in that view from any page; More opens a sheet with the other views AND the other pages (Ontology/Settings/Admin/System/…). The desktop tab strip stays desktop-only. - Dark-mode fix (the "black text on dark background" report): tailwind darkMode was unset (→ 'media'), so on a light-OS device the app's `dark:` text variants never applied and `text-gray-900` rendered black on the always-dark surfaces. Force it: `darkMode: 'class'` + `<html class="dark">`. Fixes readability across every component that used `dark:` variants (CardView, modals, Kanban, the mobile Table cards, …) at once. - Standardized, slimmer page headers on mobile (px-3 py-3 sm:px-6 sm:py-4) across Ontology/Settings/Admin/Backend/Analytics/Agents + sub-pages. - Skinnier list items: CardView is more compact (tighter padding/margins, smaller title, 2-line clamped description, shorter priority bar). - Refined filters: the 4 filter dropdowns become a 2-up grid on phones (were clipped in a single row) and are compact (text-xs, responsive width). - Fixed the flex chain (min-h-0) so the scroll area is bounded and the footer is never hidden behind overflowing content. mobile-experience + mobile-views 10/10 (navigate via the shared footer); smoke gate 5/5; web typecheck + prod build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Standardizes the mobile UI into one consistent experience (per feedback: consistent footer everywhere, smaller headers, skinnier list items, refined filters) — plus a real readability bug.
Consistent footer on every page
MobileBottomNav+ a newViewModeContext). List/Graph jump to the workspace in that view from any page; More opens a sheet with the other views and the other pages. Desktop tab strip stays desktop-only.Dark-mode fix — "black text on dark background"
darkModewas unset (defaults to'media'), so on a light-OS device the app'sdark:text variants never applied →text-gray-900rendered black on the always-dark surfaces. Fixed globally:darkMode: 'class'+<html class="dark">. Verified: card title is nowrgb(255,255,255)in light-scheme (was near-black). Fixes CardView, modals, Kanban, mobile Table cards, etc. at once.Slimmer, standardized
px-3 py-3 sm:px-6 sm:py-4) across all secondary pages + sub-pages.min-h-0chain so the scroll area is bounded and the footer is never hidden behind content.Verification
mobile-experience + mobile-views 10/10 (navigate via the shared footer); smoke gate 5/5; typecheck + prod build clean.