AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug SandboxBack to Radar

Design System ComponentPreview Layout Clips And Breaks Responsiveness On Mobile Viewports

In Supabase Design System documentation, component previews overflow on mobile due to rigid padding (p-10) and fixed-width inner elements (w-[400px]) and inflexible flex rows with large gap (gap-16). This causes content to clip horizontally.

mediumConfidence 95%React

Origin Analysis

The preview container applies a fixed p-10 padding that consumes too much horizontal space on small screens, while example components use fixed widths (w-[400px]) and non-wrapping flex layouts with large gaps (gap-16), preventing them from adapting to narrow viewports.
1. Go to https://supabase.com/design-system on a mobile device or enable mobile device emulation in browser DevTools. 2. Navigate to the Copywriting documentation or any section with component previews (e.g., Confirmations and dialogs). 3. Scroll down to component previews such as 'State consequences clearly'. 4. Observe that dialog components and cards are truncated and bleed past the viewable boundaries.

Fixing Code Block

// apps/design-system/components/component-preview.tsx // Change the container padding from fixed p-10 to responsive p-4 sm:p-10 <div className="p-4 sm:p-10"> {/* preview content */} </div> // In example files (e.g., copy-confirmations.tsx, copy-error-messages.tsx) // Replace fixed width with fluid max-width <div className="w-full max-w-[400px]"> {/* dialog card content */} </div> // For flex rows with large gaps (e.g., gap-16) // Add flex-wrap and responsive gap <div className="flex flex-wrap gap-8 sm:gap-16"> {/* flex items */} </div>
The fix makes the preview container padding responsive to allow more space on mobile. Fixed width w-[400px] is changed to w-full max-w-[400px] so cards scale down while maintaining a maximum width. Flex rows are updated to wrap and reduce gap on small screens, preventing horizontal overflow.

Edge Case Audit

This change may affect desktop layout if the responsive padding or max-width constraints are not thoroughly tested across breakpoints. Adding flex-wrap could cause items to wrap unexpectedly on tablet widths; ensure all impacted example files are updated to avoid inconsistency. Rollback by reverting the relevant PR (e.g., #46034) or undo the class changes.

Related Intelligence

mediumChatOpenAI.with_structured_output(json_schema) streaming drops response headersmediumHTMLSemanticPreservingSplitter preserves empty and javascript: href links as markdownmediumgrep_search Python fallback skips valid UTF-8 files on Windows due to missing encoding parameter in read_text()mediumVSCodium not detected on macOS when clicking error overlay linksmediumAIMessageChunk tool_call_chunks args escapes non-ASCII charactersmediumInconsistent and missing documentation for Stripe Sync Engine and Stripe Marketplace App

Ecosystem Topology

Latest critical and high reports

Toolchains

Next.js, Supabase, and the surrounding app stack

Next.jsSupabase
  1. criticalHosted Data API fails when PostgREST uses non-existent schemas after Dashboard exposed-schema changes
  2. highrouter.replace with shallow:true persists shallow flag in history state, causing getServerSideProps to be skipped on browser back navigation
  3. highSchema drift between Stripe Sync Engine installed via Studio and Docker due to missing version pinning
  4. highhistory.pushState reverts when prefetched Link and proxy.ts cookie-based redirect coexist
  5. highIntermittent PGRST002 schema cache error on official Supabase when querying public schema