fix: stop mobile overflow, clarify copy button

- Add min-w-0 to the hero grid columns and the install
  methods grid so items can shrink below their widest child
  (the long install URL) instead of widening the page. Home
  page now fits 375px with zero horizontal scroll.
- Restyle the copy control as a distinct bordered chip with
  an icon, clearly separated from the command text so it
  reads as a button rather than part of the command.

Author: nixrajput

web/app/page.tsx

@@ -78,7 +78,10 @@ export default function Home() {
       <section className="relative overflow-hidden">
         <div className="flowgrid pointer-events-none absolute inset-0 -z-10" aria-hidden />
         <div className="mx-auto grid max-w-6xl items-center gap-10 px-6 py-20 lg:grid-cols-2 lg:py-28">
-          <div>
+          {/* min-w-0: a grid item defaults to min-width:auto and won't shrink
+              below its widest child (the long install URL), which would push the
+              whole page wide on mobile. */}
+          <div className="min-w-0">
             <p className="eyebrow rise mb-5">backup · restore · sync · cdc</p>
             <h1
               className="rise text-[2.6rem] leading-[1.05] text-balance sm:text-6xl"
@@ -119,7 +122,7 @@ export default function Home() {
               </ExtLink>
             </div>
           </div>
-          <div className="rise" style={{ "--rise-delay": "400ms" } as React.CSSProperties}>
+          <div className="rise min-w-0" style={{ "--rise-delay": "400ms" } as React.CSSProperties}>
             <Terminal />
           </div>
         </div>
@@ -201,13 +204,13 @@ export default function Home() {
             <InstallCommand command={INSTALL_CMD} />
           </div>
           <div className="grid gap-6 sm:grid-cols-2">
-            <div>
+            <div className="min-w-0">
               <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Homebrew
               </p>
               <InstallCommand command="brew install nixrajput/siphon/siphon" />
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Scoop (Windows)
               </p>

web/components/InstallCommand.tsx

@@ -37,10 +37,10 @@ export function InstallCommand({ command }: { command: string }) {
     <button
       type="button"
       onClick={copy}
-      className="group flex w-full items-center gap-3 rounded-lg border border-(--line) bg-(--ink-2) px-4 py-3 text-left font-mono text-sm transition-colors hover:border-(--amber)"
+      className="group flex w-full items-center gap-2 rounded-lg border border-(--line) bg-(--ink-2) py-2 pr-2 pl-4 text-left font-mono text-sm transition-colors hover:border-(--amber)"
       aria-label={`Copy install command: ${command}`}
     >
-      <span aria-hidden className="text-(--amber) select-none">
+      <span aria-hidden className="shrink-0 text-(--amber) select-none">
         $
       </span>
       {/* min-w-0 lets this flex item shrink below the command's intrinsic
@@ -49,11 +49,17 @@ export function InstallCommand({ command }: { command: string }) {
       <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-(--paper)">
         {command}
       </code>
+      {/* The Copy action reads as a distinct chip — its own border + background,
+          divided from the command — so it's clearly a button, not part of the
+          text. shrink-0 keeps it from being squeezed by a long command. */}
       <span
-        className={`text-xs tracking-widest uppercase select-none ${
-          copied ? "text-(--flow)" : "text-(--muted) group-hover:text-(--amber)"
+        className={`flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs tracking-wide uppercase transition-colors select-none ${
+          copied
+            ? "border-(--flow) text-(--flow)"
+            : "border-(--line) bg-(--ink) text-(--muted) group-hover:border-(--amber) group-hover:text-(--amber)"
         }`}
       >
+        <span aria-hidden>{copied ? "✓" : "⧉"}</span>
         {copied ? "Copied" : "Copy"}
       </span>
     </button>