fix(web): prevent horizontal overflow on mobile

Grid/flex items default to min-width:auto, so the code blocks forced the hero
and dashboard/profile grids wider than the viewport, clipping content. Add
min-w-0 to the grid items and CodeBlock, plus overflow-x-hidden as a safety net.

Author: MrOplus

apps/web/src/components/CodeBlock.tsx

@@ -23,7 +23,7 @@ export function CodeBlock({ code, children, label }: CodeBlockProps) {
   };
 
   return (
-    <div className="group relative overflow-hidden rounded-2xl border border-ink-700 bg-ink-950/80">
+    <div className="group relative min-w-0 max-w-full overflow-hidden rounded-2xl border border-ink-700 bg-ink-950/80">
       <div className="flex items-center justify-between border-b border-ink-700/70 px-4 py-2.5">
         <div className="flex items-center gap-1.5">
           <span className="h-2.5 w-2.5 rounded-full bg-rose-400/70" />

apps/web/src/index.css

@@ -12,7 +12,7 @@
   }
 
   body {
-    @apply bg-ink-950 text-slate-200 font-sans antialiased;
+    @apply overflow-x-hidden bg-ink-950 text-slate-200 font-sans antialiased;
     background-image:
       radial-gradient(60rem 60rem at 80% -10%, rgba(45, 212, 191, 0.08), transparent 60%),
       radial-gradient(50rem 50rem at -10% 20%, rgba(52, 211, 153, 0.06), transparent 55%);

apps/web/src/pages/Dashboard.tsx

@@ -41,7 +41,7 @@ export function Dashboard() {
       </header>
 
       <section className="mt-8 grid gap-6 lg:grid-cols-[1fr_360px]">
-        <div className="space-y-6">
+        <div className="min-w-0 space-y-6">
           <GenerateKey onAdded={(k) => setKeys((prev) => [...prev, k])} />
           <AddKeyForm onAdded={(k) => setKeys((prev) => [...prev, k])} />
 
@@ -79,7 +79,7 @@ export function Dashboard() {
           </div>
         </div>
 
-        <aside className="space-y-4">
+        <aside className="min-w-0 space-y-4">
           <div className="card p-6">
             <h2 className="font-semibold text-white">Your public URL</h2>
             <p className="mt-1.5 text-sm text-slate-400">Anyone can resolve your keys from here.</p>

apps/web/src/pages/Landing.tsx

@@ -36,7 +36,7 @@ function Hero() {
   return (
     <section className="relative overflow-hidden">
       <div className="container-page grid items-center gap-12 pt-16 pb-12 lg:grid-cols-2 lg:pt-24">
-        <div className="animate-fade-up">
+        <div className="min-w-0 animate-fade-up">
           <span className="inline-flex items-center gap-2 rounded-full border border-ink-700 bg-ink-900/70 px-3 py-1 text-xs font-medium text-accent-400">
             <span className="relative flex h-2 w-2">
               <span className="absolute inline-flex h-full w-full animate-pulse-ring rounded-full bg-accent-400" />
@@ -76,7 +76,7 @@ function Hero() {
           </p>
         </div>
 
-        <div className="animate-fade-up [animation-delay:120ms]">
+        <div className="min-w-0 animate-fade-up [animation-delay:120ms]">
           <CodeBlock
             label="your terminal"
             code={`curl ${PUBLIC_HOST}/${SAMPLE_HANDLE} >> ~/.ssh/authorized_keys`}

apps/web/src/pages/Profile.tsx

@@ -80,7 +80,7 @@ export function Profile() {
       </header>
 
       <div className="mt-8 grid gap-6 lg:grid-cols-[1fr_380px]">
-        <div className="card">
+        <div className="card min-w-0">
           <div className="flex items-center justify-between border-b border-ink-700/70 px-6 py-4">
             <h2 className="font-semibold text-white">Public keys</h2>
             <span className="rounded-full bg-ink-800 px-2.5 py-0.5 text-xs text-slate-400">
@@ -113,7 +113,7 @@ export function Profile() {
           )}
         </div>
 
-        <aside className="space-y-4">
+        <aside className="min-w-0 space-y-4">
           <CodeBlock label="add to a server" code={`curl -fsSL ${PUBLIC_HOST}/${profile.handle} >> ~/.ssh/authorized_keys`}>
             <span className="text-accent-400">curl</span> -fsSL {PUBLIC_HOST}/{profile.handle}{' '}
             <span className="text-slate-300">&gt;&gt;</span> ~/.ssh/authorized_keys