[UI] Mobile responsive improvements across all pages
Goal
Improve mobile layout across all SciDEX pages by fixing edge cases in the global CSS media queries and adding scrollable containers for fixed-width content on specific pages.
Acceptance Criteria
☑ Cards stack properly on mobile (768px and below)
☑ Tables scroll horizontally on mobile
☑ Navigation works on mobile (hamburger menu + sidebar)
☑ Forge page tool analytics tables are scrollable on narrow screens
☑ Fixed-width elements handled gracefully on mobile
☑ Container padding reduced on mobile for more content space
☑ Stats sections wrap properly on small screens
Approach
Audit existing CSS media queries in api.py nav_html() and site/style.css
Identify gaps: fixed-width columns, missing overflow handling, padding issues
Enhance 768px and 480px breakpoints in api.py inline CSS
Add scrollable wrappers to Forge page fixed-width tables
Verify syntax and test pagesWork Log
2026-04-02 — Slot 15
- Audited mobile CSS across api.py (inline nav_html CSS) and site/style.css
- Found site/style.css already has comprehensive mobile CSS (768px, 480px, 360px breakpoints)
- Identified gaps in api.py inline CSS: missing container padding, fixed-width handling, stats wrapping
- Enhanced 768px breakpoint: added container padding, margin-left reduction, padding reduction, fixed-width handling, card overflow, stats wrapping
- Enhanced 480px breakpoint: added container padding, stats sizing, footer wrapping, margin reduction, gap reduction, font size scaling
- Fixed Forge page: wrapped "Calls by Tool" and "Recent Tool Calls" sections with overflow-x:auto and min-width containers
- Verified syntax: python3 py_compile OK
- Result: Done — enhanced mobile responsive CSS for edge cases