fix(settings): align read-only fields and flatten cards (#5310)

packages/views/settings/components/settings-layout.tsx

@@ -70,7 +70,7 @@ export function SettingsCard({
   className?: string;
 }) {
   return (
-    <Card className={cn("gap-0 py-0", className)}>
+    <Card className={cn("gap-0 py-0 shadow-none", className)}>
       <CardContent className="divide-y divide-surface-border px-0">
         {children}
       </CardContent>

packages/views/settings/components/workspace-tab.test.tsx

@@ -139,6 +139,14 @@ describe("WorkspaceTab — automatic updates", () => {
     expect(screen.queryByRole("button", { name: /^Save$/ })).toBeNull();
   });
 
+  it("renders the workspace slug in the shared read-only input control", () => {
+    render(<WorkspaceTab />, { wrapper: I18nWrapper });
+
+    const input = screen.getByRole("textbox", { name: "Slug" }) as HTMLInputElement;
+    expect(input.value).toBe("test-workspace");
+    expect(input.readOnly).toBe(true);
+  });
+
   it("uppercases and strips non-alphanumeric prefix input", async () => {
     const user = setupUser();
     render(<WorkspaceTab />, { wrapper: I18nWrapper });

packages/views/settings/components/workspace-tab.tsx

@@ -416,9 +416,16 @@ export function WorkspaceTab() {
             label={t(($) => $.workspace.slug_label)}
             size="text"
           >
-              <div className="rounded-lg border border-input bg-muted/50 px-2.5 py-1.5 font-mono text-xs text-muted-foreground">
-                {workspace.slug}
-              </div>
+            <Input
+              type="text"
+              name="workspace-slug"
+              autoComplete="off"
+              spellCheck={false}
+              aria-label={t(($) => $.workspace.slug_label)}
+              value={workspace.slug}
+              readOnly
+              className="bg-muted/50 font-mono text-muted-foreground dark:bg-muted/50"
+            />
           </SettingsRow>
 
           <SettingsRow