Skip to content

Commit e9fc34b

Browse files
TeakowaTeakowa
committed
fix(ui): refine mobile responsive layout
1 parent ce388b6 commit e9fc34b

9 files changed

Lines changed: 28 additions & 17 deletions

‎src/app.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
@layer components {
7070
.container-site {
7171
margin-inline: auto;
72+
min-width: 0;
7273
width: 100%;
7374
max-width: 68rem;
7475
padding-left: max(1.25rem, env(safe-area-inset-left));
@@ -84,6 +85,7 @@
8485

8586
.chrome {
8687
position: relative;
88+
isolation: isolate;
8789
background: rgb(16 16 14 / 0.82);
8890
backdrop-filter: blur(20px) saturate(180%);
8991
-webkit-backdrop-filter: blur(20px) saturate(180%);
@@ -101,6 +103,7 @@
101103
font-weight: 590;
102104
line-height: 1.2;
103105
letter-spacing: -0.01em;
106+
touch-action: manipulation;
104107
transition:
105108
background-color 140ms ease,
106109
border-color 140ms ease,
@@ -138,6 +141,10 @@
138141
color: var(--color-ink-500);
139142
}
140143

144+
.scroll-target {
145+
scroll-margin-top: calc(4rem + env(safe-area-inset-top));
146+
}
147+
141148
.terminal pre {
142149
overflow-x: auto;
143150
white-space: pre;

‎src/lib/components/AgentsSection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { agents } from '$lib/site';
33
</script>
44

5-
<section id="agents" class="scroll-mt-16 border-t border-ink-800">
5+
<section id="agents" class="scroll-target border-t border-ink-800">
66
<div class="container-site py-14 sm:py-20 lg:py-24">
77
<div class="max-w-2xl">
88
<h2 class="font-sans font-semibold text-title text-ink-50">{agents.title}</h2>

‎src/lib/components/CompatibilitySection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { compatibility } from '$lib/site';
33
</script>
44

5-
<section id="compatibility" class="scroll-mt-16 border-t border-ink-800">
5+
<section id="compatibility" class="scroll-target border-t border-ink-800">
66
<div class="container-site py-14 sm:py-20 lg:py-24">
77
<div class="max-w-2xl">
88
<h2 class="font-sans font-semibold text-title text-ink-50">{compatibility.title}</h2>

‎src/lib/components/CopyButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
<button
5959
type="button"
60-
class="relative inline-flex touch-manipulation select-none items-center justify-center gap-1.5 rounded-sm font-sans text-xs font-medium tracking-tight transition-all duration-120 active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500 {variant ===
60+
class="relative inline-flex min-h-10 min-w-10 touch-manipulation select-none items-center justify-center gap-1.5 rounded-sm font-sans text-xs font-medium tracking-tight transition-all duration-120 active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500 {variant ===
6161
'primary'
6262
? 'bg-accent-500 px-3 py-1.5 text-ink-950 hover:bg-accent-400'
6363
: variant === 'inline'

‎src/lib/components/EcosystemSection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { ecosystem } from '$lib/site';
33
</script>
44

5-
<section id="ecosystem" class="scroll-mt-16 border-t border-ink-800">
5+
<section id="ecosystem" class="scroll-target border-t border-ink-800">
66
<div class="container-site py-14 sm:py-20 lg:py-24">
77
<div class="max-w-2xl">
88
<h2 class="font-sans font-semibold text-title text-ink-50">{ecosystem.title}</h2>

‎src/lib/components/FeaturesSection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { features } from '$lib/site';
44
</script>
55

6-
<section id="features" class="scroll-mt-16 border-t border-ink-800">
6+
<section id="features" class="scroll-target border-t border-ink-800">
77
<div class="container-site py-14 sm:py-20 lg:py-24">
88
<div class="max-w-2xl">
99
<h2 class="font-sans font-semibold text-title text-ink-50">{features.title}</h2>

‎src/lib/components/Header.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<!-- Mobile adaptive menu toggle (Apple style 2-line animated button) -->
5757
<button
5858
type="button"
59-
class="relative flex h-10 w-10 items-center justify-center rounded-xs text-ink-300 transition-all duration-120 hover:text-ink-50 active:scale-[0.92] md:hidden"
59+
class="relative flex h-11 w-11 touch-manipulation items-center justify-center rounded-xs text-ink-300 transition-all duration-120 hover:text-ink-50 active:scale-[0.92] md:hidden"
6060
aria-expanded={isOpen}
6161
aria-controls="mobile-nav"
6262
aria-label={isOpen ? 'Close navigation menu' : 'Open navigation menu'}
@@ -82,9 +82,12 @@
8282
{#if isOpen}
8383
<div
8484
id="mobile-nav"
85-
class="fixed inset-x-0 bottom-0 top-14 z-40 flex flex-col justify-between border-b border-ink-800 bg-ink-950/95 backdrop-blur-2xl transition-all md:hidden"
85+
class="fixed inset-x-0 bottom-0 top-[calc(3.5rem+env(safe-area-inset-top))] z-40 flex flex-col justify-between border-b border-ink-800 bg-ink-950/95 backdrop-blur-2xl md:hidden"
86+
role="dialog"
87+
aria-modal="true"
88+
aria-label="Mobile navigation"
8689
>
87-
<div class="container-site flex flex-1 flex-col py-6 overflow-y-auto">
90+
<div class="container-site flex min-h-0 flex-1 flex-col overflow-y-auto py-6">
8891
<nav class="flex flex-col divide-y divide-ink-800/60" aria-label="Mobile Primary">
8992
{#each nav as item}
9093
<a

‎src/lib/components/Hero.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<section>
88
<div class="container-site py-12 sm:py-20 lg:py-28">
9-
<div class="grid items-start gap-10 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] lg:gap-16">
9+
<div class="grid min-w-0 items-start gap-12 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] lg:gap-16">
1010
<div>
1111
<h1 class="font-sans font-semibold text-hero text-ink-50">
1212
{site.headline}
@@ -25,16 +25,16 @@
2525
</div>
2626

2727
<!-- Quick install snippet -->
28-
<div class="mt-6 flex max-w-lg items-center justify-between gap-3 rounded-xs border border-ink-800 bg-ink-900/60 px-3.5 py-2.5">
29-
<div class="flex items-center gap-2 overflow-hidden">
28+
<div class="mt-6 flex min-w-0 max-w-lg items-center justify-between gap-3 rounded-xs border border-ink-800 bg-ink-900/60 px-3.5 py-2.5">
29+
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
3030
<span class="select-none font-mono text-xs text-ink-500">$</span>
3131
<code class="truncate font-mono text-xs text-ink-200">{hero.quickInstall}</code>
3232
</div>
3333
<CopyButton text={hero.quickInstall} label="Copy" variant="inline" />
3434
</div>
3535
</div>
3636

37-
<div class="lg:pt-2">
37+
<div class="min-w-0 lg:pt-2">
3838
<Terminal />
3939
</div>
4040
</div>

‎src/lib/components/InstallSection.svelte‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
);
99
</script>
1010

11-
<section id="install" class="scroll-mt-16 border-t border-ink-800">
11+
<section id="install" class="scroll-target border-t border-ink-800">
1212
<div class="container-site py-14 sm:py-20 lg:py-24">
1313
<div class="max-w-2xl">
1414
<h2 class="font-sans font-semibold text-title text-ink-50">{install.title}</h2>
@@ -20,7 +20,7 @@
2020
<!-- Segmented platform tabs -->
2121
<div class="mt-8">
2222
<div
23-
class="no-scrollbar flex max-w-full items-center gap-1 overflow-x-auto rounded-sm border border-ink-800 bg-ink-950 p-1 sm:inline-flex sm:flex-wrap"
23+
class="no-scrollbar flex max-w-full snap-x snap-mandatory items-center gap-1 overflow-x-auto rounded-sm border border-ink-800 bg-ink-950 p-1 sm:inline-flex sm:flex-wrap"
2424
role="tablist"
2525
aria-label="Target platform"
2626
>
@@ -29,10 +29,11 @@
2929
type="button"
3030
role="tab"
3131
aria-selected={activeTargetId === target.id}
32-
class="flex min-h-9 shrink-0 touch-manipulation select-none items-center gap-2 rounded-xs px-3.5 py-1.5 font-sans text-xs font-medium tracking-tight transition-all duration-120 active:scale-[0.96] {activeTargetId ===
32+
class="flex min-h-10 shrink-0 snap-start touch-manipulation select-none items-center gap-2 rounded-xs px-3.5 py-1.5 font-sans text-xs font-medium tracking-tight transition-all duration-120 active:scale-[0.96] {activeTargetId ===
3333
target.id
3434
? 'bg-ink-800 text-ink-50 shadow-xs'
3535
: 'text-ink-400 hover:bg-ink-900 hover:text-ink-200'}"
36+
aria-controls="install-panel"
3637
onclick={() => (activeTargetId = target.id)}
3738
>
3839
<span>{target.label}</span>
@@ -49,7 +50,7 @@
4950
</div>
5051

5152
<!-- Active platform install card -->
52-
<div class="mt-4 max-w-3xl rounded-xs border border-ink-800 bg-ink-900/40 overflow-hidden">
53+
<div id="install-panel" class="mt-4 max-w-3xl min-w-0 overflow-hidden rounded-xs border border-ink-800 bg-ink-900/40" role="tabpanel" tabindex="0">
5354
<!-- Header / Method info -->
5455
<div
5556
class="flex flex-wrap items-center justify-between gap-3 border-b border-ink-800 bg-ink-900/80 px-4 py-2.5 sm:px-5"
@@ -89,7 +90,7 @@
8990
</div>
9091

9192
<!-- Fallback release archives note -->
92-
<div class="mt-6 flex max-w-3xl items-center gap-2 text-xs text-ink-400">
93+
<div class="mt-6 flex max-w-3xl items-start gap-2 text-xs text-ink-400">
9394
<svg
9495
class="h-4 w-4 shrink-0 text-ink-500"
9596
viewBox="0 0 16 16"

0 commit comments

Comments
 (0)