wip: zen settings

packages/console/app/src/routes/workspace/[id]/billing/index.css

@@ -1,6 +1,6 @@
 [data-page="workspace-[id]"] {
   max-width: 64rem;
-  padding: var(--space-10) var(--space-4);
+  padding: var(--space-2) var(--space-4);
   margin: 0 auto;
   width: 100%;
   display: flex;

packages/console/app/src/routes/workspace/[id]/keys/index.css

@@ -1,6 +1,6 @@
 [data-page="workspace-[id]"] {
   max-width: 64rem;
-  padding: var(--space-10) var(--space-4);
+  padding: var(--space-2) var(--space-4);
   margin: 0 auto;
   width: 100%;
   display: flex;

packages/console/app/src/routes/workspace/[id]/members/index.css

@@ -1,6 +1,6 @@
 [data-page="workspace-[id]"] {
   max-width: 64rem;
-  padding: var(--space-10) var(--space-4);
+  padding: var(--space-2) var(--space-4);
   margin: 0 auto;
   width: 100%;
   display: flex;

packages/console/app/src/routes/workspace/[id]/settings/index.css

@@ -1,6 +1,6 @@
 [data-page="workspace-[id]"] {
   max-width: 64rem;
-  padding: var(--space-10) var(--space-4);
+  padding: var(--space-2) var(--space-4);
   margin: 0 auto;
   width: 100%;
   display: flex;

packages/console/app/src/routes/workspace/[id]/settings/settings-section.module.css

@@ -1,63 +1,61 @@
 .root {
-  [data-slot="section-content"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
   [data-slot="setting"] {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--space-4);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-
-    @media (max-width: 30rem) {
-      flex-direction: column;
-      gap: var(--space-3);
-    }
-  }
-
-  [data-slot="setting-info"] {
-    flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--space-1);
+    gap: var(--space-3);
 
-    h3 {
-      font-size: var(--font-size-md);
-      font-weight: 500;
+    p {
+      font-size: var(--font-size-sm);
       line-height: 1.2;
       margin: 0;
-      color: var(--color-text);
+      color: var(--color-text-muted);
+    }
+
+    [data-slot="value-with-action"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-3);
+
+      @media (max-width: 30rem) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-2);
+      }
     }
 
     [data-slot="current-value"] {
       font-size: var(--font-size-sm);
-      color: var(--color-text-muted);
+      color: var(--color-text);
       line-height: 1.4;
       margin: 0;
     }
+
+    >button {
+      align-self: flex-start;
+    }
   }
 
   [data-slot="create-form"] {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
-    min-width: 15rem;
-    width: fit-content;
-
-    @media (max-width: 30rem) {
-      width: 100%;
-      min-width: auto;
-    }
+    gap: var(--space-2);
 
     [data-slot="input-container"] {
       display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
+      flex-direction: row;
+      align-items: center;
+      gap: var(--space-2);
+
+      @media (max-width: 30rem) {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      button {
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
     }
 
     input {
@@ -68,11 +66,13 @@
       background-color: var(--color-bg);
       color: var(--color-text);
       font-size: var(--font-size-sm);
-      font-family: var(--font-mono);
+      line-height: 1.5;
+      min-width: 0;
 
       &:focus {
         outline: none;
         border-color: var(--color-accent);
+        box-shadow: 0 0 0 3px var(--color-accent-alpha);
       }
 
       &::placeholder {
@@ -80,16 +80,15 @@
       }
     }
 
-    [data-slot="form-actions"] {
-      display: flex;
-      gap: var(--space-2);
-      justify-content: flex-end;
+    >button[type="reset"] {
+      align-self: flex-start;
     }
 
     [data-slot="form-error"] {
       color: var(--color-danger);
       font-size: var(--font-size-sm);
       line-height: 1.4;
+      margin-top: calc(var(--space-1) * -1);
     }
   }
-}
+}

packages/console/app/src/routes/workspace/[id]/settings/settings-section.tsx

@@ -79,10 +79,7 @@ export function SettingsSection() {
       </div>
       <div data-slot="section-content">
         <div data-slot="setting">
-          <div data-slot="setting-info">
-            <h3>Workspace Name</h3>
-            <p data-slot="current-value">{workspaceInfo()?.name}</p>
-          </div>
+          <p>Workspace Name</p>
           <Show
             when={!store.show}
             fallback={
@@ -97,25 +94,26 @@ export function SettingsSection() {
                     placeholder="Workspace name"
                     value={workspaceInfo()?.name ?? "Default"}
                   />
-                  <Show when={submission.result && submission.result.error}>
-                    {(err) => <div data-slot="form-error">{err()}</div>}
-                  </Show>
-                </div>
-                <input type="hidden" name="workspaceID" value={params.id} />
-                <div data-slot="form-actions">
+                  <input type="hidden" name="workspaceID" value={params.id} />
+                  <button type="submit" data-color="primary" disabled={submission.pending}>
+                    {submission.pending ? "Updating..." : "Save"}
+                  </button>
                   <button type="reset" data-color="ghost" onClick={() => hide()}>
                     Cancel
                   </button>
-                  <button type="submit" data-color="primary" disabled={submission.pending}>
-                    {submission.pending ? "Updating..." : "Update"}
-                  </button>
                 </div>
+                <Show when={submission.result && submission.result.error}>
+                  {(err) => <div data-slot="form-error">{err()}</div>}
+                </Show>
               </form>
             }
           >
-            <button data-color="primary" onClick={() => show()}>
-              Edit Name
-            </button>
+            <div data-slot="value-with-action">
+              <p data-slot="current-value">{workspaceInfo()?.name}</p>
+              <button data-color="primary" onClick={() => show()}>
+                Edit
+              </button>
+            </div>
           </Show>
         </div>
       </div>