feat: responsive mobile layout and touch optimizations

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;
+    }
 }

tickets/2026-01-07-responsive-mobile-layout.md

@@ -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 `<header>` 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.