fix(dotcom): polish workspace settings dialog scrolling and layout (tldraw#9284)

In order to polish the manage workspace dialog from tldraw#9268, this PR makes
the tab-page scrollbar appear only when content actually overflows,
sizes the dialog body so it stops jumping around, and tidies a few
labels and disabled-state styles.

- Scrollbar only appears when a tab page actually overflows. The
container stays `overflow: hidden` and a `useScrollbarWhenScrollable`
callback ref measures the content with a `ResizeObserver`, adding a
`.scrollable` class that flips to `overflow: auto` only when needed.
This avoids a permanent scrollbar/gutter on systems that always render
scrollbars.
- Sized the dialog body with a `max-height`/`min-height` so it doesn't
jump around as content changes.
- Renamed the sidebar workspace action label from "Settings" to
"Manage".
- Renamed the "Enable invite link" label to "Enable invites".
- Disabled inline buttons now dim via text color instead of opacity.
- Bumped the empty-state text contrast (`text-3` → `text-1`).

### Change type

- [x] `improvement`

### Test plan

1. Open the manage workspace dialog from the sidebar "Manage" action.
2. With few members, confirm neither tab page shows a scrollbar or
gutter.
3. Add members until a tab page overflows and confirm the scrollbar
appears only then.
4. Switch between the Members and Settings tabs and confirm the dialog
body height stays stable.
5. Confirm disabled inline buttons dim and the "Enable invites" label
reads correctly.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Polish scrolling and layout in the manage workspace dialog.

### Code changes

| Section | LOC change |
| ------- | ---------- |
| Apps    | +40 / -11  |

Author: steveruizok

apps/dotcom/client/public/tla/locales-compiled/en.json

@@ -245,6 +245,12 @@
       "value": "Editor"
     }
   ],
+  "34e34c43ec": [
+    {
+      "type": 0,
+      "value": "Manage"
+    }
+  ],
   "375396d6e5": [
     {
       "type": 0,
@@ -621,12 +627,6 @@
       "value": "Got it"
     }
   ],
-  "78faf88f4d": [
-    {
-      "type": 0,
-      "value": "Enable invite link"
-    }
-  ],
   "797799f35e": [
     {
       "type": 0,
@@ -1013,6 +1013,12 @@
       "value": "Email address"
     }
   ],
