diff --git a/src/web/public/style.css b/src/web/public/style.css index f968e4d..df772f8 100644 --- a/src/web/public/style.css +++ b/src/web/public/style.css @@ -382,4 +382,77 @@ header nav a:hover::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } +} + +/* Mobile Responsiveness */ +@media (max-width: 768px) { + :root { + --header-height: 3.5rem; + /* Compact header on mobile */ + } + + body { + font-size: 14px; + /* Slightly smaller base font */ + } + + /* Layout Adjustments */ + header { + padding: 0 1rem; + } + + header nav a { + margin-left: 1rem; + font-size: 0.9rem; + } + + main { + padding: 1rem; + width: 100%; + max-width: 100%; + } + + /* Typography Scaling */ + h1 { + font-size: 1.75rem; + } + + h2 { + font-size: 1.5rem; + } + + h3 { + font-size: 1.25rem; + } + + /* Card Adjustments */ + .card { + padding: 1.25rem; + border-radius: var(--radius-md); + /* Slightly smaller radius */ + } + + /* Stack flex containers if needed (general util) */ + .flex-col-mobile { + flex-direction: column !important; + } + + /* Touch Targets */ + .btn, + a, + input, + select { + min-height: 44px; + /* Compliance with touch target guidelines */ + } + + /* Horizontal scroll for wide tables */ + .table-container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin-left: -1rem; + margin-right: -1rem; + padding-left: 1rem; + padding-right: 1rem; + } } \ No newline at end of file diff --git a/tickets/2026-01-07-responsive-mobile-layout.md b/tickets/2026-01-07-responsive-mobile-layout.md deleted file mode 100644 index b5e2832..0000000 --- a/tickets/2026-01-07-responsive-mobile-layout.md +++ /dev/null @@ -1,34 +0,0 @@ -# 2026-01-07-responsive-mobile-layout.md: Responsive Layout & Mobile Optimization - -**Status:** Draft -**Created:** 2026-01-07 -**Tags:** responsive, mobile, layout, css - -## 1. Context & User Story -* **As a:** User accessing the dashboard from a mobile device -* **I want to:** View and navigate the content easily without horizontal scrolling or broken layouts -* **So that:** I can monitor the bot status from my phone while on the go. - -## 2. Technical Requirements -### Data Model Changes -- N/A - -### API / Interface -- N/A - -## 3. Constraints & Validations (CRITICAL) -- **Breakpoints:** Use standard breakpoints (mobile first approach preferred, or standard desktop-first with max-width queries). -- **Touch Targets:** Interactive elements must be at least 44x44px on mobile devices. -- **Viewport:** Ensure meta viewport tag covers all device widths (already present in layout, verify settings). - -## 4. Acceptance Criteria -1. [ ] The navigation bar adapts to mobile screens (collapses into a hamburger menu or utilizes a scrollable tab bar). -2. [ ] Main content padding adjusts for smaller screens to maximize usable space. -3. [ ] Grid/Flex layouts stack vertically on mobile screens. -4. [ ] Typography sizes scale appropriately (smaller headers on mobile). - -## 5. Implementation Plan -- [ ] Add media queries to `style.css` for tablet and mobile breakpoints. -- [ ] Modify the `
` styles to accommodate a more flexible layout. -- [ ] Implement a simple JS toggle for mobile navigation if a hamburger menu is chosen, OR style a horizontal scrollable nav. -- [ ] Adjust `.card` and container margins for mobile contexts.