Improve responsive UI and mobile UX

[ChrisAdamsdevelopment]

Motivation

• Polish the frontend visual design and responsive behavior so SpectraCleanseAI feels like a professional creator/security SaaS across desktop, tablet, and mobile while preserving all backend and workflow behavior.
• Keep changes minimal and focused to presentation: edits are limited to app.tsx and src/styles.css, with no server, package, Docker, or API contract changes.

Description

• Updated app.tsx to provide a responsive app shell: compact stacked mobile header, flexible header controls, and a grid-based workspace that becomes a sidebar/main split on larger screens to avoid horizontal overflow.
• Polished cards and spacing for SEO, Cleanse Workflow, Analysis, Logs, and Forensic Report areas with safer wrapping, responsive grid breakpoints, clearer Quick (emerald) vs Server (cyan) cleanse cards, and retained all original UI behavior and messages.
• Modified src/styles.css to refine the dark-slate premium theme, add cyan/emerald accent glow, prevent horizontal overflow (overflow-x: hidden), and add stronger :focus-visible outlines for accessibility.
• Files changed: app.tsx, src/styles.css only.

Testing

• Validated under supported Node runtime 20.20.2.
• Ran npm install successfully.
• Ran npm run build successfully.
• Performed code inspection/grep to confirm required flows remain present: AuthScreen, /api/me, UsageMeter, PlanBadge, UpgradeModal, create-checkout-session, checkoutBanner, /api/process, /api/generate-seo, Quick Cleanse, Full Server Cleanse, manual download link/URL.revokeObjectURL, metadata analysis, and logs.
• Confirmed no backend/API/dependency/Docker changes were made.
• Confirmed existing auth, Stripe, usage, server cleanse, browser cleanse, SEO, and download behavior were preserved.

Summary by Sourcery

Polish the app shell and layout for better responsive behavior across desktop and mobile while keeping existing workflows intact.

New Features:

• Introduce a responsive grid-based app layout that switches between stacked and sidebar/main arrangements across breakpoints.

Enhancements:

• Refine navbar, sidebar, and main content spacing and breakpoints to improve usability on small screens and large displays.
• Improve card layouts for cleanse workflow, metadata analysis, logs, and forensic reports to wrap safely and remain readable on narrow viewports.
• Add global overflow-x suppression and updated background styling to prevent horizontal scrolling and enhance the premium dark theme appearance.
• Strengthen focus-visible outlines for interactive elements to improve keyboard accessibility and focus visibility.

[sourcery-ai]

Reviewer's Guide

This PR refactors the main app shell layout and global styles to provide a more responsive, mobile-friendly UI while preserving all existing workflows and behavior, primarily by restructuring the navbar and main content layout into responsive flex/grid patterns, tightening overflow handling, and enhancing visual styling and focus outlines.

Flow diagram for updated responsive app shell layout

flowchart LR
  Body[Body<br>- overflow-x:hidden<br>- gradient background] --> AppRoot[App root div<br>- flex column<br>- overflow-x-hidden]

  AppRoot --> Navbar[Navbar<br>- flex col on mobile<br>- flex row on lg<br>- responsive controls]
  AppRoot --> LayoutGrid[Main layout grid<br>- 1 column on mobile<br>- sidebar/main split on xl]

  LayoutGrid --> Sidebar[Sidebar<br>- max-h ~42vh on mobile<br>- border-b on mobile<br>- queue + UsageMeter]
  LayoutGrid --> MainPanel[Main panel<br>- responsive padding<br>- widened content<br>- responsive cards/logs]

Loading

File-Level Changes

Change	Details	Files
Make app shell layout responsive and prevent horizontal overflow across viewports.	Add overflow-x-hidden to the root App container to avoid horizontal scrolling. Refactor navbar from a fixed-height horizontal bar into a flex-col / flex-row responsive layout with adjusted padding and gaps for small screens. Change main content wrapper from a flex layout to a responsive CSS grid that becomes a sidebar/main split on XL screens. Adjust sidebar sizing, borders, and max heights to behave as a top section on small screens and a vertical panel on large screens. Ensure scrollable areas (queue, main panel) have min-h-0 and updated padding to avoid layout issues in nested flex/grid containers.	app.tsx
Improve responsiveness and readability of main panels, cards, and text-heavy sections.	Increase main content max width and adjust padding across breakpoints for better use of space on large displays. Make SEO Configuration, Cleanse Workflow, System Log, and Forensic Report panels use slightly translucent backgrounds, shadows, and responsive padding. Update grid definitions for workflow cards, metadata analysis, and forensic report stats to collapse to single-column on narrow viewports. Allow long strings (e.g., manual download URL, log lines) to wrap via break-all / break-words to prevent overflow. Increase System Log max height and tweak typography for better readability on small screens.	app.tsx
Refine global styling and accessibility of the dark theme.	Change body background to layered radial and linear gradients with cyan/emerald accent glows while keeping a dark base. Add overflow-x: hidden at the body level as a second guard against horizontal scrolling. Introduce stronger, consistent focus-visible outlines for interactive elements (buttons, links, inputs, textareas, selects) using a cyan outline and offset for accessibility.	src/styles.css

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• Using overflow-x-hidden on both the root app container and body can mask layout issues and potentially clip legitimately scrollable content; consider scoping this to specific layouts (e.g., the main shell) or ensuring there are no horizontal scroll use-cases before applying it globally.
• The updated System Log JSX remains as a very long single line, which is hard to read and maintain; breaking this into multi-line JSX with clearer structure (e.g., extracting the log-row into a small helper component) would improve maintainability.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Using `overflow-x-hidden` on both the root app container and `body` can mask layout issues and potentially clip legitimately scrollable content; consider scoping this to specific layouts (e.g., the main shell) or ensuring there are no horizontal scroll use-cases before applying it globally.
- The updated System Log JSX remains as a very long single line, which is hard to read and maintain; breaking this into multi-line JSX with clearer structure (e.g., extracting the log-row into a small helper component) would improve maintainability.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 57533bcc7f

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain mobile grid rows so main panel can scroll

On screens below xl, this switches the workspace to a one-column grid with implicit auto rows while the container still uses overflow-hidden. In that mode the <main> row tends to grow to content height, so overflow-y-auto on <main> does not reliably become the active scroll container and lower sections can be clipped/unreachable when analysis/report content is long. Defining explicit rows (for example auto + minmax(0,1fr)) and/or applying min-h-0 to the main grid item keeps mobile/tablet scrolling functional.

Useful? React with 👍 / 👎.