Fix mobile website overflow
This commit is contained in:
@@ -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">
|
||||||
© {new Date().getFullYear()} Companion, Inc.
|
© {new Date().getFullYear()} Companion, Inc.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user