ignore: mobile styles

cloud/app/src/routes/workspace.css

@@ -1,11 +1,6 @@
 [data-page="workspace"] {
   line-height: 1;
 
-  @media (max-width: 30rem) {
-    padding: var(--space-4);
-    gap: var(--space-5);
-  }
-
   /* Workspace Header */
   [data-component="workspace-header"] {
     position: sticky;
@@ -19,9 +14,7 @@
     background-color: var(--color-bg);
 
     @media (max-width: 30rem) {
-      padding: 0 var(--space-4);
+      padding: var(--space-4) var(--space-4);
-      margin: calc(-1 * var(--space-4));
-      margin-bottom: var(--space-5);
     }
   }
 
@@ -48,10 +41,16 @@
     align-items: center;
     font-size: var(--font-size-sm);
 
-    span {
+    [data-slot="user"] {
       color: var(--color-text-muted);
     }
 
+    @media (max-width: 30rem) {
+      [data-slot="user"] {
+        display: none;
+      }
+    }
+
     a,
     button {
       appearance: none;

cloud/app/src/routes/workspace.tsx

@@ -44,7 +44,7 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
           </A>
         </div>
         <div data-slot="header-actions">
-          <span>{userInfo()?.user.email}</span>
+          <span data-slot="user">{userInfo()?.user.email}</span>
           <form action={logout} method="post">
             <button type="submit" formaction={logout}>
               Logout

cloud/app/src/routes/workspace/[id].css

@@ -8,11 +8,22 @@
   flex-direction: column;
   gap: var(--space-10);
 
+  @media (max-width: 30rem) {
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
+
+    gap: var(--space-8);
+  }
+
   [data-slot="sections"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-16);
 
+    @media (max-width: 30rem) {
+      gap: var(--space-8);
+    }
+
     section {
       display: flex;
       flex-direction: column;
@@ -21,6 +32,10 @@
     section:not(:last-child) {
       border-bottom: 1px solid var(--color-border);
       padding-bottom: var(--space-16);
+
+      @media (max-width: 30rem) {
+        padding-bottom: var(--space-8);
+      }
     }
   }
 
@@ -99,9 +114,9 @@
     gap: var(--space-2);
 
     p {
+      line-height: 1.5;
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
-      margin: 0;
     }
   }
 
@@ -113,6 +128,10 @@
     padding-bottom: var(--space-8);
     border-bottom: 1px solid var(--color-border);
 
+    @media (max-width: 30rem) {
+      padding-bottom: var(--space-6);
+    }
+
     h1 {
       font-size: var(--font-size-2xl);
       font-weight: 500;
@@ -123,11 +142,11 @@
 
       @media (max-width: 30rem) {
         font-size: var(--font-size-xl);
-        line-height: 1.25;
       }
     }
 
     p {
+      line-height: 1.5;
       font-size: var(--font-size-md);
       color: var(--color-text-muted);
 
@@ -153,12 +172,12 @@
       text-transform: uppercase;
 
       @media (max-width: 30rem) {
-        font-size: var(--font-size-lg);
+        font-size: var(--font-size-md);
-        line-height: 1.25;
       }
     }
 
     p {
+      line-height: 1.4;
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
     }
@@ -173,6 +192,10 @@
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius-sm);
 
+      @media (max-width: 30rem) {
+        gap: var(--space-2);
+      }
+
       input {
         flex: 1;
         padding: var(--space-2) var(--space-3);

cloud/app/src/routes/workspace/[id].tsx

@@ -64,7 +64,7 @@ const createPortalUrl = action(async (workspaceID: string, returnUrl: string) =>
   return withActor(() => Billing.generatePortalUrl({ returnUrl }), workspaceID)
 }, "portalUrl")
 
-export default function () {
+export default function() {
   const params = useParams()
 
   /////////////////
@@ -178,7 +178,7 @@ export default function () {
     <div data-slot="root">
       {/* Title */}
       <section data-slot="title-section">
-        <h1>opencode zen</h1>
+        <h1>Zen</h1>
         <p>
           Curated list of models provided by opencode. <a href="/docs/zen">Learn more</a>.
         </p>