Skip to content

fix(website): mobile responsiveness improvements#441

Merged
ajitpratap0 merged 4 commits intomainfrom
fix/website-mobile-responsiveness
Mar 28, 2026
Merged

fix(website): mobile responsiveness improvements#441
ajitpratap0 merged 4 commits intomainfrom
fix/website-mobile-responsiveness

Conversation

@ajitpratap0
Copy link
Copy Markdown
Owner

@ajitpratap0 ajitpratap0 commented Mar 28, 2026

Summary

Mobile/responsive audit of gosqlx.dev identified issues across 8 components. This PR fixes all HIGH and MEDIUM severity items found.

Changes

Component Fix Severity
Navbar Hamburger button enlarged to 44×44px (w-11 h-11) — was 36×32px, below iOS minimum HIGH
Playground Hide "SQL Playground" label on mobile to prevent toolbar overflow; min-h-[240px] on each stacked panel; copy button padding increased HIGH
CodeExamples Added flex-wrap to tab bar so "Parse/Format/Validate/Lint" wraps on 320px phones MEDIUM
Hero min-w-0 on grid columns ensures <pre> blocks scroll within card bounds; text-[10px] → text-xs (12px min) for "parsed in <1ms" MEDIUM
StatsBar Counter text text-3xl sm:text-4xl — was text-4xl, "1,380,000+" wraps on 2-col grid at 320px MEDIUM
AnimatedCounter Same text-3xl sm:text-4xl scaling to match StatsBar prefix MEDIUM
VscodeSection Gap reduced from gap-10 to gap-6 md:gap-10 on mobile stack LOW
BenchmarksContent Table cells px-3 py-3 sm:px-6 sm:py-4 — reduces table width by ~120px, fixing 94–205px overflow on 390px viewport (scroll hint already present) HIGH

Audit methodology

  • Visual audit via browser automation (390×844, 768×1024, 1440×900)
  • Source code audit of all 45 component/page files for missing mobile breakpoints

Test plan

  • Homepage renders correctly at 390px (no overflow, stats readable)
  • Benchmarks tables scroll on mobile with visible scroll hint
  • Playground toolbar fits on 390px width
  • Code example tabs wrap gracefully at 320px
  • Hamburger button hit area is 44×44px
  • Desktop layout unchanged at 1440px

🤖 Generated with Claude Code

