feat: PWA support + mobile-responsive layout + QR code to open Atlas on phone

Made-with: Cursor

components/layout/project-shell.tsx

@@ -129,15 +129,30 @@ export function ProjectShell({
 
   return (
     <>
-      <div style={{ display: "flex", height: "100vh", background: "#f6f4f0", overflow: "hidden" }}>
+      <style>{`
+        @media (max-width: 768px) {
+          .vibn-left-sidebar  { display: none !important; }
+          .vibn-right-panel   { display: none !important; }
+          .vibn-tab-bar       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+          .vibn-tab-bar a     { padding: 10px 14px !important; font-size: 0.75rem !important; }
+          .vibn-project-header { padding: 12px 16px !important; }
+          .vibn-page-content  { padding-bottom: env(safe-area-inset-bottom); }
+        }
+        @media (max-width: 480px) {
+          .vibn-tab-bar a     { padding: 10px 10px !important; }
+        }
+      `}</style>
+      <div style={{ display: "flex", height: "100dvh", background: "#f6f4f0", overflow: "hidden" }}>
         {/* Left sidebar */}
-        <VIBNSidebar workspace={workspace} />
+        <div className="vibn-left-sidebar" style={{ display: "flex" }}>
+          <VIBNSidebar workspace={workspace} />
+        </div>
 
         {/* Main column */}
         <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
 
           {/* Project header */}
-          <div style={{
+          <div className="vibn-project-header" style={{
             padding: "18px 32px",
             borderBottom: "1px solid #e8e4dc",
             display: "flex",
@@ -189,7 +204,7 @@ export function ProjectShell({
           </div>
 
           {/* Tab bar */}
-          <div style={{
+          <div className="vibn-tab-bar" style={{
             padding: "0 32px",
             borderBottom: "1px solid #e8e4dc",
             display: "flex",
@@ -219,13 +234,13 @@ export function ProjectShell({
           </div>
 
           {/* Page content */}
-          <div style={{ flex: 1, overflow: "auto" }}>
+          <div className="vibn-page-content" style={{ flex: 1, overflow: "auto" }}>
             {children}
           </div>
         </div>
 
         {/* Right panel */}
-        <div style={{
+        <div className="vibn-right-panel" style={{
           width: 230,
           borderLeft: "1px solid #e8e4dc",
           background: "#fff",