Skip to content

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

Closed
Closed
[UI/UX] Mobile & Tablet Responsive Layout Overhaul (Fix Clipping, Overflow, and Touch Usability)#68
Labels
UI/UXenhancementNew feature or requestfrontendgood first issueGood for newcomershelp wantedExtra attention is neededmobile

Description

@Edge-Explorer
Edge-Explorer
opened on Sep 2, 2026

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.

Activity

  1. Edge-Explorer
    added
    enhancementNew feature or request
    help wantedExtra attention is needed
    good first issueGood for newcomers
    frontend
    UI/UX
    mobile
    on Sep 2, 2026
  2. Edge-Explorer
    changed the title [-]# [UI/UX] Mobile & Tablet Responsive Layout Overhaul (Fix Clipping, Overflow, and Touch Usability)[/-] [+] [UI/UX] Mobile & Tablet Responsive Layout Overhaul (Fix Clipping, Overflow, and Touch Usability)[/+] on Sep 2, 2026

  3. jonathanprogram2 commented on Sep 17, 2026

    @jonathanprogram2
    jonathanprogram2
    on Sep 17, 2026
    Contributor

    Hi, I'd like to work on this issue. I'm interested in tackling the responsive UI improvements across the listed frontend components. Is the expectation that one PR addresses all five areas, or would you prefer the work split into smaller PRs by component?

  4. Edge-Explorer commented on Sep 18, 2026

    @Edge-Explorer
    Edge-Explorer
    on Sep 18, 2026
    OwnerAuthor

    Hi @jonathanprogram2, thank you for offering to help! I've assigned the issue to you.

    Splitting the work into smaller, focused PRs by component/area would be fantastic and much easier to review and test safely!

    For each PR, please:

    1. Reference this issue in the title or description (e.g., feat(ui): mobile responsive navbar (Part of #68)).
    2. Add a brief summary of what was solved along with a quick screenshot/recording of the mobile view if possible.

    Feel free to pick whichever component you'd like to start with. Happy coding!

  5. Edge-Explorer
    added a commit that references this issue on Sep 28, 2026

    Merge pull request #88 from jonathanprogram2/feat/mobile-responsive-n…

    d2a0a78

  6. Edge-Explorer commented on Sep 28, 2026

    @Edge-Explorer
    Edge-Explorer
    on Sep 28, 2026
    OwnerAuthor

    🚀 Update: Navigation Responsiveness Completed

    The Navigation & Header responsiveness part of this issue has been resolved by @jonathanprogram2 via PR #88 and merged into main!

    What was addressed:

    • Mobile header overflow fixed across 360px–768px viewports.
    • Responsive credit and recharge badge scaling.
    • Landing page navigation alignment for mobile/tablet screens.

    Thanks @jonathanprogram2 for the contribution!

  7. Edge-Explorer commented on Sep 29, 2026

    @Edge-Explorer
    Edge-Explorer
    on Sep 29, 2026
    OwnerAuthor

    🚀Update: Dashboard Grid Flow & Chart Controls Completed

    The dashboard flow and chart toolbar responsiveness part of this issue has been resolved by @jonathanprogram2 via PR #89 and merged into main!

    What was addressed:

    • Removed nested vertical scroll traps across the dashboard panels for natural full-page mobile scrolling.
    • Enabled smooth horizontal touch-scrolling for the timeframe selector (1D–MAX).
    • Wrapped technical overlay pills into a clean flex layout and eliminated horizontal page overflow.

    Thanks again @jonathanprogram2 for the fantastic work!

  8. Edge-Explorer
    added a commit that references this issue on Oct 3, 2026

    fix(ui): improve mobile multi-pane indicator sizing (Part of #68)

    e4549ad

  9. Edge-Explorer commented on Oct 3, 2026

    @Edge-Explorer
    Edge-Explorer
    on Oct 3, 2026
    OwnerAuthor

    🚀 Update: Stock Chart Controls & Multi-Pane Sizing Completed

    The Stock Chart controls and multi-pane indicator sizing parts of this issue have been resolved by @jonathanprogram2 via PR #90 & PR #91 and merged into main!

    What was addressed:

    • Optimized RSI and MACD sub-pane heights for small mobile screens.
    • Added mobile chart data navigation controls for moving smoothly through data points.
    • Created touch-friendly 38px tap targets for technical indicator overlays.
    • Reduced Y-axis margin width to maximize horizontal chart space on mobile viewports.

    Thanks again @jonathanprogram2 for the fantastic contributions!

  10. Edge-Explorer commented on Oct 6, 2026

    @Edge-Explorer
    Edge-Explorer
    on Oct 6, 2026
    OwnerAuthor

    🎉 Issue Completed: Mobile & Tablet Responsive Layout Overhaul

    All acceptance criteria for Issue #68 have been successfully implemented, tested, and merged into main!

    🚀 Summary of Work Completed:

    1. Responsive Navbar & Layout Grid (PR feat(ui): improve responsive navigation (Part of #68) #88):
      • Clean column flow on viewports from 360px up to 768px.
      • Fixed header and action bar clipping.
    2. Stock Chart Controls & Navigation (PR fix(ui): improve mobile stock chart controls (Part of #68) #90):
      • Horizontal scrolling timeframe pills (1D – MAX) and touch-friendly overlay toggles.
      • Added smooth mobile pan/data navigation buttons.
    3. Multi-Pane Sub-Chart Sizing (PR fix(ui): improve mobile multi-pane indicator sizing #91):
      • Responsive height distribution for RSI & MACD indicator panes without vertical clipping.
      • Reduced Y-axis margin footprint on narrow mobile screens.
    4. AI Analyst & Strategy Form (PR fix(ui): improve mobile AI analyst form #97):
      • Fixed Entry, Target, and Stop Loss fields from overflow/clipping on portrait mobile screens.
      • Adjusted dropdown z-index positioning for Trading Style and Risk Profile menus.
      • Ensured full-width touch-friendly "Lock In Strategy" CTA.

    Huge thank you to @jonathanprogram2 for the fantastic work, great communication, and thoughtful contributions across all these PRs! 🚀🙌

  11. Edge-Explorer
    closed this as completedon Oct 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    UI/UXenhancementNew feature or requestfrontendgood first issueGood for newcomershelp wantedExtra attention is neededmobile

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions