Skip to content

Commit 7ac7245

Browse files
fi3eworkfi3ework
committed
fix(website): improve responsive layout and UI accessibility
1 parent 3d44337 commit 7ac7245

5 files changed

Lines changed: 35 additions & 25 deletions

File tree

‎website/src/App.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export default function App() {
186186
const schedule = useMemo(() => buildUpdateSchedule(now), [now]);
187187

188188
return (
189-
<div className="min-h-screen bg-transparent px-4 py-12 text-foreground sm:px-8">
189+
<div className="min-h-screen overflow-x-hidden bg-transparent px-4 py-12 text-foreground sm:px-8">
190190
<div
191191
id="main-content"
192192
tabIndex={-1}
@@ -205,21 +205,21 @@ export default function App() {
205205
</Badge>
206206
) : null}
207207
</div>
208-
<div className="flex items-center gap-3">
209-
<span className="relative inline-flex h-12 w-12 items-center justify-center">
208+
<div className="flex items-center gap-3 sm:gap-4">
209+
<span className="relative inline-flex h-10 w-10 shrink-0 items-center justify-center sm:h-12 sm:w-12">
210210
<span
211-
className="absolute left-1/2 top-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cyan-400/35 blur-2xl"
211+
className="absolute left-1/2 top-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cyan-400/35 blur-xl sm:h-16 sm:w-16 sm:blur-2xl"
212212
aria-hidden
213213
/>
214214
<img
215215
src="https://assets.rspack.rs/rspack/rspack-logo.svg"
216216
alt="Rspack logo"
217217
width="40"
218218
height="40"
219-
className="relative h-10 w-10 drop-shadow-[0_4px_18px_rgba(34,211,238,0.75)]"
219+
className="relative h-8 w-8 drop-shadow-[0_4px_18px_rgba(34,211,238,0.75)] sm:h-10 sm:w-10"
220220
/>
221221
</span>
222-
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
222+
<h1 className="text-2xl font-semibold tracking-tight sm:text-4xl">
223223
Rstack Ecosystem CI Dashboard
224224
</h1>
225225
</div>
@@ -296,7 +296,7 @@ export default function App() {
296296
</div>
297297
</header>
298298

299-
<section className="grid gap-4 sm:grid-cols-2">
299+
<section className="grid gap-4 lg:grid-cols-2">
300300
<StackStatusCard
301301
statuses={stackStatusSummary}
302302
activeStack={selectedStack}
@@ -418,15 +418,15 @@ function StackStatusCard({
418418
}: StackStatusCardProps) {
419419
return (
420420
<div className="glass-panel rounded-2xl border border-border/60 px-6 py-5 shadow-[0_10px_24px_-20px_rgba(0,0,0,0.65)]">
421-
<div className="flex items-center justify-between">
422-
<p className="text-xs uppercase tracking-[0.4em] text-muted-foreground/70">
421+
<div className="flex items-center justify-between gap-2">
422+
<p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/70 sm:text-xs sm:tracking-[0.4em]">
423423
Stack Health
424424
</p>
425-
<span className="text-[11px] uppercase tracking-[0.25em] text-muted-foreground/55">
425+
<span className="hidden text-[11px] uppercase tracking-[0.25em] text-muted-foreground/55 xs:inline">
426426
Latest run
427427
</span>
428428
</div>
429-
<div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3">
429+
<div className="mt-5 grid grid-cols-1 gap-3 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3">
430430
{statuses.map((stack) => {
431431
const isActive = stack.id === activeStack;
432432
const baseClasses =

‎website/src/components/timeline.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -127,17 +127,20 @@ export function Timeline({
127127

128128
return (
129129
<div className="grid gap-6">
130-
<div className="flex flex-wrap items-center gap-4">
130+
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
131131
{hasStackControl ? (
132-
<div className="flex items-center gap-2">
133-
<span className="text-sm font-medium text-muted-foreground">
132+
<div className="flex flex-1 min-w-0 items-center gap-2">
133+
<span className="shrink-0 text-sm font-medium text-muted-foreground">
134134
Stack:
135135
</span>
136136
<Select
137137
value={externalSelectedStack}
138138
onValueChange={(value) => onStackChange?.(value)}
139139
>
140-
<SelectTrigger className="w-52" aria-label="Select stack">
140+
<SelectTrigger
141+
className="min-w-0 flex-1 max-w-[200px]"
142+
aria-label="Select stack"
143+
>
141144
<div className="flex flex-1 items-center justify-between gap-2">
142145
<span className="truncate font-medium text-foreground/90">
143146
{selectedStackMeta?.label ?? 'Select stack'}
@@ -172,15 +175,18 @@ export function Timeline({
172175
</div>
173176
) : null}
174177

175-
<div className="flex items-center gap-3">
178+
<div className="flex flex-1 min-w-0 items-center gap-3">
176179
<label
177180
htmlFor="suite-filter"
178-
className="text-sm font-medium text-muted-foreground"
181+
className="shrink-0 text-sm font-medium text-muted-foreground"
179182
>
180-
Filter by suite:
183+
Filter:
181184
</label>
182185
<Select value={selectedSuite} onValueChange={setSelectedSuite}>
183-
<SelectTrigger id="suite-filter" className="w-64">
186+
<SelectTrigger
187+
id="suite-filter"
188+
className="min-w-0 flex-1 max-w-xs"
189+
>
184190
<SelectValue placeholder="Select suite…">
185191
{selectedSuite === 'all' ? 'All suites' : selectedSuite}
186192
</SelectValue>
@@ -256,7 +262,7 @@ export function Timeline({
256262
return (
257263
<div
258264
key={entry.commitSha}
259-
className="grid grid-cols-[26px,1fr] items-stretch gap-5 sm:grid-cols-[30px,1fr]"
265+
className="grid min-w-0 grid-cols-[26px,1fr] items-stretch gap-3 sm:grid-cols-[30px,1fr] sm:gap-5"
260266
>
261267
<div className="flex h-full flex-col items-center">
262268
<span
@@ -371,7 +377,7 @@ export function Timeline({
371377
<div className="flex flex-none items-center gap-2 sm:flex-col sm:items-end">
372378
<Badge
373379
variant={commitStyles.badge}
374-
className="px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
380+
className="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide sm:px-2.5"
375381
>
376382
{commitStyles.label}
377383
</Badge>
@@ -388,7 +394,7 @@ export function Timeline({
388394
</CardHeader>
389395

390396
<CardContent className="p-2.5 sm:p-3">
391-
<div className="grid gap-2 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
397+
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
392398
{[...entry.suites]
393399
.sort((a, b) => a.name.localeCompare(b.name))
394400
.map((suite) => {
@@ -407,11 +413,11 @@ export function Timeline({
407413
target="_blank"
408414
rel="noreferrer"
409415
className={cn(
410-
'flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-xs font-medium transition-[background-color,border-color] hover:border-border hover:bg-black/15',
416+
'flex min-w-0 w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-xs font-medium transition-[background-color,border-color] hover:border-border hover:bg-black/15',
411417
suiteStyles.container,
412418
)}
413419
>
414-
<span className="text-foreground/90">
420+
<span className="truncate text-foreground/90">
415421
{suite.name}
416422
</span>
417423
<span className="flex items-center gap-2 text-muted-foreground/80">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
1010
<div
1111
ref={ref}
1212
className={cn(
13-
'glass-panel rounded-2xl border border-border/40 shadow-[0_10px_24px_-20px_rgba(0,0,0,0.65)] transition hover:border-border/60',
13+
'glass-panel overflow-hidden rounded-2xl border border-border/40 shadow-[0_10px_24px_-20px_rgba(0,0,0,0.65)] transition hover:border-border/60',
1414
className,
1515
)}
1616
{...props}

‎website/src/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ body {
1414
font-family: "JetBrains Mono", "Geist Mono", "SF Mono", "Consolas", monospace;
1515
color: #f5f5f5;
1616
touch-action: manipulation;
17+
overflow-x: hidden;
1718
}
1819

1920
@media (prefers-reduced-motion: reduce) {

‎website/tailwind.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const config: Config = {
55
content: ['./index.html', './src/**/*.{ts,tsx}'],
66
theme: {
77
extend: {
8+
screens: {
9+
xs: '420px',
10+
},
811
colors: {
912
border: 'rgba(255,255,255,0.08)',
1013
input: 'rgba(255,255,255,0.04)',

0 commit comments

Comments
 (0)