Skip to content

Commit ba4e21d

Browse files
ajitpratap0ajitpratap0
authored
fix(website): mobile responsiveness improvements (#441)
1 parent 5d54c3f commit ba4e21d

File tree

8 files changed

+48
-48
lines changed

8 files changed

+48
-48
lines changed

‎website/src/app/benchmarks/BenchmarksContent.tsx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@ export function BenchmarksContent() {
8686
<caption className="sr-only">GoSQLX Parse Benchmarks</caption>
8787
<thead>
8888
<tr className="border-b border-white/[0.06]">
89-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Benchmark</th>
90-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Query Type</th>
91-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Apple M4</th>
92-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Baseline (CI)</th>
89+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Benchmark</th>
90+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Query Type</th>
91+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Apple M4</th>
92+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Baseline (CI)</th>
9393
</tr>
9494
</thead>
9595
<tbody>
@@ -98,10 +98,10 @@ export function BenchmarksContent() {
9898
key={b.name}
9999
className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
100100
>
101-
<td className="px-6 py-4 text-white font-medium">{b.name}</td>
102-
<td className="px-6 py-4 text-zinc-400">{b.query}</td>
103-
<td className="px-6 py-4 text-zinc-300 font-mono">{b.m4}</td>
104-
<td className="px-6 py-4 text-zinc-400 font-mono">{b.baseline}</td>
101+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-white font-medium">{b.name}</td>
102+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">{b.query}</td>
103+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-mono">{b.m4}</td>
104+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">{b.baseline}</td>
105105
</tr>
106106
))}
107107
</tbody>
@@ -124,52 +124,52 @@ export function BenchmarksContent() {
124124
<caption className="sr-only">Competitor Library Comparison</caption>
125125
<thead>
126126
<tr className="border-b border-white/[0.06]">
127-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Library</th>
128-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Language</th>
129-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Ops/sec</th>
130-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Memory/op</th>
131-
<th scope="col" className="px-6 py-4 font-medium text-zinc-400">Zero-copy</th>
127+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Library</th>
128+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Language</th>
129+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Ops/sec</th>
130+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Memory/op</th>
131+
<th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Zero-copy</th>
132132
</tr>
133133
</thead>
134134
<tbody>
135135
<tr className="border-b border-white/[0.04] transition-colors bg-indigo-500/10 border-l-2 border-l-indigo-500">
136-
<td className="px-6 py-4 text-white font-medium">
136+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-white font-medium">
137137
GoSQLX{' '}
138138
<span className="ml-2 inline-block rounded-full bg-indigo-500/20 px-2 py-0.5 text-xs font-medium text-indigo-300">
139139
This Library
140140
</span>
141141
</td>
142-
<td className="px-6 py-4 text-zinc-400">Go</td>
143-
<td className="px-6 py-4 text-zinc-300 font-mono">1.38M+</td>
144-
<td className="px-6 py-4 text-zinc-300">Low</td>
145-
<td className="px-6 py-4 text-accent-green font-medium">
142+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
143+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-mono">1.38M+</td>
144+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300">Low</td>
145+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-accent-green font-medium">
146146
<span aria-label="Yes">✓</span>
147147
</td>
148148
</tr>
149149
<tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
150-
<td className="px-6 py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
151-
<td className="px-6 py-4 text-zinc-400">Go</td>
152-
<td className="px-6 py-4 text-zinc-400 font-mono">~380K</td>
153-
<td className="px-6 py-4 text-zinc-400">Higher</td>
154-
<td className="px-6 py-4 text-zinc-500">
150+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
151+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
152+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~380K</td>
153+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Higher</td>
154+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
155155
<span aria-label="No">✗</span>
156156
</td>
157157
</tr>
158158
<tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
159-
<td className="px-6 py-4 text-zinc-300 font-medium">pg_query_go</td>
160-
<td className="px-6 py-4 text-zinc-400">Go</td>
161-
<td className="px-6 py-4 text-zinc-400 font-mono">~220K</td>
162-
<td className="px-6 py-4 text-zinc-400">Higher (CGo)</td>
163-
<td className="px-6 py-4 text-zinc-500">
159+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">pg_query_go</td>
160+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
161+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~220K</td>
162+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Higher (CGo)</td>
163+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
164164
<span aria-label="No">✗</span>
165165
</td>
166166
</tr>
167167
<tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
168-
<td className="px-6 py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
169-
<td className="px-6 py-4 text-zinc-400">Go</td>
170-
<td className="px-6 py-4 text-zinc-400 font-mono">~290K</td>
171-
<td className="px-6 py-4 text-zinc-400">Medium</td>
172-
<td className="px-6 py-4 text-zinc-500">
168+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
169+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
170+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~290K</td>
171+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Medium</td>
172+
<td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
173173
<span aria-label="No">✗</span>
174174
</td>
175175
</tr>

‎website/src/components/home/CodeExamples.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export function CodeExamples() {
109109
</h2>
110110
</FadeIn>
111111
<FadeIn delay={0.1}>
112-
<div className="flex gap-1 mb-4">
112+
<div className="flex flex-wrap gap-1 mb-4">
113113
{tabs.map((tab, i) => (
114114
<button
115115
key={tab.label}

‎website/src/components/home/Hero.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export function Hero() {
158158
<GlassCard hover={false} className="p-0 overflow-hidden shadow-2xl shadow-indigo-500/5">
159159
<div className="grid md:grid-cols-2 divide-y md:divide-y-0 divide-x-0 md:divide-x divide-white/[0.06]">
160160
{/* SQL Input side */}
161-
<div className="text-left">
161+
<div className="text-left min-w-0">
162162
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
163163
<div className="flex gap-1.5">
164164
<span className="w-2.5 h-2.5 rounded-full bg-red-500/60" />
@@ -181,10 +181,10 @@ export function Hero() {
181181
</div>
182182

183183
{/* AST Output side */}
184-
<div className="text-left">
184+
<div className="text-left min-w-0">
185185
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
186186
<span className="text-xs text-zinc-400 font-mono">AST Output</span>
187-
<span className="ml-auto text-[10px] text-emerald-400 font-mono">parsed in &lt;1ms</span>
187+
<span className="ml-auto text-xs text-emerald-400 font-mono">parsed in &lt;1ms</span>
188188
</div>
189189
<pre
190190
tabIndex={0}

‎website/src/components/home/StatsBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function StatsBar() {
2121
<GlassCard className="p-6 text-center w-full">
2222
<div className="flex items-baseline justify-center gap-0.5">
2323
{stat.prefix && (
24-
<span className={`text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
24+
<span className={`text-3xl sm:text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
2525
)}
2626
<AnimatedCounter value={stat.value} suffix={stat.suffix} color={stat.color} />
2727
</div>

‎website/src/components/home/VscodeSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function VscodeSection() {
88
return (
99
<section className="py-20 border-t border-white/[0.06]">
1010
<div className="max-w-6xl mx-auto px-4">
11-
<div className="flex flex-col md:flex-row items-center gap-10">
11+
<div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
1212
{/* Left: Copy */}
1313
<div className="md:w-1/2">
1414
<FadeIn>

‎website/src/components/layout/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export function Navbar() {
104104
{/* Mobile hamburger */}
105105
<button
106106
type="button"
107-
className="lg:hidden p-2 rounded-lg hover:bg-white/[0.04] transition-colors"
107+
className="lg:hidden w-11 h-11 flex items-center justify-center rounded-lg hover:bg-white/[0.04] transition-colors"
108108
onClick={() => setMobileOpen(!mobileOpen)}
109109
aria-label="Toggle menu"
110110
aria-expanded={mobileOpen}

‎website/src/components/playground/Playground.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export default function Playground() {
135135
{/* Skeleton panels */}
136136
<div className="flex flex-col lg:flex-row flex-1 min-h-0">
137137
{/* Left: editor skeleton */}
138-
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0 p-4 gap-3">
138+
<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">
139139
<div className="animate-pulse bg-zinc-800 rounded h-3 w-3/4" />
140140
<div className="animate-pulse bg-zinc-800 rounded h-3 w-full" />
141141
<div className="animate-pulse bg-zinc-800 rounded h-3 w-5/6" />
@@ -206,11 +206,11 @@ export default function Playground() {
206206
return (
207207
<div className="flex flex-col h-full bg-[#09090b]">
208208
{/* Top toolbar */}
209-
<div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50">
209+
<div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50 min-h-[44px]">
210210
<div className="flex items-center gap-3">
211211
<h1 className="sr-only">SQL Playground</h1>
212-
<span className="text-sm font-semibold text-slate-200" aria-hidden="true">SQL Playground</span>
213-
<div className="h-4 w-px bg-slate-700" />
212+
<span className="hidden sm:block text-sm font-semibold text-slate-200" aria-hidden="true">SQL Playground</span>
213+
<div className="hidden sm:block h-4 w-px bg-slate-700" />
214214
<label htmlFor="dialect-select" className="flex items-center gap-2 text-sm text-slate-400">
215215
Dialect:
216216
<select
@@ -236,7 +236,7 @@ export default function Playground() {
236236
{/* Main content: split panels */}
237237
<div className="flex flex-col lg:flex-row flex-1 min-h-0">
238238
{/* Left panel - SQL Editor */}
239-
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0">
239+
<div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-[240px] lg:min-h-0">
240240
<div className="px-4 py-2 border-b border-slate-800 bg-slate-900/30">
241241
<span className="text-xs text-slate-400 uppercase tracking-wider font-medium">Input</span>
242242
</div>
@@ -251,7 +251,7 @@ export default function Playground() {
251251
</div>
252252

253253
{/* Right panel - Tabs + Content */}
254-
<div className="w-full lg:w-1/2 flex flex-col min-h-0">
254+
<div className="w-full lg:w-1/2 flex flex-col min-h-[240px] lg:min-h-0">
255255
{/* Tab bar with animated underline */}
256256
<div className="flex border-b border-slate-800 bg-slate-900/30" role="tablist" aria-label="Output format">
257257
{TABS.map((tab) => (
@@ -302,7 +302,7 @@ export default function Playground() {
302302
</code>
303303
<button
304304
onClick={handleCopy}
305-
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"
305+
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]"
306306
aria-label="Copy install command"
307307
>
308308
{copied ? '✓ Copied' : 'Copy'}

‎website/src/components/ui/AnimatedCounter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function AnimatedCounter({ value, suffix = '', color = 'text-white' }: {
2929
}, [spring]);
3030

3131
return (
32-
<span ref={ref} className={`text-4xl font-bold tabular-nums ${color}`}>
32+
<span ref={ref} className={`text-3xl sm:text-4xl font-bold tabular-nums ${color}`}>
3333
{display}{suffix}
3434
</span>
3535
);

0 commit comments

Comments
 (0)