+  "b48becc771": [
+    {
+      "type": 0,
+      "value": "Enable invites"
+    }
+  ],
   "b6d4223e60": [
     {
       "type": 0,

apps/dotcom/client/public/tla/locales/en.json

@@ -113,6 +113,9 @@
   "344a7f427f": {
     "translation": "Editor"
   },
+  "34e34c43ec": {
+    "translation": "Manage"
+  },
   "375396d6e5": {
     "translation": "Remove member"
   },
@@ -296,9 +299,6 @@
   "78e9815992": {
     "translation": "Got it"
   },
-  "78faf88f4d": {
-    "translation": "Enable invite link"
-  },
   "797799f35e": {
     "translation": "Submit an issue on GitHub"
   },
@@ -465,6 +465,9 @@
   "b357b524e7": {
     "translation": "Email address"
   },
+  "b48becc771": {
+    "translation": "Enable invites"
+  },
   "b6d4223e60": {
     "translation": "Sign in"
   },

apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarWorkspaceActions.tsx

@@ -11,7 +11,7 @@ import styles from '../sidebar.module.css'
 
 const messages = defineMessages({
 	newFile: { defaultMessage: 'New file' },
-	workspaceSettings: { defaultMessage: 'Settings' },
+	workspaceSettings: { defaultMessage: 'Manage' },
 })
 
 /**

apps/dotcom/client/src/tla/components/dialogs/WorkspaceSettingsDialog.tsx

@@ -1,6 +1,6 @@
 import { MAX_WORKSPACE_NAME_LENGTH, Role, ZErrorCode, can } from '@tldraw/dotcom-shared'
 import { Tooltip as _Tooltip } from 'radix-ui'
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
 	TldrawUiDialogBody,
@@ -45,12 +45,32 @@ interface WorkspaceSettingsDialogProps {
 	onClose(): void
 }
 
+// Returns a callback ref for a scroll container that shows its scrollbar only when the
+// content actually overflows. The container stays `overflow: hidden` (see .tabPage) and
+// gets the `.scrollable` class — flipping overflow to auto — once measurement shows the
+// content is taller than the (max-height-capped) container. A ResizeObserver on the
+// container and its content re-checks as members are added/removed or the window resizes.
+function useScrollbarWhenScrollable() {
+	return useCallback((el: HTMLDivElement | null) => {
+		if (!el) return
+		const update = () =>
+			el.classList.toggle(styles.scrollable, el.scrollHeight > el.clientHeight + 1)
+		update()
+		const observer = new ResizeObserver(update)
+		observer.observe(el)
+		for (const child of el.children) observer.observe(child)
+		return () => observer.disconnect()
+	}, [])
+}
+
 export function WorkspaceSettingsDialog({ workspaceId, onClose }: WorkspaceSettingsDialogProps) {
 	const app = useApp()
 	const { addDialog } = useDialogs()
 	const [activeTab, setActiveTab] = useState('members')
 	const [copiedInviteLink, setCopiedInviteLink] = useState(false)
 
+	const scrollableRef = useScrollbarWhenScrollable()
+
 	const namePlaceholderMsg = useMsg(messages.namePlaceholder)
 	const ownerMsg = useMsg(messages.owner)
 	const memberMsg = useMsg(messages.member)
@@ -339,7 +359,7 @@ export function WorkspaceSettingsDialog({ workspaceId, onClose }: WorkspaceSetti
 							</div>
 
 							<TlaMenuTabsPage id="members">
-								<div className={styles.tabPage}>
+								<div className={styles.tabPage} ref={scrollableRef}>
 									<div className={styles.membersList}>
 										{members.map((member) => {
 											const isSelf = member.userId === app.getUser().id
@@ -424,13 +444,13 @@ export function WorkspaceSettingsDialog({ workspaceId, onClose }: WorkspaceSetti
 							</TlaMenuTabsPage>
 
 							<TlaMenuTabsPage id="settings">
-								<div className={styles.tabPage}>
+								<div className={styles.tabPage} ref={scrollableRef}>
 									<div className={styles.settingsPage}>
 										{canManageWorkspace && (
 											<>
 												<TlaMenuControl>
 													<TlaMenuControlLabel htmlFor="workspace-invite-enabled-switch">
-														<F defaultMessage="Enable invite link" />
+														<F defaultMessage="Enable invites" />
 													</TlaMenuControlLabel>
 													<TlaMenuSwitch
 														id="workspace-invite-enabled-switch"

apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css

@@ -9,6 +9,7 @@
 	flex-direction: column;
 	gap: var(--tl-space-4);
 	max-width: 500px;
+	overflow: auto;
 }
 
 /* ----------------- Feedback dialog ---------------- */
@@ -201,14 +202,14 @@
 /* ----------------- Group Settings Dialog ---------------- */
 
 .workspaceSettingsBody {
+	padding-top: 0px;
 	max-width: 360px;
+	max-height: max(420px, 80%);
+	min-height: 420px;
 	width: calc(100vw - 48px);
 }
 
 .section {
-	/* Sections are separated by spacing alone (no dividers), so the gap needs to be
-	   clearly larger than the ~8px spacing within a section. */
-	margin-bottom: 20px;
 	display: flex;
 	flex-direction: column;
 }
@@ -230,7 +231,7 @@
 	margin: 8px 0 0;
 	text-align: center;
 	text-wrap: balance;
-	color: var(--tla-color-text-3);
+	color: var(--tla-color-text-1);
 }
 
 .membersList {
@@ -271,7 +272,7 @@
    also equals that 12px, the strip now spans the body's full width — so drop the tab
    nav's bottom rule inset to 0 and let it bleed to the modal edges. */
 .workspaceTabs {
-	margin: 0 -12px;
+	margin: 20px -12px 0px -12px;
 	--tabs-line-inset: 0px;
 	/* Tighten the gap between the Members and Settings tabs (default leaves too much). */
 	--tabs-tab-gap: -12px;
@@ -290,6 +291,14 @@
 	padding: 16px 12px 0;
 	margin: 0 -12px;
 	max-height: calc(70vh - 280px);
+	/* Hidden by default so no scrollbar shows when the content fits. The component
+	   measures the content and adds .scrollable to flip overflow to auto only when it
+	   actually overflows — avoids a permanent scrollbar/gutter on systems that always
+	   render scrollbars. */
+	overflow-y: hidden;
+}
+
+.tabPage.scrollable {
 	overflow-y: auto;
 }
 
@@ -323,7 +332,7 @@
 }
 
 .inlineButton:disabled {
-	opacity: 0.5;
+	color: var(--tla-color-text-3);
 	cursor: not-allowed;
 }