Skip to content

fix(website): mobile responsiveness improvements #441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajitpratap0 merged 4 commits into from
Mar 28, 2026
Merged

fix(website): mobile responsiveness improvements #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f430560
fix: resolve Sentry hydration mismatch and suppress extension noise
Mar 26, 2026
a3834b1
fix: address PR review suggestions for #439
Mar 26, 2026
0846957
fix(website): mobile responsiveness improvements
Mar 28, 2026
aee27f0
Merge branch 'main' into fix/website-mobile-responsiveness
ajitpratap0 Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions website/src/app/benchmarks/BenchmarksContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@ export function BenchmarksContent() {
<caption className="sr-only">GoSQLX Parse Benchmarks</caption>
<thead>
<tr className="border-b border-white/[0.06]">
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Benchmark</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Query Type</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Apple M4</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Baseline (CI)</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Benchmark</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Query Type</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Apple M4</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Baseline (CI)</th>
</tr>
</thead>
<tbody>
Expand All @@ -98,10 +98,10 @@ export function BenchmarksContent() {
key={b.name}
className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
>
<td className="px-6 py-4 text-white font-medium">{b.name}</td>
<td className="px-6 py-4 text-zinc-400">{b.query}</td>
<td className="px-6 py-4 text-zinc-300 font-mono">{b.m4}</td>
<td className="px-6 py-4 text-zinc-400 font-mono">{b.baseline}</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-white font-medium">{b.name}</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">{b.query}</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-mono">{b.m4}</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">{b.baseline}</td>
</tr>
))}
</tbody>
Expand All @@ -124,52 +124,52 @@ export function BenchmarksContent() {
<caption className="sr-only">Competitor Library Comparison</caption>
<thead>
<tr className="border-b border-white/[0.06]">
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Library</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Language</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Ops/sec</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Memory/op</th>
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Zero-copy</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Library</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Language</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Ops/sec</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Memory/op</th>
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Zero-copy</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-white/[0.04] transition-colors bg-indigo-500/10 border-l-2 border-l-indigo-500">
<td className="px-6 py-4 text-white font-medium">
<td className="px-3 py-3 sm:px-6 sm:py-4 text-white font-medium">
GoSQLX{' '}
<span className="ml-2 inline-block rounded-full bg-indigo-500/20 px-2 py-0.5 text-xs font-medium text-indigo-300">
This Library
</span>
</td>
<td className="px-6 py-4 text-zinc-400">Go</td>
<td className="px-6 py-4 text-zinc-300 font-mono">1.38M+</td>
<td className="px-6 py-4 text-zinc-300">Low</td>
<td className="px-6 py-4 text-accent-green font-medium">
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-mono">1.38M+</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300">Low</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-accent-green font-medium">
<span aria-label="Yes">✓</span>
</td>
</tr>
<tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
<td className="px-6 py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
<td className="px-6 py-4 text-zinc-400">Go</td>
<td className="px-6 py-4 text-zinc-400 font-mono">~380K</td>
<td className="px-6 py-4 text-zinc-400">Higher</td>
<td className="px-6 py-4 text-zinc-500">
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~380K</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Higher</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
<span aria-label="No">✗</span>
</td>
</tr>
<tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
<td className="px-6 py-4 text-zinc-300 font-medium">pg_query_go</td>
<td className="px-6 py-4 text-zinc-400">Go</td>
<td className="px-6 py-4 text-zinc-400 font-mono">~220K</td>
<td className="px-6 py-4 text-zinc-400">Higher (CGo)</td>
<td className="px-6 py-4 text-zinc-500">
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">pg_query_go</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~220K</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Higher (CGo)</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
<span aria-label="No">✗</span>
</td>
</tr>
<tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
<td className="px-6 py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
<td className="px-6 py-4 text-zinc-400">Go</td>
<td className="px-6 py-4 text-zinc-400 font-mono">~290K</td>
<td className="px-6 py-4 text-zinc-400">Medium</td>
<td className="px-6 py-4 text-zinc-500">
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~290K</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Medium</td>
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
<span aria-label="No">✗</span>
</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/home/CodeExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export function CodeExamples() {
</h2>
</FadeIn>
<FadeIn delay={0.1}>
<div className="flex gap-1 mb-4">
<div className="flex flex-wrap gap-1 mb-4">
{tabs.map((tab, i) => (
<button
key={tab.label}
Expand Down
6 changes: 3 additions & 3 deletions website/src/components/home/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export function Hero() {
<GlassCard hover={false} className="p-0 overflow-hidden shadow-2xl shadow-indigo-500/5">
<div className="grid md:grid-cols-2 divide-y md:divide-y-0 divide-x-0 md:divide-x divide-white/[0.06]">
{/* SQL Input side */}
<div className="text-left">
<div className="text-left min-w-0">
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
<div className="flex gap-1.5">
<span className="w-2.5 h-2.5 rounded-full bg-red-500/60" />
Expand All @@ -181,10 +181,10 @@ export function Hero() {
</div>

{/* AST Output side */}
<div className="text-left">
<div className="text-left min-w-0">
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
<span className="text-xs text-zinc-400 font-mono">AST Output</span>
<span className="ml-auto text-[10px] text-emerald-400 font-mono">parsed in &lt;1ms</span>
<span className="ml-auto text-xs text-emerald-400 font-mono">parsed in &lt;1ms</span>
</div>
<pre
tabIndex={0}
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/home/StatsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function StatsBar() {
<GlassCard className="p-6 text-center w-full">
<div className="flex items-baseline justify-center gap-0.5">
{stat.prefix && (
<span className={`text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
<span className={`text-3xl sm:text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
)}
<AnimatedCounter value={stat.value} suffix={stat.suffix} color={stat.color} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/home/VscodeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function VscodeSection() {
return (
<section className="py-20 border-t border-white/[0.06]">
<div className="max-w-6xl mx-auto px-4">
<div className="flex flex-col md:flex-row items-center gap-10">
<div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
{/* Left: Copy */}
<div className="md:w-1/2">
<FadeIn>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export function Navbar() {
{/* Mobile hamburger */}
<button
type="button"
className="lg:hidden p-2 rounded-lg hover:bg-white/[0.04] transition-colors"
className="lg:hidden w-11 h-11 flex items-center justify-center rounded-lg hover:bg-white/[0.04] transition-colors"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu"
aria-expanded={mobileOpen}
Expand Down
14 changes: 7 additions & 7 deletions website/src/components/playground/Playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default function Playground() {
{/* Skeleton panels */}
<div className="flex flex-col lg:flex-row flex-1 min-h-0">
{/* Left: editor skeleton */}
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0 p-4 gap-3">
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-[240px] lg:min-h-0 p-4 gap-3">
<div className="animate-pulse bg-zinc-800 rounded h-3 w-3/4" />
<div className="animate-pulse bg-zinc-800 rounded h-3 w-full" />
<div className="animate-pulse bg-zinc-800 rounded h-3 w-5/6" />
Expand Down Expand Up @@ -206,11 +206,11 @@ export default function Playground() {
return (
<div className="flex flex-col h-full bg-[#09090b]">
{/* Top toolbar */}
<div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50">
<div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50 min-h-[44px]">
<div className="flex items-center gap-3">
<h1 className="sr-only">SQL Playground</h1>
<span className="text-sm font-semibold text-slate-200" aria-hidden="true">SQL Playground</span>
<div className="h-4 w-px bg-slate-700" />
<span className="hidden sm:block text-sm font-semibold text-slate-200" aria-hidden="true">SQL Playground</span>
<div className="hidden sm:block h-4 w-px bg-slate-700" />
<label htmlFor="dialect-select" className="flex items-center gap-2 text-sm text-slate-400">
Dialect:
<select
Expand All @@ -236,7 +236,7 @@ export default function Playground() {
{/* Main content: split panels */}
<div className="flex flex-col lg:flex-row flex-1 min-h-0">
{/* Left panel - SQL Editor */}
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0">
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-[240px] lg:min-h-0">
<div className="px-4 py-2 border-b border-slate-800 bg-slate-900/30">
<span className="text-xs text-slate-400 uppercase tracking-wider font-medium">Input</span>
</div>
Expand All @@ -251,7 +251,7 @@ export default function Playground() {
</div>

{/* Right panel - Tabs + Content */}
<div className="w-full lg:w-1/2 flex flex-col min-h-0">
<div className="w-full lg:w-1/2 flex flex-col min-h-[240px] lg:min-h-0">
{/* Tab bar with animated underline */}
<div className="flex border-b border-slate-800 bg-slate-900/30" role="tablist" aria-label="Output format">
{TABS.map((tab) => (
Expand Down Expand Up @@ -302,7 +302,7 @@ export default function Playground() {
</code>
<button
onClick={handleCopy}
className="text-xs text-slate-400 hover:text-white border border-slate-700 hover:border-slate-500 rounded px-2 py-1 transition-colors flex-shrink-0"
className="text-xs text-slate-400 hover:text-white border border-slate-700 hover:border-slate-500 rounded px-3 py-2 transition-colors flex-shrink-0 min-h-[36px]"
aria-label="Copy install command"
>
{copied ? '✓ Copied' : 'Copy'}
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/ui/AnimatedCounter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function AnimatedCounter({ value, suffix = '', color = 'text-white' }: {
}, [spring]);

return (
<span ref={ref} className={`text-4xl font-bold tabular-nums ${color}`}>
<span ref={ref} className={`text-3xl sm:text-4xl font-bold tabular-nums ${color}`}>
{display}{suffix}
</span>
);
Expand Down
Loading