From f686901bd64171024138d0e4ca1ef9afd4b00ac7 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Mon, 13 Jul 2026 12:19:38 +0800
Subject: [PATCH] fix(settings): align read-only fields and flatten cards
 (#5310)

---
 .../views/settings/components/settings-layout.tsx   |  2 +-
 .../settings/components/workspace-tab.test.tsx      |  8 ++++++++
 .../views/settings/components/workspace-tab.tsx     | 13 ++++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/views/settings/components/settings-layout.tsx b/packages/views/settings/components/settings-layout.tsx
index fd5b7a199..689e1d49b 100644
--- a/packages/views/settings/components/settings-layout.tsx
+++ b/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>
diff --git a/packages/views/settings/components/workspace-tab.test.tsx b/packages/views/settings/components/workspace-tab.test.tsx
index 647a9e5eb..090f19c64 100644
--- a/packages/views/settings/components/workspace-tab.test.tsx
+++ b/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 });
diff --git a/packages/views/settings/components/workspace-tab.tsx b/packages/views/settings/components/workspace-tab.tsx
index 7eb440d1b..2d125fbd5 100644
--- a/packages/views/settings/components/workspace-tab.tsx
+++ b/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