Skip to content

fix(web): stop horizontal overflow on mobile landing sections #9

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
hmziqrs merged 1 commit into from
Jul 28, 2026
Merged

fix(web): stop horizontal overflow on mobile landing sections #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion web/src/components/landing/architecture-section.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const archLayers = [
<Icon name={layer.icon} size={20} class="shrink-0 text-primary" />
<div class="min-w-0">
<p class="font-display text-sm font-bold tracking-widest uppercase text-foreground">{layer.label}</p>
<p class="mt-0.5 truncate font-mono text-sm text-muted-foreground">{layer.items}</p>
<p class="mt-0.5 sm:truncate font-mono text-sm text-muted-foreground">{layer.items}</p>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions web/src/components/landing/v1/HookTabs.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ mutate_with_callbacks(

<section class="border-t border-border py-20 sm:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="grid items-start gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
<div class="grid grid-cols-1 items-start gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
<div>
<p class="font-mono text-xs tracking-[0.25em] uppercase text-primary">
<span class="text-primary/50">// </span>surface area
Expand All @@ -81,7 +81,7 @@ mutate_with_callbacks(
<div class="relative">
<CornerMarks />
<div class="tabs border border-border bg-card shadow-sm" data-hook-tabs>
<nav role="tablist" aria-label="Hook examples" class="flex border-b border-border">
<nav role="tablist" aria-label="Hook examples" class="flex min-w-0 max-w-full overflow-x-auto border-b border-border">
{HOOK_TABS.map((t, i) => (
<button
type="button"
Expand All @@ -91,7 +91,7 @@ mutate_with_callbacks(
aria-selected={i === 0 ? "true" : "false"}
tabindex={i === 0 ? "0" : "-1"}
data-tab={t.id}
class={`border-r border-border px-4 py-3 font-mono text-xs transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none ${
class={`border-r border-border shrink-0 whitespace-nowrap px-4 py-3 font-mono text-xs transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none ${
i === 0 ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
}`}
>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/landing/v2/CacheDeck.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const rows = INITIAL_ENTRIES.map((entry) => {
</span>
</div>

<div class="grid lg:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
<div class="border-b border-border lg:border-r lg:border-b-0">
<div data-entries>
{rows.map((row) => (
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/landing/v3/AnnotatedFigure.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const figInner = FIG_LINES.map((line, i) => {
Every line, accounted for
</h2>

<div class="mt-12 grid gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
<div class="mt-12 grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
<div class="border border-border bg-card shadow-sm">
<div class="flex items-center justify-between border-b border-border px-4 py-2.5">
<span class="font-mono text-xs text-muted-foreground">src/views/users.rs</span>
Expand Down
Loading