feat: responsive mobile layout and touch optimizations

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.