Fix mobile website overflow

This commit is contained in:
Advait Paliwal
2026-03-25 14:42:08 -07:00
parent bc9fa2be86
commit ca74226c83
3 changed files with 15 additions and 13 deletions

View File

@@ -39,11 +39,11 @@ const {
</head> </head>
<body class="flex min-h-screen flex-col bg-background text-foreground antialiased"> <body class="flex min-h-screen flex-col bg-background text-foreground antialiased">
<nav class="sticky top-0 z-50 bg-background"> <nav class="sticky top-0 z-50 bg-background">
<div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-6"> <div class="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
<a href="/" class="flex items-center gap-2"> <a href="/" class="flex items-center gap-2">
<span class="font-['VT323'] text-2xl text-primary">feynman</span> <span class="font-['VT323'] text-2xl text-primary">feynman</span>
</a> </a>
<div class="flex items-center gap-6"> <div class="flex items-center gap-4 sm:gap-6">
<a <a
href="/docs/getting-started/installation" href="/docs/getting-started/installation"
class:list={[ class:list={[
@@ -98,7 +98,7 @@ const {
</main> </main>
<footer> <footer>
<div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 py-8 sm:flex-row"> <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-4 py-8 sm:flex-row sm:px-6">
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
&copy; {new Date().getFullYear()} Companion, Inc. &copy; {new Date().getFullYear()} Companion, Inc.
</p> </p>

View File

@@ -64,12 +64,12 @@ const installCommands = [
</div> </div>
<div class="flex w-full max-w-3xl flex-col items-center gap-4"> <div class="flex w-full max-w-3xl flex-col items-center gap-4">
<div class="flex w-full flex-col"> <div class="flex w-full max-w-full flex-col">
<div class="flex self-start"> <div class="flex max-w-full self-start overflow-x-auto">
{installCommands.map((entry, i) => ( {installCommands.map((entry, i) => (
<button <button
class:list={[ class:list={[
"install-toggle px-4 py-2 text-sm font-medium transition-colors cursor-pointer", "install-toggle shrink-0 px-4 py-2 text-sm font-medium transition-colors cursor-pointer",
i === 0 ? "rounded-tl-lg" : "", i === 0 ? "rounded-tl-lg" : "",
i === installCommands.length - 1 ? "rounded-tr-lg" : "", i === installCommands.length - 1 ? "rounded-tr-lg" : "",
entry.label === installCommands[0].label entry.label === installCommands[0].label
@@ -85,17 +85,17 @@ const installCommands = [
</div> </div>
<button <button
id="install-cmd" id="install-cmd"
class="group flex w-full items-center justify-between gap-3 rounded-b-lg rounded-tr-lg bg-muted px-4 py-3 text-left font-mono text-sm transition-colors hover:bg-muted/80 cursor-pointer" class="group flex w-full min-w-0 max-w-full items-start justify-between gap-3 rounded-b-lg rounded-tr-lg bg-muted px-4 py-3 text-left font-mono text-xs transition-colors hover:bg-muted/80 cursor-pointer sm:items-center sm:text-sm"
data-command={installCommands[0].command} data-command={installCommands[0].command}
aria-label="Copy install command" aria-label="Copy install command"
> >
<span id="install-command" class="min-w-0 truncate">{installCommands[0].command}</span> <span id="install-command" class="flex-1 min-w-0 break-all whitespace-normal leading-relaxed sm:overflow-hidden sm:text-ellipsis sm:whitespace-nowrap">{installCommands[0].command}</span>
<svg id="install-copy" class="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> <svg id="install-copy" class="mt-0.5 size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground sm:mt-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<svg id="install-check" class="hidden size-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> <svg id="install-check" class="mt-0.5 hidden size-4 shrink-0 text-primary sm:mt-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
</button> </button>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex flex-wrap items-center justify-center gap-3">
<a href="/docs/getting-started/installation"> <a href="/docs/getting-started/installation">
<Button client:load size="lg">Get Started</Button> <Button client:load size="lg">Get Started</Button>
</a> </a>
@@ -221,7 +221,7 @@ const installCommands = [
<p class="text-muted-foreground"> <p class="text-muted-foreground">
Built on <a href="https://github.com/badlogic/pi-mono" class="text-primary hover:underline">Pi</a> and <a href="https://www.alphaxiv.org/" class="text-primary hover:underline">alphaXiv</a>. Capabilities ship as Pi skills and every output stays source-grounded. Built on <a href="https://github.com/badlogic/pi-mono" class="text-primary hover:underline">Pi</a> and <a href="https://www.alphaxiv.org/" class="text-primary hover:underline">alphaXiv</a>. Capabilities ship as Pi skills and every output stays source-grounded.
</p> </p>
<div class="flex items-center gap-3"> <div class="flex flex-wrap items-center justify-center gap-3">
<a href="/docs/getting-started/installation"> <a href="/docs/getting-started/installation">
<Button client:load size="lg">Get Started</Button> <Button client:load size="lg">Get Started</Button>
</a> </a>

View File

@@ -123,10 +123,12 @@
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
overflow-x: clip;
} }
html { html {
@apply font-sans; @apply font-sans;
scroll-behavior: smooth; scroll-behavior: smooth;
overflow-x: clip;
} }
} }
@@ -366,4 +368,4 @@
::selection { ::selection {
background: var(--primary); background: var(--primary);
color: var(--primary-foreground); color: var(--primary-foreground);
} }