Ajit Pratap Singh and others added 3 commits March 26, 2026 10:33
@claude
fix: resolve Sentry hydration mismatch and suppress extension noise
f430560 
FadeIn.tsx — fix SSR hydration mismatch (Sentry #104333516, #104333514):
Framer Motion applies initial={{ opacity:0, y:16 }} before React hydrates,
causing the server-rendered DOM (opacity:1) to mismatch the client DOM.
Fix: render a plain <div> on server + during hydration (isMounted=false),
then swap to <motion.div> after useEffect fires. No mismatch, no flash.

instrumentation-client.ts — filter browser extension noise (Sentry #106232192, #105431404):
Add beforeSend hook to drop two known extension-only error patterns:
- "Cannot assign to read only property 'pushState'" — extensions wrap
  history.pushState before the app loads, making it read-only
- "Object Not Found Matching Id:N, MethodName:update" — Chrome DevTools
  Protocol messages from extensions interacting with CodeMirror

GitHub issue #435 (Object Not Found) closed as noise.
Issues #436/#437 (hydration) resolved by the FadeIn fix.
Issue #434 (pushState) silenced via beforeSend filter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
fix: address PR review suggestions for #439
a3834b1 
- Wrap FadeIn in memo() to prevent unnecessary re-renders from parent
  state changes that don't affect the component's own props
- Log suppressed extension noise errors to console.debug in development
  so they remain visible locally while staying off Sentry in production

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
fix(website): mobile responsiveness improvements
0846957 
- Navbar: enlarge hamburger button to 44×44px (w-11 h-11) for iOS touch target minimum
- Playground: hide 'SQL Playground' label on mobile to prevent toolbar overflow; add min-h-[240px] to each panel so stacked layout is usable on small screens; increase copy button padding
- CodeExamples: add flex-wrap to tab bar so tabs don't overflow on 320px phones
- Hero: add min-w-0 to grid columns to ensure pre blocks scroll within bounds; increase 'parsed in <1ms' from 10px to 12px (text-xs)
- StatsBar: make counter text text-3xl on mobile (was text-4xl, too wide for 2-col grid on 320px)
- AnimatedCounter: same text-3xl sm:text-4xl responsive scaling
- VscodeSection: reduce gap from gap-10 to gap-6 md:gap-10 on mobile
- BenchmarksContent: reduce table cell padding to px-3 py-3 on mobile (was px-6 py-4), reducing table width by ~120px to fit 390px viewport

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 28, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gosqlx-website Ready Ready Preview, Comment Mar 28, 2026 2:44pm

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 28, 2026 •
edited
Loading

Claude finished @ajitpratap0's task —— View job

PR Review: Mobile Responsiveness Improvements

Review Checklist

  • Analyze code quality and best practices across all changed files
  • Check for potential bugs or issues in responsive implementations
  • Evaluate performance considerations
  • Review security concerns
  • Assess test coverage needs
  • Provide constructive feedback and recommendations

✅ Code Quality & Best Practices

Excellent implementation quality across all components:

  1. Navbar.tsx (line 105): Hamburger button properly sized to w-11 h-11 (44×44px) meets iOS accessibility guidelines
  2. Playground.tsx (lines 212, 239, 254): Smart responsive layout with proper breakpoints and minimum heights
  3. CodeExamples.tsx (line 112): Added flex-wrap for graceful tab wrapping on narrow screens
  4. Hero.tsx (lines 159, 185): min-w-0 prevents overflow in grid layouts - excellent CSS understanding
  5. StatsBar.tsx & AnimatedCounter.tsx: Consistent responsive text sizing with text-3xl sm:text-4xl
  6. BenchmarksContent.tsx: Proper table cell padding reduction maintains usability while fixing overflow

✅ Potential Issues & Bugs

No critical issues found. Minor observations:

  1. Hero.tsx (line 185): Text size change from text-[10px] to text-xs is correct - maintains 12px minimum readable size
  2. Playground.tsx (line 212): Conditional "SQL Playground" label hiding is well-implemented with sr-only for accessibility
  3. VscodeSection.tsx (line 11): Gap reduction from gap-10 to gap-6 md:gap-10 maintains desktop experience while improving mobile

✅ Performance Considerations

Optimized for performance:

  1. FadeIn.tsx: Enhanced hydration handling prevents layout shift - good performance optimization
  2. AnimatedCounter.tsx: Respects prefers-reduced-motion for accessibility and battery life
  3. All responsive changes use efficient Tailwind classes that compile to minimal CSS
  4. No additional JavaScript dependencies or heavy computations introduced

✅ Security Concerns

No security issues identified:

  1. instrumentation-client.ts: Sentry configuration looks appropriate with proper error filtering
  2. All changes are purely presentational CSS - no user input handling or data processing modifications
  3. External links maintain proper rel="noopener noreferrer" attributes

✅ Test Coverage

Manual testing recommended:

Since these are UI/responsive changes, automated unit tests have limited value. The PR includes a comprehensive test plan:

  • Homepage renders at 390px viewport
  • Benchmarks tables scroll with visible scroll hint
  • Playground toolbar fits 390px width
  • Code tabs wrap at 320px
  • Hamburger button has 44×44px hit area

Recommendation: Consider adding visual regression tests or component tests for critical responsive breakpoints in the future.

🎉 Final Verdict

APPROVED - This is a high-quality mobile responsiveness implementation that addresses all stated issues without introducing regressions. The changes demonstrate strong understanding of responsive design principles, accessibility requirements, and performance considerations.

Highlights:

  • Methodical approach addressing each component systematically
  • Proper accessibility considerations (touch targets, screen readers)
  • Performance-conscious implementation
  • Maintains desktop experience while improving mobile

Job Run

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 28, 2026 •
edited
Loading

Claude finished @ajitpratap0's task —— View job

PR Review: Mobile Responsiveness Improvements

Review Checklist

  • Analyze code quality and best practices across all changed files
  • Check for potential bugs or issues in responsive implementations
  • Evaluate performance considerations
  • Review security concerns
  • Assess test coverage needs
  • Provide constructive feedback and recommendations

✅ Code Quality & Best Practices

Excellent implementation quality across all components:

  1. Navbar.tsx (line 107): Hamburger button properly sized to w-11 h-11 (44×44px) meets iOS accessibility guidelines
  2. Playground.tsx (lines 212, 239, 254): Smart responsive layout with proper breakpoints and minimum heights
  3. CodeExamples.tsx (line 112): Added flex-wrap for graceful tab wrapping on narrow screens
  4. Hero.tsx (lines 159, 185): min-w-0 prevents overflow in grid layouts - excellent CSS understanding
  5. StatsBar.tsx & AnimatedCounter.tsx: Consistent responsive text sizing with text-3xl sm:text-4xl
  6. BenchmarksContent.tsx: Proper table cell padding reduction maintains usability while fixing overflow

✅ Potential Issues & Bugs

No critical issues found. Minor observations:

  1. Hero.tsx (line 185): Text size change from text-[10px] to text-xs is correct - maintains 12px minimum readable size
  2. Playground.tsx (line 212): Conditional "SQL Playground" label hiding is well-implemented with sr-only for accessibility
  3. VscodeSection.tsx (line 11): Gap reduction from gap-10 to gap-6 md:gap-10 maintains desktop experience while improving mobile

✅ Performance Considerations

Optimized for performance:

  1. AnimatedCounter.tsx: Respects prefers-reduced-motion for accessibility and battery life
  2. All responsive changes use efficient Tailwind classes that compile to minimal CSS
  3. No additional JavaScript dependencies or heavy computations introduced
  4. Proper use of sr-only classes for screen readers without visual impact

✅ Security Concerns

No security issues identified:

  1. All changes are purely presentational CSS - no user input handling or data processing modifications
  2. External links maintain proper rel="noopener noreferrer" attributes
  3. No introduction of potentially unsafe dynamic content or XSS vectors

✅ Test Coverage

Manual testing recommended:

Since these are UI/responsive changes, automated unit tests have limited value. The PR includes a comprehensive test plan:

  • Homepage renders at 390px viewport
  • Benchmarks tables scroll with visible scroll hint
  • Playground toolbar fits 390px width
  • Code tabs wrap at 320px
  • Hamburger button has 44×44px hit area

Recommendation: Consider adding visual regression tests or component tests for critical responsive breakpoints in the future.

🎉 Final Verdict

APPROVED - This is a high-quality mobile responsiveness implementation that addresses all stated issues without introducing regressions. The changes demonstrate strong understanding of responsive design principles, accessibility requirements, and performance considerations.

Highlights:

  • Methodical approach addressing each component systematically
  • Proper accessibility considerations (touch targets, screen readers)
  • Performance-conscious implementation
  • Maintains desktop experience while improving mobile

Job Run

@ajitpratap0 ajitpratap0 merged commit ba4e21d into main Mar 28, 2026
21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ajitpratap0