[UI/UX] Mobile & Tablet Responsive Layout Overhaul (Fix Clipping, Overflow, and Touch Usability)

[Edge-Explorer]

Summary

While QuantIQ works smoothly with an expansive layout on desktop and laptop screens, the user interface currently suffers from responsiveness issues on mobile devices and smaller tablet screens (< 768px).

Elements such as the top navigation bar, chart range/indicator toolbars, and AI strategy inputs get distorted, overflow horizontally, or become hard to touch and navigate. We want to open this issue for a comprehensive mobile-first responsive design overhaul.

---

Motivation

Traders frequently check stock movements, indicator signals, and AI analyst predictions on mobile devices. A clean, responsive mobile layout with fluid touch targets and zero horizontal overflow will make QuantIQ feel like a native mobile app.

---

Key Problem Areas & Proposed Fixes

1. Navigation & Market Ticker Bar (frontend/src/components/Navbar.tsx & App.css)

• Issue: Navbar elements (logo, credits badge, market ticker tape, profile button) get squished or wrap awkwardly.
• Fix: On screens < 768px, allow the market ticker tape to scroll smoothly with touch drag (overflow-x: auto), and condense navbar icons/badges into a compact mobile header.

2. Stock Chart Controls & Toolbar (frontend/src/components/StockChart.tsx & App.css)

• Issue: Timeframe selectors (1D, 5D, 1M, 6M, 1Y, MAX) and Technical Overlay pills (SMA, EMA, RSI, MACD, Bollinger) wrap into multiple clunky rows.
• Fix: Wrap control bars in horizontally scrollable pill containers (white-space: nowrap, smooth scrollbar hide) with finger-friendly touch padding (min-height: 38px).

3. Multi-Pane Indicator Sizing on Small Screens (frontend/src/components/StockChart.tsx)

• Issue: Stacking Price, RSI, and MACD panes on a phone screen can cause vertical overflow or compress the main candlestick chart.
• Fix: Optimize default pane heights for mobile viewports (e.g., main chart 260px, sub-panes 85px) and adjust Y-axis tick widths so charts utilize the maximum screen width.

4. AI Analyst & Lock-In Strategy Form (frontend/src/components/AIAnalyst.tsx)

• Issue: Entry, Target, and Stop Loss input rows are too wide for mobile portrait mode and can clip.
• Fix: Use a responsive flex-wrap layout so the 3 inputs neatly stack or wrap into clean 2-row grids on small viewports with full-width action buttons.

5. Dashboard Grid Flow (frontend/src/pages/Dashboard.tsx & App.css)

• Issue: Sidebars stack in a long, endless vertical scroll.
• Fix: Ensure clean container padding (padding: 12px 8px on mobile), prevent unwanted horizontal body scroll (overflow-x: hidden), and ensure smooth touch scrolling.

---

Files to Update

Layer	File Path	Scope
Frontend Style	frontend/src/App.css	Add mobile media queries (max-width: 768px / max-width: 480px), horizontal scroll wrappers, and touch target adjustments
Frontend UI	frontend/src/components/StockChart.tsx	Responsive toolbar wrappers, mobile chart height calculations, and compact axis margins
Frontend UI	frontend/src/components/Navbar.tsx	Mobile header layout and compact status indicators
Frontend UI	frontend/src/components/AIAnalyst.tsx	Responsive grid/stack for Entry/Target/Stop-Loss inputs
Frontend Pages	frontend/src/pages/Dashboard.tsx	Mobile container padding and grid spacing

---

Acceptance Criteria

• Zero unwanted horizontal scroll or screen cutoff across mobile viewports (tested from 360px to 768px).
• Timeframe buttons (1D–MAX) and Technical Overlay pills scroll horizontally or wrap cleanly.
• Candlestick chart and indicator sub-panes (RSI, MACD) render cleanly on mobile screens.
• AI Analyst strategy inputs (Entry / Target / Stop Loss) and "Lock In Strategy" button fit portrait screens.
• Touch targets (buttons, pills, dropdowns) are easily clickable on mobile (minimum 36px-40px height).
• Desktop and laptop layouts remain untouched and pixel-perfect.

---