From 4e3995c33ea25769936af911ad0b84443d4d1d4e Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sun, 6 Sep 2026 06:39:45 +0530
Subject: [PATCH 01/23] fix(ui): settings description line height

---
 dashboard/src/components/settings/SettingsModal.vue | 7 ++++++-
 dashboard/src/pages/settings/SettingsDetailPage.vue | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/components/settings/SettingsModal.vue b/dashboard/src/components/settings/SettingsModal.vue
index a56f153e0..b2d747cf1 100644
--- a/dashboard/src/components/settings/SettingsModal.vue
+++ b/dashboard/src/components/settings/SettingsModal.vue
@@ -99,7 +99,12 @@ watch(tabs, (available) => {
 
 		<SettingsContent>
 			<SettingsPanel v-for="tab in tabs" :key="tab.value" :value="tab.value">
-				<SettingsHeader :title="tab.title" :description="tab.description" />
+				<SettingsHeader>
+					<h2 class="text-lg font-semibold text-ink-gray-8">{{ tab.title }}</h2>
+					<p v-if="tab.description" class="mt-1 text-p-base text-ink-gray-6">
+						{{ tab.description }}
+					</p>
+				</SettingsHeader>
 				<SettingsBody>
 					<div class="mt-6">
 						<component :is="tab.component" />
diff --git a/dashboard/src/pages/settings/SettingsDetailPage.vue b/dashboard/src/pages/settings/SettingsDetailPage.vue
index d4f2a511e..234f800bd 100644
--- a/dashboard/src/pages/settings/SettingsDetailPage.vue
+++ b/dashboard/src/pages/settings/SettingsDetailPage.vue
@@ -51,7 +51,7 @@ watch(
 		<div class="mx-auto max-w-2xl px-4 py-5 sm:px-6">
 			<header class="mb-6">
 				<h1 class="text-lg font-semibold text-ink-gray-8">{{ tab.title }}</h1>
-				<p v-if="tab.description" class="mt-1 text-base text-ink-gray-6">
+				<p v-if="tab.description" class="mt-1 text-p-base text-ink-gray-6">
 					{{ tab.description }}
 				</p>
 			</header>

From 8d911ad499889761ef6497011dbe8cbcdce3cbcd Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sun, 6 Sep 2026 06:40:01 +0530
Subject: [PATCH 02/23] refactor(ui): shorten settings sidebar labels

---
 dashboard/src/composables/useSettings.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/composables/useSettings.ts b/dashboard/src/composables/useSettings.ts
index a52bad102..80f320d42 100644
--- a/dashboard/src/composables/useSettings.ts
+++ b/dashboard/src/composables/useSettings.ts
@@ -57,7 +57,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 	{
 		value: 'profile',
 		group: 'Account',
-		label: 'My profile',
+		label: 'Profile',
 		icon: 'lucide-user',
 		title: 'My profile',
 		description: 'How you appear to everyone you share a team with.',
@@ -86,7 +86,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 	{
 		value: 'teams',
 		group: 'Team',
-		label: 'Your teams',
+		label: 'Teams',
 		icon: 'lucide-users',
 		title: 'Your teams',
 		description: 'Switch between the teams you belong to, or start a new one.',
@@ -95,7 +95,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 	{
 		value: 'team',
 		group: 'Team',
-		label: 'Team settings',
+		label: 'Manage',
 		icon: 'lucide-building-2',
 		title: 'Team settings',
 		description: 'Settings for the team you are working in.',

From 7e44a2e8e35d8c6864b589b8d0d52d4ff354f16e Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sun, 6 Sep 2026 16:30:05 +0530
Subject: [PATCH 03/23] feat(ui): theme switcher with preview cards

---
 .../settings/forms/AppearanceForm.vue         | 135 +++++++++++++++---
 1 file changed, 117 insertions(+), 18 deletions(-)

diff --git a/dashboard/src/components/settings/forms/AppearanceForm.vue b/dashboard/src/components/settings/forms/AppearanceForm.vue
index 74697760e..8c795cd01 100644
--- a/dashboard/src/components/settings/forms/AppearanceForm.vue
+++ b/dashboard/src/components/settings/forms/AppearanceForm.vue
@@ -1,25 +1,124 @@
 <script setup lang="ts">
-import { Button, SettingsRow, useColorScheme } from 'frappe-ui'
-import { useAppMenu } from '@/composables/useAppMenu'
+import { type ColorScheme, SettingsRow, useColorScheme } from 'frappe-ui'
 
-// Theme also lives in the sidebar's header menu, where it's a shortcut. This is
-// its home: the menu is for changing it in passing, settings is for finding it
-// when you're looking. The choice is stored per browser, not per account.
-const { themeOptions } = useAppMenu()
 const { colorScheme, setColorScheme } = useColorScheme()
+
+const tones = {
+	light: {
+		page: 'bg-white',
+		sidebar: 'bg-gray-50',
+		bar: 'bg-gray-300',
+		card: 'bg-gray-100',
+		border: 'border-gray-200',
+	},
+	dark: {
+		page: 'bg-dark-gray-950',
+		sidebar: 'bg-transparent',
+		bar: 'bg-dark-gray-500',
+		card: 'bg-dark-gray-800',
+		border: 'border-dark-gray-800',
+	},
+}
+
+type Tone = keyof typeof tones
+
+interface ThemeOption {
+	value: ColorScheme
+	label: string
+	panes: Tone[]
+}
+
+const options: ThemeOption[] = [
+	{ value: 'system', label: 'Automatic', panes: ['light', 'dark'] },
+	{ value: 'light', label: 'Light', panes: ['light'] },
+	{ value: 'dark', label: 'Dark', panes: ['dark'] },
+]
 </script>
 
 <template>
-	<SettingsRow title="Theme" description="Applies to this browser only.">
-		<div class="flex items-center gap-1">
-			<Button
-				v-for="theme in themeOptions"
-				:key="theme.value"
-				:icon-left="theme.icon"
-				:variant="theme.value === colorScheme ? 'subtle' : 'ghost'"
-				:label="theme.label"
-				@click="setColorScheme(theme.value)"
-			/>
-		</div>
-	</SettingsRow>
+	<SettingsRow title="Theme" description="Choose how the dashboard looks." />
+
+	<div class="grid grid-cols-3 gap-3">
+		<button
+			v-for="option in options"
+			:key="option.value"
+			type="button"
+			:aria-pressed="colorScheme === option.value"
+			class="grid grid-cols-2 overflow-hidden rounded-4 border focus-visible:focus-ring"
+			:class="
+				colorScheme === option.value
+					? 'border-outline-gray-6'
+					: 'border-outline-gray-2 hover:border-outline-gray-4'
+			"
+			@click="setColorScheme(option.value)"
+		>
+			<span
+				v-for="(pane, index) in option.panes"
+				:key="pane"
+				class="flex overflow-hidden pl-4 pt-3"
+				:class="[
+						index === 0
+							? 'bg-surface-gray-1'
+							: 'border-l border-outline-gray-2 bg-surface-gray-2',
+						option.panes.length === 2
+							? 'aspect-[8/7]'
+							: 'col-span-2 aspect-[16/7]',
+					]"
+			>
+				<span
+					class="grid shrink-0 grid-cols-[28%_1fr] grid-rows-[auto_1fr] overflow-hidden rounded-tl-1 hadow-lg"
+					:class="[tones[pane].page, tones[pane].border]"
+					:style="{ width: `${option.panes.length * 100}%` }"
+				>
+					<span
+						class="col-span-2 flex border-b p-1"
+						:class="tones[pane].border"
+					>
+						<svg class="h-1">
+							<circle cx="2" cy="2" r="2" class="fill-red-500" />
+							<circle cx="8" cy="2" r="2" class="fill-amber-500" />
+							<circle cx="14" cy="2" r="2" class="fill-green-500" />
+						</svg>
+					</span>
+
+					<!-- sidebar -->
+					<span
+						class="flex flex-col gap-1 border-r p-1"
+						:class="[tones[pane].sidebar, tones[pane].border]"
+					>
+						<span
+							v-for="bar in 3"
+							:key="bar"
+							class="h-[3px] rounded-1"
+							:class="tones[pane].bar"
+						/>
+					</span>
+
+					<!-- main content -->
+					<span class="grid content-start grid-cols-2 gap-1 p-1">
+						<span
+							v-for="card in 4"
+							:key="card"
+							class="h-4 rounded-1 border"
+							:class="[tones[pane].card, tones[pane].border]"
+						/>
+					</span>
+				</span>
+			</span>
+
+			<span
+				class="col-span-full flex items-center justify-between border-t border-outline-gray-2 px-2 py-1.5"
+			>
+				<span class="text-p-sm text-ink-gray-7">{{ option.label }}</span>
+				<span
+					class="size-3 rounded-full "
+					:class="
+						colorScheme === option.value
+							? 'border-4 border-outline-gray-7'
+							: 'border border-outline-gray-3'
+					"
+				/>
+			</span>
+		</button>
+	</div>
 </template>

From 7201e83b1f03e6686ef365e6aefef46caef9eb5c Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sun, 6 Sep 2026 16:30:12 +0530
Subject: [PATCH 04/23] fix(ui): settings dialog spacing and typography

---
 .../src/components/settings/SettingsModal.vue | 42 +++++++++----------
 .../settings/forms/NotificationsForm.vue      |  3 --
 dashboard/src/composables/useSettings.ts      | 11 +++--
 .../src/pages/settings/SettingsDetailPage.vue |  7 +++-
 4 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/dashboard/src/components/settings/SettingsModal.vue b/dashboard/src/components/settings/SettingsModal.vue
index b2d747cf1..0b50881f4 100644
--- a/dashboard/src/components/settings/SettingsModal.vue
+++ b/dashboard/src/components/settings/SettingsModal.vue
@@ -62,25 +62,16 @@ watch(tabs, (available) => {
 	     binds a prop nothing reads and the dialog never opens. -->
 	<SettingsDialog v-model:open="settingsOpen" v-model:tab="settingsTab">
 		<SettingsSidebar>
-			<!-- The dialog names itself. aria-hidden because SettingsDialog already
-			     renders a screen-reader-only <h1>Settings</h1> — this is the same
-			     title made visible, not a second one. -->
-			<p
-				aria-hidden="true"
-				class="px-2 pb-1 pt-1 text-base font-semibold text-ink-gray-8"
-			>
-				Settings
-			</p>
+			<SettingsNavGroup v-for="group in groups" :key="group.label">
+				<template #label>
+					<span class="text-p-sm text-ink-gray-5">{{ group.label }}</span>
+				</template>
 
-			<SettingsNavGroup
-				v-for="group in groups"
-				:key="group.label"
-				:label="group.label"
-			>
 				<SettingsNavItem
 					v-for="tab in group.items"
 					:key="tab.value"
 					:value="tab.value"
+					class="!text-p-sm"
 				>
 					<template #prefix>
 						<!-- Your own face on your own tab; everything else takes an icon. -->
@@ -97,20 +88,27 @@ watch(tabs, (available) => {
 			</SettingsNavGroup>
 		</SettingsSidebar>
 
-		<SettingsContent>
+		<SettingsContent class="bg-surface-base">
 			<SettingsPanel v-for="tab in tabs" :key="tab.value" :value="tab.value">
-				<SettingsHeader>
-					<h2 class="text-lg font-semibold text-ink-gray-8">{{ tab.title }}</h2>
-					<p v-if="tab.description" class="mt-1 text-p-base text-ink-gray-6">
+				<SettingsHeader class="!px-10 !pt-8">
+					<h2 class="text-lg-semibold text-ink-gray-8">{{ tab.title }}</h2>
+					<p
+						v-if="tab.description"
+						class="mt-1 max-w-md text-p-base text-ink-gray-6"
+					>
 						{{ tab.description }}
 					</p>
 				</SettingsHeader>
-				<SettingsBody>
-					<div class="mt-6">
-						<component :is="tab.component" />
-					</div>
+				<SettingsBody viewport-class="px-10 pb-8 pt-6">
+					<component :is="tab.component" />
 				</SettingsBody>
 			</SettingsPanel>
 		</SettingsContent>
 	</SettingsDialog>
 </template>
+
+<style scoped>
+:deep(.text-base.leading-5.text-ink-gray-6) {
+	@apply text-p-sm;
+}
+</style>
diff --git a/dashboard/src/components/settings/forms/NotificationsForm.vue b/dashboard/src/components/settings/forms/NotificationsForm.vue
index 741547d22..e13f99d74 100644
--- a/dashboard/src/components/settings/forms/NotificationsForm.vue
+++ b/dashboard/src/components/settings/forms/NotificationsForm.vue
@@ -126,9 +126,6 @@ async function onSave(): Promise<void> {
 		</div>
 
 		<div class="divide-y divide-outline-gray-1 border-t border-outline-gray-1">
-			<!-- label-for="" opts out of SettingsRow's auto-label: it wires the
-			     title to the first control it finds, and here that would make
-			     clicking "Billing" toggle email only. -->
 			<SettingsRow
 				v-for="cat in CATEGORIES"
 				:key="cat.key"
diff --git a/dashboard/src/composables/useSettings.ts b/dashboard/src/composables/useSettings.ts
index 80f320d42..f4fe92be7 100644
--- a/dashboard/src/composables/useSettings.ts
+++ b/dashboard/src/composables/useSettings.ts
@@ -60,7 +60,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		label: 'Profile',
 		icon: 'lucide-user',
 		title: 'My profile',
-		description: 'How you appear to everyone you share a team with.',
+		description: 'How you appear to your teams.',
 		component: ProfileForm,
 	},
 	{
@@ -69,8 +69,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		label: 'Notifications',
 		icon: 'lucide-bell',
 		title: 'Notifications',
-		description:
-			'Choose how each kind of notification reaches you. These apply to your account on this team only.',
+		description: "How you're notified on this team.",
 		component: NotificationsForm,
 		requires: 'member',
 	},
@@ -80,7 +79,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		label: 'Appearance',
 		icon: 'lucide-sun-moon',
 		title: 'Appearance',
-		description: 'How the console looks.',
+		description: 'How the dashboard looks.',
 		component: AppearanceForm,
 	},
 	{
@@ -89,7 +88,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		label: 'Teams',
 		icon: 'lucide-users',
 		title: 'Your teams',
-		description: 'Switch between the teams you belong to, or start a new one.',
+		description: 'Switch teams or create one.',
 		component: TeamsForm,
 	},
 	{
@@ -98,7 +97,7 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		label: 'Manage',
 		icon: 'lucide-building-2',
 		title: 'Team settings',
-		description: 'Settings for the team you are working in.',
+		description: 'Rename or delete this team.',
 		component: TeamForm,
 		requires: 'teamAdmin',
 	},
diff --git a/dashboard/src/pages/settings/SettingsDetailPage.vue b/dashboard/src/pages/settings/SettingsDetailPage.vue
index 234f800bd..161d24f77 100644
--- a/dashboard/src/pages/settings/SettingsDetailPage.vue
+++ b/dashboard/src/pages/settings/SettingsDetailPage.vue
@@ -50,8 +50,11 @@ watch(
 	<div v-if="tab && allowed" class="h-full overflow-y-auto">
 		<div class="mx-auto max-w-2xl px-4 py-5 sm:px-6">
 			<header class="mb-6">
-				<h1 class="text-lg font-semibold text-ink-gray-8">{{ tab.title }}</h1>
-				<p v-if="tab.description" class="mt-1 text-p-base text-ink-gray-6">
+				<h1 class="text-lg-semibold text-ink-gray-8">{{ tab.title }}</h1>
+				<p
+					v-if="tab.description"
+					class="mt-1 max-w-md text-p-base text-ink-gray-6"
+				>
 					{{ tab.description }}
 				</p>
 			</header>

From c0fb1cfda60c7477ae175b8c9e0826ed95d64853 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sun, 6 Sep 2026 16:30:46 +0530
Subject: [PATCH 05/23] chore(ui): remove useless comment for profileform pfp
 uploader

---
 dashboard/src/components/settings/forms/ProfileForm.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/dashboard/src/components/settings/forms/ProfileForm.vue b/dashboard/src/components/settings/forms/ProfileForm.vue
index 38f885742..c390ac8de 100644
--- a/dashboard/src/components/settings/forms/ProfileForm.vue
+++ b/dashboard/src/components/settings/forms/ProfileForm.vue
@@ -117,9 +117,7 @@ function resetPassword(): void {
 					disabled
 				/>
 			</div>
-			<p class="text-p-sm text-ink-gray-5">
-				Photo uploads land in a follow-up.
-			</p>
+
 		</div>
 
 		<div class="flex items-end gap-2">

From 3c6c774a9e2b49669540750857ccac970a2c89c4 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sun, 6 Sep 2026 18:21:55 +0530
Subject: [PATCH 06/23] fix(ui): remove useless padding in settingsDialog teams
 form

---
 dashboard/src/components/settings/forms/TeamForm.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/components/settings/forms/TeamForm.vue b/dashboard/src/components/settings/forms/TeamForm.vue
index d814aeeb1..d68ce8a24 100644
--- a/dashboard/src/components/settings/forms/TeamForm.vue
+++ b/dashboard/src/components/settings/forms/TeamForm.vue
@@ -111,11 +111,11 @@ async function onDelete(): Promise<void> {
 		     line with its own explanation. -->
 		<div
 			v-if="canDeleteTeam"
-			class="mt-10 flex items-start gap-4 border-t border-outline-gray-1 pt-6"
+			class="mt-10 flex items-start gap-4 border-t border-outline-gray-1 pt-3.5"
 		>
 			<div class="min-w-0 flex-1">
 				<p class="text-base font-medium text-ink-gray-9">Delete team</p>
-				<p class="mt-0.5 text-p-sm text-ink-gray-5">
+				<p class="mt-1 text-base leading-5 text-ink-gray-6">
 					Permanently removes the team and everyone's access. Servers and sites
 					must be removed first.
 				</p>

From 709fe1597b57096a425fe3a5a598be5a03df5dcf Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Mon, 7 Sep 2026 14:53:53 +0530
Subject: [PATCH 07/23] fix(ui): make appearanceForm responsive

---
 .../components/settings/forms/AppearanceForm.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/components/settings/forms/AppearanceForm.vue b/dashboard/src/components/settings/forms/AppearanceForm.vue
index 8c795cd01..59cd23bec 100644
--- a/dashboard/src/components/settings/forms/AppearanceForm.vue
+++ b/dashboard/src/components/settings/forms/AppearanceForm.vue
@@ -55,7 +55,7 @@ const options: ThemeOption[] = [
 			<span
 				v-for="(pane, index) in option.panes"
 				:key="pane"
-				class="flex overflow-hidden pl-4 pt-3"
+				class="flex overflow-hidden pl-2 pt-2 sm:pl-4 sm:pt-3"
 				:class="[
 						index === 0
 							? 'bg-surface-gray-1'
@@ -66,7 +66,7 @@ const options: ThemeOption[] = [
 					]"
 			>
 				<span
-					class="grid shrink-0 grid-cols-[28%_1fr] grid-rows-[auto_1fr] overflow-hidden rounded-tl-1 hadow-lg"
+					class="grid shrink-0 grid-cols-[28%_1fr] grid-rows-[auto_1fr] overflow-hidden rounded-tl-1 shadow-lg"
 					:class="[tones[pane].page, tones[pane].border]"
 					:style="{ width: `${option.panes.length * 100}%` }"
 				>
@@ -81,7 +81,6 @@ const options: ThemeOption[] = [
 						</svg>
 					</span>
 
-					<!-- sidebar -->
 					<span
 						class="flex flex-col gap-1 border-r p-1"
 						:class="[tones[pane].sidebar, tones[pane].border]"
@@ -94,12 +93,11 @@ const options: ThemeOption[] = [
 						/>
 					</span>
 
-					<!-- main content -->
 					<span class="grid content-start grid-cols-2 gap-1 p-1">
 						<span
 							v-for="card in 4"
 							:key="card"
-							class="h-4 rounded-1 border"
+							class="h-3 rounded-1 border sm:h-4"
 							:class="[tones[pane].card, tones[pane].border]"
 						/>
 					</span>
@@ -107,11 +105,13 @@ const options: ThemeOption[] = [
 			</span>
 
 			<span
-				class="col-span-full flex items-center justify-between border-t border-outline-gray-2 px-2 py-1.5"
+				class="col-span-full flex items-center justify-between border-t border-outline-gray-2 px-1.5 py-1 sm:px-2 sm:py-1.5"
 			>
-				<span class="text-p-sm text-ink-gray-7">{{ option.label }}</span>
+				<span class="text-p-xs sm:text-p-sm text-ink-gray-7">
+					{{ option.label }}
+				</span>
 				<span
-					class="size-3 rounded-full "
+					class="size-3 rounded-full"
 					:class="
 						colorScheme === option.value
 							? 'border-4 border-outline-gray-7'

From fc15fc463e6a9f2a8c1d6b83e3aa95aca0c91147 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Mon, 7 Sep 2026 20:00:23 +0530
Subject: [PATCH 08/23] refactor(ui): move shortcuts to frappe-ui v1 keyboard
 api

---
 dashboard/src/components/navigation/Sidebar.vue | 12 +++++-------
 dashboard/src/composables/useSearch.ts          |  7 +++----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/components/navigation/Sidebar.vue b/dashboard/src/components/navigation/Sidebar.vue
index 00d15fb52..e300d4372 100644
--- a/dashboard/src/components/navigation/Sidebar.vue
+++ b/dashboard/src/components/navigation/Sidebar.vue
@@ -2,13 +2,12 @@
 import {
 	Avatar,
 	Dropdown,
-	formatShortcutLabel,
 	KeyboardShortcut,
 	Sidebar,
 	SidebarHeader,
 	SidebarItem,
 	SidebarLabel,
-	useShortcut,
+	useKeyboardShortcut,
 } from 'frappe-ui'
 import { onScopeDispose, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -43,19 +42,18 @@ watch(
 	},
 )
 
-useShortcut({
-	key: 'b',
-	ctrl: true,
+useKeyboardShortcut({
+	combo: 'Mod+B',
 	description: 'Toggle sidebar',
 	group: 'General',
 	allowInInput: true,
 	allowInDialog: true,
-	condition: () => !isMobile.value,
+	enabled: () => !isMobile.value,
 	handler: () => {
 		sidebarCollapsed.value = !sidebarCollapsed.value
 	},
 })
-const sidebarShortcut = formatShortcutLabel({ key: 'b', ctrl: true })
+const sidebarShortcut = isMac() ? '⌘B' : 'Ctrl+B'
 // KeyboardShortcut's showPlus is not platform-aware. Mac reads as ⌘K;
 // Windows/Linux still need the plus so Ctrl+K doesn't run together.
 const showShortcutPlus = !isMac()
diff --git a/dashboard/src/composables/useSearch.ts b/dashboard/src/composables/useSearch.ts
index 777dfd11a..15b545135 100644
--- a/dashboard/src/composables/useSearch.ts
+++ b/dashboard/src/composables/useSearch.ts
@@ -1,4 +1,4 @@
-import { useShortcut } from 'frappe-ui'
+import { useKeyboardShortcut } from 'frappe-ui'
 import { ref } from 'vue'
 
 export const searchOpen = ref(false)
@@ -8,9 +8,8 @@ export const openSearch = (): void => {
 }
 
 export const useSearchShortcut = (): void => {
-	useShortcut({
-		key: 'k',
-		ctrl: true,
+	useKeyboardShortcut({
+		combo: 'Mod+K',
 		description: 'Search',
 		group: 'General',
 		allowInInput: true,

From 1ae2bd612a1a84d023a8c37621392907e251c336 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Mon, 7 Sep 2026 20:00:26 +0530
Subject: [PATCH 09/23] refactor(ui): team switcher out of settings,
 preferences tab

---
 dashboard/src/components/search/index.ts      |   4 +-
 .../src/components/settings/SettingsModal.vue |  38 ++---
 .../settings/forms/AppearanceForm.vue         | 124 ----------------
 .../settings/forms/NotificationsForm.vue      |   2 +-
 .../settings/forms/PreferencesForm.vue        | 130 ++++++++++++++++
 .../components/settings/forms/ProfileForm.vue |  27 ++--
 .../components/settings/forms/TeamForm.vue    |  75 ++++------
 .../components/settings/forms/TeamsForm.vue   | 115 ---------------
 .../src/components/team/SwitchTeamDialog.vue  | 139 ++++++++++++++++++
 dashboard/src/composables/useAppMenu.ts       |   5 +-
 dashboard/src/composables/useSettings.ts      |  56 ++++---
 dashboard/src/composables/useTeamSwitcher.ts  |   7 +
 dashboard/src/layouts/AppShell.vue            |   5 +
 .../src/pages/settings/SettingsDetailPage.vue |   2 +-
 dashboard/src/pages/settings/SettingsPage.vue |  18 ++-
 15 files changed, 378 insertions(+), 369 deletions(-)
 delete mode 100644 dashboard/src/components/settings/forms/AppearanceForm.vue
 create mode 100644 dashboard/src/components/settings/forms/PreferencesForm.vue
 delete mode 100644 dashboard/src/components/settings/forms/TeamsForm.vue
 create mode 100644 dashboard/src/components/team/SwitchTeamDialog.vue
 create mode 100644 dashboard/src/composables/useTeamSwitcher.ts

diff --git a/dashboard/src/components/search/index.ts b/dashboard/src/components/search/index.ts
index 3ee6864ba..8056847fa 100644
--- a/dashboard/src/components/search/index.ts
+++ b/dashboard/src/components/search/index.ts
@@ -6,8 +6,8 @@ import { useCapabilities } from '@/composables/useCapabilities'
 import { useInvoices } from '@/composables/useInvoices'
 import { useServerMapData } from '@/composables/useServerMapData'
 import { useServers } from '@/composables/useServers'
-import { openSettings } from '@/composables/useSettings'
 import { useTeamMembers } from '@/composables/useTeamMembers'
+import { openTeamSwitcher } from '@/composables/useTeamSwitcher'
 import { billingPeriod } from '@/lib/date'
 import { money } from '@/lib/format'
 
@@ -79,7 +79,7 @@ export function useSearchIndex() {
 		actions.push({
 			name: 'Switch team',
 			icon: 'lucide-repeat',
-			onSelect: () => openSettings('teams'),
+			onSelect: openTeamSwitcher,
 		})
 
 		if (actions.length) groups.Actions = { items: actions }
diff --git a/dashboard/src/components/settings/SettingsModal.vue b/dashboard/src/components/settings/SettingsModal.vue
index 0b50881f4..4ea30aa89 100644
--- a/dashboard/src/components/settings/SettingsModal.vue
+++ b/dashboard/src/components/settings/SettingsModal.vue
@@ -35,10 +35,10 @@ const tabs = computed(() =>
 	}),
 )
 
-// What's yours and what's the team's are different kinds of setting, so they
-// get their own sections rather than one long list.
+// What's yours and what the team's are different kinds of setting, so they get
+// their own sections rather than one long list.
 const groups = computed(() => {
-	const order: SettingsTabDef['group'][] = ['Account', 'Team']
+	const order: SettingsTabDef['group'][] = ['Account', 'Administration']
 	return order
 		.map((group) => ({
 			label: group,
@@ -47,8 +47,7 @@ const groups = computed(() => {
 		.filter((group) => group.items.length > 0)
 })
 
-// Switching to a team you don't administer drops the Team settings tab. If that
-// was the open one, land somewhere real instead of an empty content pane.
+// Losing a tab you can no longer reach shouldn't leave an empty content pane.
 watch(tabs, (available) => {
 	if (!available.some((tab) => tab.value === settingsTab.value)) {
 		settingsTab.value = available[0]?.value ?? 'profile'
@@ -62,16 +61,15 @@ watch(tabs, (available) => {
 	     binds a prop nothing reads and the dialog never opens. -->
 	<SettingsDialog v-model:open="settingsOpen" v-model:tab="settingsTab">
 		<SettingsSidebar>
-			<SettingsNavGroup v-for="group in groups" :key="group.label">
-				<template #label>
-					<span class="text-p-sm text-ink-gray-5">{{ group.label }}</span>
-				</template>
-
+			<SettingsNavGroup
+				v-for="group in groups"
+				:key="group.label"
+				:label="group.label"
+			>
 				<SettingsNavItem
 					v-for="tab in group.items"
 					:key="tab.value"
 					:value="tab.value"
-					class="!text-p-sm"
 				>
 					<template #prefix>
 						<!-- Your own face on your own tab; everything else takes an icon. -->
@@ -90,25 +88,11 @@ watch(tabs, (available) => {
 
 		<SettingsContent class="bg-surface-base">
 			<SettingsPanel v-for="tab in tabs" :key="tab.value" :value="tab.value">
-				<SettingsHeader class="!px-10 !pt-8">
-					<h2 class="text-lg-semibold text-ink-gray-8">{{ tab.title }}</h2>
-					<p
-						v-if="tab.description"
-						class="mt-1 max-w-md text-p-base text-ink-gray-6"
-					>
-						{{ tab.description }}
-					</p>
-				</SettingsHeader>
-				<SettingsBody viewport-class="px-10 pb-8 pt-6">
+				<SettingsHeader :title="tab.title" :description="tab.description" />
+				<SettingsBody>
 					<component :is="tab.component" />
 				</SettingsBody>
 			</SettingsPanel>
 		</SettingsContent>
 	</SettingsDialog>
 </template>
-
-<style scoped>
-:deep(.text-base.leading-5.text-ink-gray-6) {
-	@apply text-p-sm;
-}
-</style>
diff --git a/dashboard/src/components/settings/forms/AppearanceForm.vue b/dashboard/src/components/settings/forms/AppearanceForm.vue
deleted file mode 100644
index 59cd23bec..000000000
--- a/dashboard/src/components/settings/forms/AppearanceForm.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import { type ColorScheme, SettingsRow, useColorScheme } from 'frappe-ui'
-
-const { colorScheme, setColorScheme } = useColorScheme()
-
-const tones = {
-	light: {
-		page: 'bg-white',
-		sidebar: 'bg-gray-50',
-		bar: 'bg-gray-300',
-		card: 'bg-gray-100',
-		border: 'border-gray-200',
-	},
-	dark: {
-		page: 'bg-dark-gray-950',
-		sidebar: 'bg-transparent',
-		bar: 'bg-dark-gray-500',
-		card: 'bg-dark-gray-800',
-		border: 'border-dark-gray-800',
-	},
-}
-
-type Tone = keyof typeof tones
-
-interface ThemeOption {
-	value: ColorScheme
-	label: string
-	panes: Tone[]
-}
-
-const options: ThemeOption[] = [
-	{ value: 'system', label: 'Automatic', panes: ['light', 'dark'] },
-	{ value: 'light', label: 'Light', panes: ['light'] },
-	{ value: 'dark', label: 'Dark', panes: ['dark'] },
-]
-</script>
-
-<template>
-	<SettingsRow title="Theme" description="Choose how the dashboard looks." />
-
-	<div class="grid grid-cols-3 gap-3">
-		<button
-			v-for="option in options"
-			:key="option.value"
-			type="button"
-			:aria-pressed="colorScheme === option.value"
-			class="grid grid-cols-2 overflow-hidden rounded-4 border focus-visible:focus-ring"
-			:class="
-				colorScheme === option.value
-					? 'border-outline-gray-6'
-					: 'border-outline-gray-2 hover:border-outline-gray-4'
-			"
-			@click="setColorScheme(option.value)"
-		>
-			<span
-				v-for="(pane, index) in option.panes"
-				:key="pane"
-				class="flex overflow-hidden pl-2 pt-2 sm:pl-4 sm:pt-3"
-				:class="[
-						index === 0
-							? 'bg-surface-gray-1'
-							: 'border-l border-outline-gray-2 bg-surface-gray-2',
-						option.panes.length === 2
-							? 'aspect-[8/7]'
-							: 'col-span-2 aspect-[16/7]',
-					]"
-			>
-				<span
-					class="grid shrink-0 grid-cols-[28%_1fr] grid-rows-[auto_1fr] overflow-hidden rounded-tl-1 shadow-lg"
-					:class="[tones[pane].page, tones[pane].border]"
-					:style="{ width: `${option.panes.length * 100}%` }"
-				>
-					<span
-						class="col-span-2 flex border-b p-1"
-						:class="tones[pane].border"
-					>
-						<svg class="h-1">
-							<circle cx="2" cy="2" r="2" class="fill-red-500" />
-							<circle cx="8" cy="2" r="2" class="fill-amber-500" />
-							<circle cx="14" cy="2" r="2" class="fill-green-500" />
-						</svg>
-					</span>
-
-					<span
-						class="flex flex-col gap-1 border-r p-1"
-						:class="[tones[pane].sidebar, tones[pane].border]"
-					>
-						<span
-							v-for="bar in 3"
-							:key="bar"
-							class="h-[3px] rounded-1"
-							:class="tones[pane].bar"
-						/>
-					</span>
-
-					<span class="grid content-start grid-cols-2 gap-1 p-1">
-						<span
-							v-for="card in 4"
-							:key="card"
-							class="h-3 rounded-1 border sm:h-4"
-							:class="[tones[pane].card, tones[pane].border]"
-						/>
-					</span>
-				</span>
-			</span>
-
-			<span
-				class="col-span-full flex items-center justify-between border-t border-outline-gray-2 px-1.5 py-1 sm:px-2 sm:py-1.5"
-			>
-				<span class="text-p-xs sm:text-p-sm text-ink-gray-7">
-					{{ option.label }}
-				</span>
-				<span
-					class="size-3 rounded-full"
-					:class="
-						colorScheme === option.value
-							? 'border-4 border-outline-gray-7'
-							: 'border border-outline-gray-3'
-					"
-				/>
-			</span>
-		</button>
-	</div>
-</template>
diff --git a/dashboard/src/components/settings/forms/NotificationsForm.vue b/dashboard/src/components/settings/forms/NotificationsForm.vue
index e13f99d74..f94c0665d 100644
--- a/dashboard/src/components/settings/forms/NotificationsForm.vue
+++ b/dashboard/src/components/settings/forms/NotificationsForm.vue
@@ -114,7 +114,7 @@ async function onSave(): Promise<void> {
 </script>
 
 <template>
-	<div>
+	<div class="mt-6">
 		<!-- Column headers, aligned to the switch cells below: with two switches
 		     per row, naming the channel once beats repeating a label against
 		     every toggle. -->
diff --git a/dashboard/src/components/settings/forms/PreferencesForm.vue b/dashboard/src/components/settings/forms/PreferencesForm.vue
new file mode 100644
index 000000000..d9d4f4816
--- /dev/null
+++ b/dashboard/src/components/settings/forms/PreferencesForm.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { type ColorScheme, SettingsRow, useColorScheme } from 'frappe-ui'
+
+const { colorScheme, setColorScheme } = useColorScheme()
+
+const tones = {
+	light: {
+		page: 'bg-white',
+		sidebar: 'bg-gray-50',
+		bar: 'bg-gray-300',
+		card: 'bg-gray-100',
+		border: 'border-gray-200',
+	},
+	dark: {
+		page: 'bg-dark-gray-950',
+		sidebar: 'bg-transparent',
+		bar: 'bg-dark-gray-500',
+		card: 'bg-dark-gray-800',
+		border: 'border-dark-gray-800',
+	},
+}
+
+type Tone = keyof typeof tones
+
+interface ThemeOption {
+	value: ColorScheme
+	label: string
+	panes: Tone[]
+}
+
+const options: ThemeOption[] = [
+	{ value: 'system', label: 'System', panes: ['light', 'dark'] },
+	{ value: 'light', label: 'Light', panes: ['light'] },
+	{ value: 'dark', label: 'Dark', panes: ['dark'] },
+]
+</script>
+
+<template>
+	<div class="mt-6">
+		<SettingsRow
+			class="!py-0"
+			title="Theme"
+			description="Switch between light, dark, or system theme."
+		/>
+
+		<div class="mt-4 grid grid-cols-3 gap-3">
+			<button
+				v-for="option in options"
+				:key="option.value"
+				type="button"
+				:aria-pressed="colorScheme === option.value"
+				class="grid grid-cols-2 overflow-hidden rounded-4 border focus-visible:focus-ring"
+				:class="
+					colorScheme === option.value
+						? 'border-outline-gray-6'
+						: 'border-outline-gray-2 hover:border-outline-gray-4'
+				"
+				@click="setColorScheme(option.value)"
+			>
+				<span
+					v-for="(pane, index) in option.panes"
+					:key="pane"
+					class="flex overflow-hidden pl-2 pt-2 sm:pl-4 sm:pt-3"
+					:class="[
+							index === 0
+								? 'bg-surface-gray-1'
+								: 'border-l border-outline-gray-2 bg-surface-gray-2',
+							option.panes.length === 2
+								? 'aspect-[8/7]'
+								: 'col-span-2 aspect-[16/7]',
+						]"
+				>
+					<span
+						class="grid shrink-0 grid-cols-[28%_1fr] grid-rows-[auto_1fr] overflow-hidden rounded-tl-1 shadow-lg"
+						:class="[tones[pane].page, tones[pane].border]"
+						:style="{ width: `${option.panes.length * 100}%` }"
+					>
+						<span
+							class="col-span-2 flex border-b p-1"
+							:class="tones[pane].border"
+						>
+							<svg class="h-1">
+								<circle cx="2" cy="2" r="2" class="fill-red-500" />
+								<circle cx="8" cy="2" r="2" class="fill-amber-500" />
+								<circle cx="14" cy="2" r="2" class="fill-green-500" />
+							</svg>
+						</span>
+
+						<span
+							class="flex flex-col gap-1 border-r p-1"
+							:class="[tones[pane].sidebar, tones[pane].border]"
+						>
+							<span
+								v-for="bar in 3"
+								:key="bar"
+								class="h-[3px] rounded-1"
+								:class="tones[pane].bar"
+							/>
+						</span>
+
+						<span class="grid content-start grid-cols-2 gap-1 p-1">
+							<span
+								v-for="card in 4"
+								:key="card"
+								class="h-3 rounded-1 border sm:h-4"
+								:class="[tones[pane].card, tones[pane].border]"
+							/>
+						</span>
+					</span>
+				</span>
+
+				<span
+					class="col-span-full flex items-center justify-between border-t border-outline-gray-2 px-1.5 py-1 sm:px-2 sm:py-1.5"
+				>
+					<span class="text-p-xs sm:text-p-sm text-ink-gray-7">
+						{{ option.label }}
+					</span>
+					<span
+						class="size-3 rounded-full"
+						:class="
+							colorScheme === option.value
+								? 'border-4 border-outline-gray-7'
+								: 'border border-outline-gray-3'
+						"
+					/>
+				</span>
+			</button>
+		</div>
+	</div>
+</template>
diff --git a/dashboard/src/components/settings/forms/ProfileForm.vue b/dashboard/src/components/settings/forms/ProfileForm.vue
index c390ac8de..bbe7d5def 100644
--- a/dashboard/src/components/settings/forms/ProfileForm.vue
+++ b/dashboard/src/components/settings/forms/ProfileForm.vue
@@ -101,23 +101,20 @@ function resetPassword(): void {
 </script>
 
 <template>
-	<div class="space-y-6">
+	<div class="mt-6 space-y-6">
 		<!-- Photo row, no label — the avatar speaks for itself. The control is
 		     disabled until the upload endpoint lands. -->
-		<div class="space-y-1.5">
-			<div class="flex items-center gap-3">
-				<Avatar
-					:image="profile?.user_image ?? undefined"
-					:label="name.trim() || profile?.full_name || profile?.user || ''"
-					size="2xl"
-					class="shrink-0"
-				/>
-				<Button
-					:label="profile?.user_image ? 'Change photo' : 'Upload photo'"
-					disabled
-				/>
-			</div>
-
+		<div class="flex items-center gap-3">
+			<Avatar
+				:image="profile?.user_image ?? undefined"
+				:label="name.trim() || profile?.full_name || profile?.user || ''"
+				size="2xl"
+				class="shrink-0"
+			/>
+			<Button
+				:label="profile?.user_image ? 'Change photo' : 'Upload photo'"
+				disabled
+			/>
 		</div>
 
 		<div class="flex items-end gap-2">
diff --git a/dashboard/src/components/settings/forms/TeamForm.vue b/dashboard/src/components/settings/forms/TeamForm.vue
index d68ce8a24..d4b9d2289 100644
--- a/dashboard/src/components/settings/forms/TeamForm.vue
+++ b/dashboard/src/components/settings/forms/TeamForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, Button, Dialog, FormControl } from 'frappe-ui'
+import { Avatar, Button, Dialog, FormControl, SettingsRow } from 'frappe-ui'
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCapabilities } from '@/composables/useCapabilities'
@@ -8,8 +8,9 @@ import { settingsOpen } from '@/composables/useSettings'
 import { useTeamSettings } from '@/composables/useTeamSettings'
 
 // The active team's own settings — rename (team:edit) and the delete row
-// (team:delete). Ownership transfer is NOT here: it lives on the member's ⋯
-// menu in the roster, where the new owner is picked in context.
+// (team:delete). Switching teams is its own dialog (SwitchTeamDialog).
+// Ownership transfer is NOT here: it lives on the member's ⋯ menu in the
+// roster, where the new owner is picked in context.
 const router = useRouter()
 const { activeTeamLabel, activeTeamLogo } = useSession()
 const { saving, rename, deleteTeam } = useTeamSettings()
@@ -59,29 +60,24 @@ async function onDelete(): Promise<void> {
 </script>
 
 <template>
-	<div>
+	<div class="mt-6">
 		<div class="space-y-6">
 			<!-- Logo row, no label — the avatar speaks for itself. The control is
 			     disabled until the upload endpoint lands. -->
-			<div class="space-y-1.5">
-				<div class="flex items-center gap-3">
-					<!-- Square: this is the organisation, not a person. -->
-					<Avatar
-						:image="activeTeamLogo ?? undefined"
-						:label="name.trim() || activeTeamLabel"
-						size="2xl"
-						shape="square"
-						class="shrink-0"
-					/>
-					<Button
-						v-if="canEditTeam"
-						:label="activeTeamLogo ? 'Change logo' : 'Upload logo'"
-						disabled
-					/>
-				</div>
-				<p v-if="canEditTeam" class="text-p-sm text-ink-gray-5">
-					Logo uploads land in a follow-up.
-				</p>
+			<div class="flex items-center gap-3">
+				<!-- Square: this is the organisation, not a person. -->
+				<Avatar
+					:image="activeTeamLogo ?? undefined"
+					:label="name.trim() || activeTeamLabel"
+					size="2xl"
+					shape="square"
+					class="shrink-0"
+				/>
+				<Button
+					v-if="canEditTeam"
+					:label="activeTeamLogo ? 'Change logo' : 'Upload logo'"
+					disabled
+				/>
 			</div>
 
 			<div class="flex items-end gap-2">
@@ -107,26 +103,19 @@ async function onDelete(): Promise<void> {
 			</p>
 		</div>
 
-		<!-- Deleting is rare and destructive: it goes last, past a rule, on the
-		     line with its own explanation. -->
-		<div
-			v-if="canDeleteTeam"
-			class="mt-10 flex items-start gap-4 border-t border-outline-gray-1 pt-3.5"
-		>
-			<div class="min-w-0 flex-1">
-				<p class="text-base font-medium text-ink-gray-9">Delete team</p>
-				<p class="mt-1 text-base leading-5 text-ink-gray-6">
-					Permanently removes the team and everyone's access. Servers and sites
-					must be removed first.
-				</p>
-			</div>
-			<Button
-				theme="red"
-				variant="subtle"
-				label="Delete"
-				class="shrink-0"
-				@click="confirmDelete = true"
-			/>
+		<!-- Deleting is rare and destructive: it goes last, past a rule. -->
+		<div v-if="canDeleteTeam" class="mt-8 border-t border-outline-gray-1">
+			<SettingsRow
+				title="Delete team"
+				description="Permanently removes the team and everyone's access. Servers and sites must be removed first."
+			>
+				<Button
+					theme="red"
+					variant="subtle"
+					label="Delete"
+					@click="confirmDelete = true"
+				/>
+			</SettingsRow>
 		</div>
 
 		<Dialog
diff --git a/dashboard/src/components/settings/forms/TeamsForm.vue b/dashboard/src/components/settings/forms/TeamsForm.vue
deleted file mode 100644
index 4b1e8a83b..000000000
--- a/dashboard/src/components/settings/forms/TeamsForm.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { Avatar, Button, TextInput } from 'frappe-ui'
-import { nextTick, ref } from 'vue'
-import TeamList from '@/components/team/TeamList.vue'
-import { useCreateTeam } from '@/composables/useCreateTeam'
-import { closeSettings } from '@/composables/useSettings'
-
-// Your teams, with the active one checked. Picking a row offers to switch and
-// switching re-points the console — settings stays open, and the team-scoped
-// tabs (Team settings, Notifications) follow the team you moved to rather than
-// going stale.
-//
-// Creating one happens right here rather than in a dialog on top of a dialog:
-// a name, an optional logo, and you land in the new team with settings closed.
-const { teamName, name, duplicate, canSubmit, saving, submit, reset } =
-	useCreateTeam()
-
-const creating = ref(false)
-const createRow = ref<HTMLElement | null>(null)
-
-// Revealing the field should put the cursor in it. `autofocus` won't do: the
-// browser only honours it for content present when the dialog opens, not for a
-// field revealed later.
-function startCreating(): void {
-	creating.value = true
-	nextTick(() => createRow.value?.querySelector('input')?.focus())
-}
-
-function cancelCreating(): void {
-	creating.value = false
-	reset()
-}
-
-// Creating a team switches you into it (useTeamSettings), so there's nothing
-// left to do here — close settings and let the console land in the new team.
-async function onSubmit(): Promise<void> {
-	if (!(await submit())) return
-	creating.value = false
-	closeSettings()
-}
-</script>
-
-<template>
-	<div>
-		<TeamList />
-
-		<!-- Subtle, on its own line under the list: creating a team is a real
-		     offer but not what most visits here are for. -->
-		<Button
-			v-if="!creating"
-			class="mt-3"
-			variant="subtle"
-			icon-left="lucide-plus"
-			label="Create team"
-			@click="startCreating"
-		/>
-
-		<div v-else ref="createRow" class="mt-3">
-			<label for="new-team-name" class="block text-xs text-ink-gray-5">
-				Team name
-			</label>
-			<!-- The mark is a control, not a preview: click it to pick a logo.
-			     Until you do, it shows the initials the team would wear in the
-			     list above. -->
-			<div class="mt-1.5 flex items-center gap-2">
-				<button
-					type="button"
-					class="relative size-8 shrink-0 rounded-5"
-					aria-label="Adding a team logo lands in a follow-up"
-					disabled
-				>
-					<Avatar v-if="name" :label="name" size="xl" shape="square" />
-					<span
-						v-else
-						class="grid size-8 place-items-center rounded-5 bg-surface-gray-2"
-					>
-						<span
-							class="lucide-users size-4 text-ink-gray-4"
-							aria-hidden="true"
-						/>
-					</span>
-				</button>
-				<TextInput
-					id="new-team-name"
-					v-model="teamName"
-					class="min-w-0 flex-1"
-					size="md"
-					placeholder="e.g. Acme Production"
-					autocomplete="off"
-					@keyup.enter="onSubmit"
-					@keyup.esc="cancelCreating"
-				/>
-			</div>
-			<p
-				class="mt-1.5 text-p-sm"
-				:class="duplicate ? 'text-ink-red-5' : 'text-ink-gray-5'"
-			>
-				{{ duplicate
-						? `You already have a team called “${name}”`
-						: "You'll be the owner, and we'll switch you to it" }}
-			</p>
-
-			<div class="mt-3 flex items-center gap-2">
-				<Button
-					variant="solid"
-					label="Create team"
-					:loading="saving"
-					:disabled="!canSubmit"
-					@click="onSubmit"
-				/>
-				<Button variant="ghost" label="Cancel" @click="cancelCreating" />
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/dashboard/src/components/team/SwitchTeamDialog.vue b/dashboard/src/components/team/SwitchTeamDialog.vue
new file mode 100644
index 000000000..fe32a77f1
--- /dev/null
+++ b/dashboard/src/components/team/SwitchTeamDialog.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { Avatar, Dialog, TextInput } from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import { useAuth } from '@/composables/useAuth'
+import { useSession } from '@/composables/useSession'
+import type { Team } from '@/types/api'
+import CreateTeamDialog from './CreateTeamDialog.vue'
+
+// The team switcher. Every row carries the same two lines — name, then your
+// standing in it — so the list keeps one rhythm and the check alone says where
+// you are. "Create team" is the last row rather than a button below the list:
+// same shape, so it reads as one more place you could go.
+const open = defineModel<boolean>('open')
+
+const { teams, activeTeam, setActiveTeam } = useSession()
+const { currentUser } = useAuth()
+
+const query = ref('')
+watch(open, () => {
+	query.value = ''
+})
+
+// Search earns its space only once the list outgrows a glance.
+const searchable = computed(() => teams.value.length > 6)
+const visible = computed(() => {
+	const q = query.value.trim().toLowerCase()
+	if (!q) return teams.value
+	return teams.value.filter((team) => team.label.toLowerCase().includes(q))
+})
+
+const standing = (team: Team) =>
+	team.owner === currentUser.value ? 'Owner' : 'Member'
+
+const selectTeam = (team: Team) => {
+	setActiveTeam(team.name)
+	open.value = false
+}
+
+const createTeamOpen = ref(false)
+const createTeam = () => {
+	open.value = false
+	createTeamOpen.value = true
+}
+</script>
+
+<template>
+	<Dialog v-model="open" title="Switch team" size="sm">
+		<div class="space-y-3">
+			<TextInput
+				v-if="searchable"
+				v-model="query"
+				size="md"
+				placeholder="Search teams"
+				autofocus
+			>
+				<template #prefix>
+					<span
+						class="lucide-search size-4 text-ink-gray-5"
+						aria-hidden="true"
+					/>
+				</template>
+			</TextInput>
+
+			<!-- Teams sit tight together; "Create team" gets the outer gap so it reads
+			     as a separate offer rather than one more team you belong to. -->
+			<div class="space-y-3">
+				<!-- Negative margin + matching padding so the scrollbar rides the modal
+				     edge instead of floating inside the content column. The create row
+				     sits outside the scroller so it stays reachable at any length. -->
+				<div
+					class="-mr-4 max-h-80 space-y-1 overflow-y-auto pr-4 sm:-mr-6 sm:pr-6"
+				>
+					<button
+						v-for="team in visible"
+						:key="team.name"
+						type="button"
+						class="flex w-full items-center gap-3 rounded-4 border px-3 py-2.5 text-left transition-colors duration-150 ease-in-out"
+						:class="
+							team.name === activeTeam
+								? 'border-outline-gray-3'
+								: 'border-transparent hover:bg-surface-gray-2'
+						"
+						@click="selectTeam(team)"
+					>
+						<Avatar
+							:image="team.logo ?? undefined"
+							:label="team.label"
+							size="xl"
+							shape="square"
+						/>
+
+						<div class="min-w-0 flex-1">
+							<div class="truncate text-base-medium text-ink-gray-8">
+								{{ team.label }}
+							</div>
+							<div class="text-p-sm text-ink-gray-5">{{ standing(team) }}</div>
+						</div>
+
+						<span
+							v-if="team.name === activeTeam"
+							class="lucide-check size-4 shrink-0 text-ink-gray-7"
+							aria-hidden="true"
+						/>
+					</button>
+
+					<p
+						v-if="!visible.length"
+						class="px-3 py-8 text-center text-p-sm text-ink-gray-5"
+					>
+						No team matches “{{ query.trim() }}”
+					</p>
+				</div>
+
+				<button
+					type="button"
+					class="flex w-full items-center gap-3 rounded-4 border border-transparent px-3 py-2.5 text-left transition-colors duration-150 ease-in-out hover:bg-surface-gray-2"
+					@click="createTeam"
+				>
+					<span
+						class="grid size-8 shrink-0 place-items-center rounded-3 bg-surface-gray-2"
+					>
+						<span
+							class="lucide-plus size-4 text-ink-gray-6"
+							aria-hidden="true"
+						/>
+					</span>
+					<div class="min-w-0 flex-1">
+						<div class="text-base-medium text-ink-gray-8">Create team</div>
+						<div class="text-p-sm text-ink-gray-5">
+							Separate servers, members and billing
+						</div>
+					</div>
+				</button>
+			</div>
+		</div>
+	</Dialog>
+
+	<CreateTeamDialog v-model:open="createTeamOpen" />
+</template>
diff --git a/dashboard/src/composables/useAppMenu.ts b/dashboard/src/composables/useAppMenu.ts
index 0a7e5c58a..3363681a1 100644
--- a/dashboard/src/composables/useAppMenu.ts
+++ b/dashboard/src/composables/useAppMenu.ts
@@ -2,11 +2,12 @@ import { type ColorScheme, useColorScheme } from 'frappe-ui'
 import { computed, h } from 'vue'
 import { useAuth } from '@/composables/useAuth'
 import { openSettings } from '@/composables/useSettings'
+import { openTeamSwitcher } from '@/composables/useTeamSwitcher'
 
 const themeOptions: { label: string; icon: string; value: ColorScheme }[] = [
+	{ label: 'System', icon: 'lucide-monitor', value: 'system' },
 	{ label: 'Light', icon: 'lucide-sun', value: 'light' },
 	{ label: 'Dark', icon: 'lucide-moon', value: 'dark' },
-	{ label: 'System', icon: 'lucide-monitor', value: 'system' },
 ]
 
 export const useAppMenu = () => {
@@ -22,7 +23,7 @@ export const useAppMenu = () => {
 		{
 			label: 'Switch team',
 			icon: 'lucide-repeat',
-			onClick: () => openSettings('teams'),
+			onClick: openTeamSwitcher,
 		},
 		{
 			label: 'Theme',
diff --git a/dashboard/src/composables/useSettings.ts b/dashboard/src/composables/useSettings.ts
index f4fe92be7..33dc6371d 100644
--- a/dashboard/src/composables/useSettings.ts
+++ b/dashboard/src/composables/useSettings.ts
@@ -1,3 +1,4 @@
+import { useKeyboardShortcut } from 'frappe-ui'
 import type { Component } from 'vue'
 import { defineAsyncComponent, ref } from 'vue'
 import { MOBILE_BREAKPOINT } from '@/composables/useIsMobile'
@@ -11,11 +12,8 @@ const ProfileForm = defineAsyncComponent(
 const NotificationsForm = defineAsyncComponent(
 	() => import('@/components/settings/forms/NotificationsForm.vue'),
 )
-const AppearanceForm = defineAsyncComponent(
-	() => import('@/components/settings/forms/AppearanceForm.vue'),
-)
-const TeamsForm = defineAsyncComponent(
-	() => import('@/components/settings/forms/TeamsForm.vue'),
+const PreferencesForm = defineAsyncComponent(
+	() => import('@/components/settings/forms/PreferencesForm.vue'),
 )
 const TeamForm = defineAsyncComponent(
 	() => import('@/components/settings/forms/TeamForm.vue'),
@@ -26,17 +24,12 @@ const TeamForm = defineAsyncComponent(
 // team's settings. Callers name the tab they want and this decides how to show
 // it — a dialog on desktop, a real page on mobile, where a modal over a 375px
 // screen is just a page with the edges shaved off.
-export type SettingsTab =
-	| 'profile'
-	| 'notifications'
-	| 'appearance'
-	| 'teams'
-	| 'team'
+export type SettingsTab = 'profile' | 'notifications' | 'preferences' | 'team'
 
 export interface SettingsTabDef {
 	value: SettingsTab
 	/** Which section of the sidebar the entry sits in. */
-	group: 'Account' | 'Team'
+	group: 'Account' | 'Administration'
 	/** Sidebar entry and mobile row label. */
 	label: string
 	/** Lucide class for the entry; the profile tab uses your avatar instead. */
@@ -74,29 +67,20 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		requires: 'member',
 	},
 	{
-		value: 'appearance',
+		value: 'preferences',
 		group: 'Account',
-		label: 'Appearance',
-		icon: 'lucide-sun-moon',
-		title: 'Appearance',
-		description: 'How the dashboard looks.',
-		component: AppearanceForm,
-	},
-	{
-		value: 'teams',
-		group: 'Team',
-		label: 'Teams',
-		icon: 'lucide-users',
-		title: 'Your teams',
-		description: 'Switch teams or create one.',
-		component: TeamsForm,
+		label: 'Preferences',
+		icon: 'lucide-settings-2',
+		title: 'Preferences',
+		description: 'Manage your personal preferences.',
+		component: PreferencesForm,
 	},
 	{
 		value: 'team',
-		group: 'Team',
-		label: 'Manage',
-		icon: 'lucide-building-2',
-		title: 'Team settings',
+		group: 'Administration',
+		label: 'Team',
+		icon: 'lucide-users',
+		title: 'Team',
 		description: 'Rename or delete this team.',
 		component: TeamForm,
 		requires: 'teamAdmin',
@@ -134,3 +118,13 @@ export const closeSettings = (): void => {
 		router.replace('/settings')
 	}
 }
+
+export const useSettingsShortcut = (): void => {
+	useKeyboardShortcut({
+		combo: 'Mod+Comma',
+		description: 'Open settings',
+		group: 'General',
+		allowInInput: true,
+		handler: () => openSettings(),
+	})
+}
diff --git a/dashboard/src/composables/useTeamSwitcher.ts b/dashboard/src/composables/useTeamSwitcher.ts
new file mode 100644
index 000000000..37e47bbf0
--- /dev/null
+++ b/dashboard/src/composables/useTeamSwitcher.ts
@@ -0,0 +1,7 @@
+import { ref } from 'vue'
+
+export const teamSwitcherOpen = ref(false)
+
+export const openTeamSwitcher = (): void => {
+	teamSwitcherOpen.value = true
+}
diff --git a/dashboard/src/layouts/AppShell.vue b/dashboard/src/layouts/AppShell.vue
index 32d40adc2..53f615578 100644
--- a/dashboard/src/layouts/AppShell.vue
+++ b/dashboard/src/layouts/AppShell.vue
@@ -13,6 +13,7 @@ import { useRoute } from 'vue-router'
 import Sidebar from '@/components/navigation/Sidebar.vue'
 import NotificationsPanel from '@/components/notifications/NotificationsPanel.vue'
 import SettingsModal from '@/components/settings/SettingsModal.vue'
+import SwitchTeamDialog from '@/components/team/SwitchTeamDialog.vue'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
 import { useIsMobile } from '@/composables/useIsMobile'
 import { useNotificationsRealtime } from '@/composables/useNotifications'
@@ -21,6 +22,8 @@ import {
 	searchOpen,
 	useSearchShortcut,
 } from '@/composables/useSearch'
+import { useSettingsShortcut } from '@/composables/useSettings'
+import { teamSwitcherOpen } from '@/composables/useTeamSwitcher'
 
 // The search palette builds an index off several team-scoped feeds (servers,
 // members, invoices…). Mount it lazily on first open so those fetches never fire
@@ -32,6 +35,7 @@ const searchMounted = ref(false)
 
 useNotificationsRealtime()
 useSearchShortcut()
+useSettingsShortcut()
 
 // Keep it mounted once opened so re-opening is instant and the exit transition plays.
 watch(searchOpen, (isOpen) => {
@@ -127,4 +131,5 @@ const breadcrumbs = computed(
 	     dialog never mounts there. -->
 	<SettingsModal v-if="!isMobile" />
 	<SearchDialog v-if="searchMounted" v-model:open="searchOpen" />
+	<SwitchTeamDialog v-model:open="teamSwitcherOpen" />
 </template>
diff --git a/dashboard/src/pages/settings/SettingsDetailPage.vue b/dashboard/src/pages/settings/SettingsDetailPage.vue
index 161d24f77..ab97b2e10 100644
--- a/dashboard/src/pages/settings/SettingsDetailPage.vue
+++ b/dashboard/src/pages/settings/SettingsDetailPage.vue
@@ -49,7 +49,7 @@ watch(
 <template>
 	<div v-if="tab && allowed" class="h-full overflow-y-auto">
 		<div class="mx-auto max-w-2xl px-4 py-5 sm:px-6">
-			<header class="mb-6">
+			<header>
 				<h1 class="text-lg-semibold text-ink-gray-8">{{ tab.title }}</h1>
 				<p
 					v-if="tab.description"
diff --git a/dashboard/src/pages/settings/SettingsPage.vue b/dashboard/src/pages/settings/SettingsPage.vue
index c6b04ce25..bc346e625 100644
--- a/dashboard/src/pages/settings/SettingsPage.vue
+++ b/dashboard/src/pages/settings/SettingsPage.vue
@@ -11,14 +11,14 @@ import {
 } from '@/composables/useSettings'
 
 // Mobile's settings hub: the same tabs the desktop dialog lists in its sidebar,
-// in the same two sections, as rows that push a page. Sign out stays here at the
-// bottom — it ends the session rather than settling into a tab.
+// in the same sections, as rows that push a page. Sign out stays here at the bottom — it ends the
+// session rather than settling into a tab.
 const { activeTeamLabel } = useSession()
 const { isMember, canEditTeam, canDeleteTeam } = useCapabilities()
 const { currentUser, logoutAndRedirect } = useAppMenu()
 
-const groups = computed(() => {
-	const available = SETTINGS_TABS.filter((tab) => {
+const available = computed(() =>
+	SETTINGS_TABS.filter((tab) => {
 		if (tab.requires === 'member') return isMember.value
 		if (tab.requires === 'teamAdmin')
 			return canEditTeam.value || canDeleteTeam.value
@@ -30,16 +30,18 @@ const groups = computed(() => {
 		current:
 			tab.value === 'profile'
 				? currentUser.value
-				: tab.value === 'teams'
+				: tab.value === 'team'
 					? activeTeamLabel.value
 					: '',
-	}))
+	})),
+)
 
-	const order: SettingsTabDef['group'][] = ['Account', 'Team']
+const groups = computed(() => {
+	const order: SettingsTabDef['group'][] = ['Account', 'Administration']
 	return order
 		.map((group) => ({
 			label: group,
-			rows: available.filter((row) => row.tab.group === group),
+			rows: available.value.filter((row) => row.tab.group === group),
 		}))
 		.filter((group) => group.rows.length > 0)
 })

From b6d2f9f2289fbd0d2e7560b3b86ec40d02968fa4 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 09:49:27 +0530
Subject: [PATCH 10/23] feat(ui): table component

---
 dashboard/src/components/common/Table.vue | 75 +++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 dashboard/src/components/common/Table.vue

diff --git a/dashboard/src/components/common/Table.vue b/dashboard/src/components/common/Table.vue
new file mode 100644
index 000000000..7eb59a7e4
--- /dev/null
+++ b/dashboard/src/components/common/Table.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts" generic="Row extends Record<string, any>">
+import Scrollbar from '@/components/common/Scrollbar.vue'
+
+interface Column {
+	key: string
+	label: string
+	class?: string
+}
+
+interface Props {
+	columns: Column[]
+	rows: Row[]
+	height?: string
+}
+
+defineProps<Props>()
+
+defineSlots<{
+	[key: string]: (props: { row: Row; column: Column; index: number }) => any
+}>()
+</script>
+
+<template>
+	<Scrollbar class="min-h-0" :class="height || 'flex-1'">
+		<table class="min-w-full border-separate border-spacing-0 text-left">
+			<thead class="sticky top-0 z-10">
+				<tr>
+					<th
+						v-for="column in columns"
+						:key="column.key"
+						class="whitespace-nowrap bg-surface-gray-2 px-4 py-2 text-sm font-normal text-ink-gray-5"
+						:class="column.class"
+					>
+						{{ column.label }}
+					</th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="(row, index) in rows" :key="row.id ?? index">
+					<td
+						v-for="column in columns"
+						:key="column.key"
+						class="h-10 whitespace-nowrap px-4"
+						:class="column.class"
+					>
+						<slot :name="column.key" :row="row" :column="column" :index="index">
+							{{ row[column.key] }}
+						</slot>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</Scrollbar>
+</template>
+
+<style scoped>
+tbody tr:not(:last-child) td {
+	@apply border-b border-outline-gray-1;
+}
+
+tbody tr:hover td {
+	@apply bg-surface-gray-1;
+}
+
+th:first-child,
+tbody tr:hover td:first-child {
+	@apply rounded-l-4;
+}
+
+th:last-child,
+tbody tr:hover td:last-child {
+	@apply rounded-r-4;
+}
+</style>

From 1c558202e71050cb7c329ff10b5f9a760873aff8 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 09:49:27 +0530
Subject: [PATCH 11/23] fix(ui): darker dialog surface

---
 dashboard/src/components/settings/SettingsModal.vue | 2 +-
 dashboard/src/style.css                             | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/components/settings/SettingsModal.vue b/dashboard/src/components/settings/SettingsModal.vue
index 4ea30aa89..62dc7dba9 100644
--- a/dashboard/src/components/settings/SettingsModal.vue
+++ b/dashboard/src/components/settings/SettingsModal.vue
@@ -60,7 +60,7 @@ watch(tabs, (available) => {
 	     (`defineModel('open')`) and declares no `modelValue`, so a bare v-model
 	     binds a prop nothing reads and the dialog never opens. -->
 	<SettingsDialog v-model:open="settingsOpen" v-model:tab="settingsTab">
-		<SettingsSidebar>
+		<SettingsSidebar class="!bg-surface-elevation-1">
 			<SettingsNavGroup
 				v-for="group in groups"
 				:key="group.label"
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 2c752fea2..f815c254b 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -6,3 +6,8 @@
 body {
 	@apply bg-surface-base text-ink-gray-9 text-base;
 }
+
+.dialog-content,
+.dialog-content .bg-surface-elevation-1 {
+	@apply bg-surface-base;
+}

From 7383a3197670a1045186a9853d2f55ead68e6928 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 09:49:27 +0530
Subject: [PATCH 12/23] feat(ui): leave team from the switcher

---
 dashboard/src/api/methods.ts                  |  18 +-
 .../components/settings/forms/TeamForm.vue    |  19 +-
 .../src/components/team/SwitchTeamDialog.vue  | 185 ++++++++----------
 dashboard/src/composables/useSettings.ts      |  20 +-
 dashboard/src/composables/useTeamSettings.ts  |  80 +++++++-
 dashboard/src/layouts/AppShell.vue            |  12 --
 dashboard/src/types/api.ts                    |   3 +
 7 files changed, 164 insertions(+), 173 deletions(-)

diff --git a/dashboard/src/api/methods.ts b/dashboard/src/api/methods.ts
index 21ea07d4e..de0616649 100644
--- a/dashboard/src/api/methods.ts
+++ b/dashboard/src/api/methods.ts
@@ -1,18 +1,13 @@
-// Whitelisted method paths in one place. `method(path)` builds the v2 method URL
-// the data-fetching composables call. These are the live, capability-gated,
-// team-scoped endpoints under central/api/.
 
 export function method(path: string): string {
 	return `/api/v2/method/${path}`
 }
 
 export const API = {
-	// ── Identity / capability IAM (central.api.identity) ──
 	myTeams: 'central.api.identity.my_teams',
 	myCapabilities: 'central.api.identity.my_capabilities',
 	myInvitations: 'central.api.identity.my_invitations',
 
-	// ── Team roster, roles & invitations (central.api.teams) ──
 	listTeamMembers: 'central.api.teams.list_team_members',
 	listTeamRoles: 'central.api.teams.list_team_roles',
 	listCapabilities: 'central.api.teams.list_capabilities',
@@ -24,6 +19,7 @@ export const API = {
 	changePassword: 'central.api.auth.change_password',
 	transferOwnership: 'central.api.teams.transfer_team_ownership',
 	deleteTeam: 'central.api.teams.delete_team',
+	leaveTeam: 'central.api.teams.leave_team',
 	inviteTeamMember: 'central.api.teams.invite_team_member',
 	setTeamMemberRoles: 'central.api.teams.set_team_member_roles',
 	setTeamMemberStatus: 'central.api.teams.set_team_member_status',
@@ -35,7 +31,6 @@ export const API = {
 	acceptInvitation: 'central.api.teams.accept_invitation',
 	declineInvitation: 'central.api.teams.decline_invitation',
 
-	// ── Servers (central.api.servers) ──
 	registry: 'central.api.servers.registry',
 	listInstances: 'central.api.servers.list_instances',
 	refreshAssets: 'central.api.servers.refresh_assets',
@@ -47,9 +42,6 @@ export const API = {
 	terminateServer: 'central.api.servers.terminate_server',
 	serverOverview: 'central.api.servers.server_overview',
 
-	// ── Managed add-on services (central.services.api.dashboard) ──
-	// service:view for the reads, service:manage for the mutations + key reveal.
-	// Per-site enable/disable is a bench (Pilot) surface, not a console method.
 	listOffers: 'central.services.api.dashboard.list_offers',
 	serviceInstance: 'central.services.api.dashboard.get_instance',
 	activateService: 'central.services.api.dashboard.activate_service',
@@ -62,31 +54,24 @@ export const API = {
 	revealBucketKey: 'central.services.api.dashboard.reveal_bucket_key',
 	revokeBucketKey: 'central.services.api.dashboard.revoke_bucket_key',
 
-	// ── Auth / SMB signup (central.api.auth) ──
 	signUp: 'central.api.auth.sign_up',
 	verifySignup: 'central.api.auth.verify_signup',
 	resendSignupCode: 'central.api.auth.resend_signup_code',
 
-	// ── Self-serve sites (central.api.sites) ──
 	checkSubdomain: 'central.api.sites.check_subdomain',
 	siteDomain: 'central.api.sites.site_domain',
 	createSite: 'central.api.sites.create_site',
 	getSite: 'central.api.sites.get_site',
 	terminateSite: 'central.api.sites.terminate_site',
 
-	// ── SSO open-in-bench (central.api.sso) ──
 	getBenchLink: 'central.api.sso.get_bench_link',
 
-	// ── Billing catalog (central.billing.api.dashboard.catalog) ──
 	eligiblePlans: 'central.billing.api.dashboard.catalog.get_eligible_plans',
 	composedConfig: 'central.billing.api.dashboard.catalog.get_composed_config',
 	resizeComposedConfig:
 		'central.billing.api.dashboard.catalog.resize_composed_config',
 	resizeServer: 'central.billing.api.dashboard.catalog.resize_server',
 
-	// ── Billing: reads (central.billing.api.dashboard.*, billing:view) ──
-	// The dashboard package re-exports every submodule fn, so these flat paths are
-	// stable regardless of which module (account/invoices/methods) owns them.
 	teamOverview: 'central.billing.api.dashboard.get_team_overview',
 	forecast: 'central.billing.api.dashboard.get_forecast',
 	trustTier: 'central.billing.api.dashboard.get_trust_tier',
@@ -117,7 +102,6 @@ export const API = {
 	notificationBadge: 'central.notification.api.notification_badge',
 	notificationPreferences: 'central.notification.api.get_user_preferences',
 
-	// ── Billing: mutations (POST, billing:manage) ──
 	payInvoice: 'central.billing.api.dashboard.pay_invoice',
 	payInvoiceCheckout: 'central.billing.api.dashboard.pay_invoice_checkout',
 	confirmInvoiceCheckout:
diff --git a/dashboard/src/components/settings/forms/TeamForm.vue b/dashboard/src/components/settings/forms/TeamForm.vue
index d4b9d2289..ece37c3a2 100644
--- a/dashboard/src/components/settings/forms/TeamForm.vue
+++ b/dashboard/src/components/settings/forms/TeamForm.vue
@@ -7,16 +7,12 @@ import { useSession } from '@/composables/useSession'
 import { settingsOpen } from '@/composables/useSettings'
 import { useTeamSettings } from '@/composables/useTeamSettings'
 
-// The active team's own settings — rename (team:edit) and the delete row
-// (team:delete). Switching teams is its own dialog (SwitchTeamDialog).
-// Ownership transfer is NOT here: it lives on the member's ⋯ menu in the
-// roster, where the new owner is picked in context.
 const router = useRouter()
 const { activeTeamLabel, activeTeamLogo } = useSession()
 const { saving, rename, deleteTeam } = useTeamSettings()
+
 const { canEditTeam, canDeleteTeam } = useCapabilities()
 
-// Switching teams while this is open re-points the form at the new team.
 const name = ref(activeTeamLabel.value)
 watch(activeTeamLabel, (label) => {
 	name.value = label
@@ -30,11 +26,6 @@ async function onSave(): Promise<void> {
 	await rename(name.value.trim())
 }
 
-// — Logo. The row is here but inert: the upload endpoint is held back for a
-// follow-up PR, so the control shows what's coming without pretending to work.
-
-// — Deleting the team. It sits last, under a rule, and the real friction is
-// the confirm step.
 const confirmDelete = ref(false)
 const deleteOptions = computed(() => ({
 	title: 'Delete team',
@@ -62,14 +53,11 @@ async function onDelete(): Promise<void> {
 <template>
 	<div class="mt-6">
 		<div class="space-y-6">
-			<!-- Logo row, no label — the avatar speaks for itself. The control is
-			     disabled until the upload endpoint lands. -->
 			<div class="flex items-center gap-3">
-				<!-- Square: this is the organisation, not a person. -->
 				<Avatar
 					:image="activeTeamLogo ?? undefined"
 					:label="name.trim() || activeTeamLabel"
-					size="2xl"
+					size="xl"
 					shape="square"
 					class="shrink-0"
 				/>
@@ -88,8 +76,6 @@ async function onDelete(): Promise<void> {
 					:disabled="!canEditTeam"
 					@keydown.enter="onSave"
 				/>
-				<!-- Save only exists once there's something to save — an
-				     always-there disabled button is just furniture. -->
 				<Button
 					v-if="canEditTeam && changed"
 					variant="solid"
@@ -103,7 +89,6 @@ async function onDelete(): Promise<void> {
 			</p>
 		</div>
 
-		<!-- Deleting is rare and destructive: it goes last, past a rule. -->
 		<div v-if="canDeleteTeam" class="mt-8 border-t border-outline-gray-1">
 			<SettingsRow
 				title="Delete team"
diff --git a/dashboard/src/components/team/SwitchTeamDialog.vue b/dashboard/src/components/team/SwitchTeamDialog.vue
index fe32a77f1..c8e0f885a 100644
--- a/dashboard/src/components/team/SwitchTeamDialog.vue
+++ b/dashboard/src/components/team/SwitchTeamDialog.vue
@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import { Avatar, Dialog, TextInput } from 'frappe-ui'
+import { Avatar, Badge, Button, Dialog, Dialogs, TextInput } from 'frappe-ui'
 import { computed, ref, watch } from 'vue'
-import { useAuth } from '@/composables/useAuth'
+import RowActionsMenu from '@/components/common/RowActionsMenu.vue'
+import Table from '@/components/common/Table.vue'
 import { useSession } from '@/composables/useSession'
-import type { Team } from '@/types/api'
+import { useTeamSettings } from '@/composables/useTeamSettings'
+import { shortDate } from '@/lib/date'
 import CreateTeamDialog from './CreateTeamDialog.vue'
 
-// The team switcher. Every row carries the same two lines — name, then your
-// standing in it — so the list keeps one rhythm and the check alone says where
-// you are. "Create team" is the last row rather than a button below the list:
-// same shape, so it reads as one more place you could go.
 const open = defineModel<boolean>('open')
 
-const { teams, activeTeam, setActiveTeam } = useSession()
-const { currentUser } = useAuth()
+const { teams, activeTeam } = useSession()
+const { teamColumns, teamRowActions } = useTeamSettings()
 
 const query = ref('')
 watch(open, () => {
 	query.value = ''
 })
 
-// Search earns its space only once the list outgrows a glance.
+watch(activeTeam, () => {
+	open.value = false
+})
+
 const searchable = computed(() => teams.value.length > 6)
 const visible = computed(() => {
 	const q = query.value.trim().toLowerCase()
@@ -28,14 +29,6 @@ const visible = computed(() => {
 	return teams.value.filter((team) => team.label.toLowerCase().includes(q))
 })
 
-const standing = (team: Team) =>
-	team.owner === currentUser.value ? 'Owner' : 'Member'
-
-const selectTeam = (team: Team) => {
-	setActiveTeam(team.name)
-	open.value = false
-}
-
 const createTeamOpen = ref(false)
 const createTeam = () => {
 	open.value = false
@@ -44,96 +37,86 @@ const createTeam = () => {
 </script>
 
 <template>
-	<Dialog v-model="open" title="Switch team" size="sm">
-		<div class="space-y-3">
-			<TextInput
-				v-if="searchable"
-				v-model="query"
-				size="md"
-				placeholder="Search teams"
-				autofocus
-			>
-				<template #prefix>
-					<span
-						class="lucide-search size-4 text-ink-gray-5"
-						aria-hidden="true"
-					/>
-				</template>
-			</TextInput>
+	<Dialog v-model="open" size="2xl" :show-close-button="false">
+		<template #title>
+			<div class="flex items-start justify-between gap-3">
+				<div>
+					<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
+						Switch team
+					</h3>
+					<p class="mt-1 text-p-base text-ink-gray-6">
+						Each team keeps its own servers, members and billing.
+					</p>
+				</div>
+				<Button
+					variant="solid"
+					icon-left="lucide-plus"
+					label="Create"
+					@click="createTeam"
+				/>
+			</div>
+		</template>
 
-			<!-- Teams sit tight together; "Create team" gets the outer gap so it reads
-			     as a separate offer rather than one more team you belong to. -->
-			<div class="space-y-3">
-				<!-- Negative margin + matching padding so the scrollbar rides the modal
-				     edge instead of floating inside the content column. The create row
-				     sits outside the scroller so it stays reachable at any length. -->
-				<div
-					class="-mr-4 max-h-80 space-y-1 overflow-y-auto pr-4 sm:-mr-6 sm:pr-6"
-				>
-					<button
-						v-for="team in visible"
-						:key="team.name"
-						type="button"
-						class="flex w-full items-center gap-3 rounded-4 border px-3 py-2.5 text-left transition-colors duration-150 ease-in-out"
-						:class="
-							team.name === activeTeam
-								? 'border-outline-gray-3'
-								: 'border-transparent hover:bg-surface-gray-2'
-						"
-						@click="selectTeam(team)"
-					>
-						<Avatar
-							:image="team.logo ?? undefined"
-							:label="team.label"
-							size="xl"
-							shape="square"
-						/>
+		<TextInput
+			v-if="searchable"
+			v-model="query"
+			class="mb-4"
+			size="md"
+			placeholder="Search teams"
+			autofocus
+		>
+			<template #prefix>
+				<span class="lucide-search size-4 text-ink-gray-5" aria-hidden="true" />
+			</template>
+		</TextInput>
 
-						<div class="min-w-0 flex-1">
-							<div class="truncate text-base-medium text-ink-gray-8">
-								{{ team.label }}
-							</div>
-							<div class="text-p-sm text-ink-gray-5">{{ standing(team) }}</div>
-						</div>
+		<Table :columns="teamColumns" :rows="visible" height="max-h-80">
+			<template #label="{ row }">
+				<span class="flex items-center gap-2.5">
+					<Avatar
+						:image="row.logo ?? undefined"
+						:label="row.label"
+						shape="square"
+					/>
+					<span class="truncate text-base text-ink-gray-8"
+						>{{ row.label }}</span
+					>
+					<Badge
+						v-if="row.name === activeTeam"
+						label="Current"
+						theme="green"
+						variant="subtle"
+					/>
+				</span>
+			</template>
 
-						<span
-							v-if="team.name === activeTeam"
-							class="lucide-check size-4 shrink-0 text-ink-gray-7"
-							aria-hidden="true"
-						/>
-					</button>
+			<template #role="{ row }">
+				<Badge :label="row.role ?? 'Member'" theme="gray" variant="subtle" />
+			</template>
 
-					<p
-						v-if="!visible.length"
-						class="px-3 py-8 text-center text-p-sm text-ink-gray-5"
-					>
-						No team matches “{{ query.trim() }}”
-					</p>
-				</div>
+			<template #members="{ row }">
+				<span class="text-p-sm text-ink-gray-6">{{ row.members }}</span>
+			</template>
 
-				<button
-					type="button"
-					class="flex w-full items-center gap-3 rounded-4 border border-transparent px-3 py-2.5 text-left transition-colors duration-150 ease-in-out hover:bg-surface-gray-2"
-					@click="createTeam"
+			<template #created="{ row }">
+				<span class="text-p-sm text-ink-gray-5"
+					>{{ shortDate(row.created) }}</span
 				>
-					<span
-						class="grid size-8 shrink-0 place-items-center rounded-3 bg-surface-gray-2"
-					>
-						<span
-							class="lucide-plus size-4 text-ink-gray-6"
-							aria-hidden="true"
-						/>
-					</span>
-					<div class="min-w-0 flex-1">
-						<div class="text-base-medium text-ink-gray-8">Create team</div>
-						<div class="text-p-sm text-ink-gray-5">
-							Separate servers, members and billing
-						</div>
-					</div>
-				</button>
-			</div>
-		</div>
+			</template>
+
+			<template #actions="{ row }">
+				<RowActionsMenu :options="teamRowActions(row)" label="Team actions" />
+			</template>
+		</Table>
+
+		<p
+			v-if="!visible.length"
+			class="px-2 py-8 text-center text-p-sm text-ink-gray-5"
+		>
+			No team matches “{{ query.trim() }}”
+		</p>
 	</Dialog>
 
 	<CreateTeamDialog v-model:open="createTeamOpen" />
+	<Dialogs />
 </template>
diff --git a/dashboard/src/composables/useSettings.ts b/dashboard/src/composables/useSettings.ts
index 33dc6371d..318e1044a 100644
--- a/dashboard/src/composables/useSettings.ts
+++ b/dashboard/src/composables/useSettings.ts
@@ -4,8 +4,6 @@ import { defineAsyncComponent, ref } from 'vue'
 import { MOBILE_BREAKPOINT } from '@/composables/useIsMobile'
 import { router } from '@/router'
 
-// Forms load on demand. Async also keeps this module free of an import cycle:
-// TeamForm calls closeSettings from here.
 const ProfileForm = defineAsyncComponent(
 	() => import('@/components/settings/forms/ProfileForm.vue'),
 )
@@ -19,11 +17,6 @@ const TeamForm = defineAsyncComponent(
 	() => import('@/components/settings/forms/TeamForm.vue'),
 )
 
-// One settings surface for everything that used to be its own modal: your
-// profile, your notification delivery, the theme, your teams, and the active
-// team's settings. Callers name the tab they want and this decides how to show
-// it — a dialog on desktop, a real page on mobile, where a modal over a 375px
-// screen is just a page with the edges shaved off.
 export type SettingsTab = 'profile' | 'notifications' | 'preferences' | 'team'
 
 export interface SettingsTabDef {
@@ -81,21 +74,14 @@ export const SETTINGS_TABS: SettingsTabDef[] = [
 		label: 'Team',
 		icon: 'lucide-users',
 		title: 'Team',
-		description: 'Rename or delete this team.',
+		description: 'Your teams, and settings for the active one.',
 		component: TeamForm,
-		requires: 'teamAdmin',
 	},
 ]
 
 export const settingsOpen = ref(false)
 export const settingsTab = ref<SettingsTab>('profile')
 
-// A one-shot read rather than useIsMobile(): openSettings runs from click
-// handlers outside any component scope, where a media-query listener would have
-// no scope to be torn down with. Same breakpoint, so both agree on what mobile
-// means — the dialog only mounts when useIsMobile says desktop, and routing
-// here on a different threshold would strand the caller on a page with no
-// dialog behind it.
 const onMobile = (): boolean =>
 	window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches
 
@@ -108,10 +94,6 @@ export const openSettings = (tab: SettingsTab = 'profile'): void => {
 	settingsOpen.value = true
 }
 
-// Leave settings, whichever presentation you're in: the dialog closes, and a
-// mobile tab page falls back to the list. Callers that navigate somewhere else
-// themselves (deleting a team lands on Servers) should set `settingsOpen`
-// directly instead, or the two pushes race in the same tick.
 export const closeSettings = (): void => {
 	settingsOpen.value = false
 	if (router.currentRoute.value.path.startsWith('/settings/')) {
diff --git a/dashboard/src/composables/useTeamSettings.ts b/dashboard/src/composables/useTeamSettings.ts
index dcb81a951..725f7ca44 100644
--- a/dashboard/src/composables/useTeamSettings.ts
+++ b/dashboard/src/composables/useTeamSettings.ts
@@ -1,15 +1,12 @@
-import { useCall } from 'frappe-ui'
+import { dialog, useCall } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { API, method } from '@/api/methods'
 import { useAuth } from '@/composables/useAuth'
 import { useCapabilities } from '@/composables/useCapabilities'
 import { useSession } from '@/composables/useSession'
 import { errorToast, successToast } from '@/lib/toast'
+import type { Team } from '@/types/api'
 
-// Team-level mutations for the active team: rename (team:edit), transfer ownership
-// (current owner only), delete (team:delete), and create a new team. Each re-pulls
-// the session (team list / labels) and capabilities so the switcher and every gate
-// reflect the change immediately.
 const renameCall = useCall<
 	{ team_name: string },
 	{ team: string; team_name: string }
@@ -30,6 +27,11 @@ const deleteCall = useCall<{ deleted: boolean }, { team: string }>({
 	method: 'POST',
 	immediate: false,
 })
+const leaveCall = useCall<{ left: boolean }, { team: string }>({
+	url: method(API.leaveTeam),
+	method: 'POST',
+	immediate: false,
+})
 const createCall = useCall<{ name: string }, { team_name: string }>({
 	url: method(API.createTeam),
 	method: 'POST',
@@ -91,10 +93,10 @@ export function useTeamSettings() {
 		)
 	}
 
-	function deleteTeam() {
+	function deleteTeam(team?: string) {
 		return run(
 			deleteCall,
-			{ team: activeTeam.value! },
+			{ team: team ?? activeTeam.value! },
 			async () => {
 				await session.reload()
 				session.setActiveTeam(session.teams.value[0]?.name ?? null)
@@ -104,6 +106,67 @@ export function useTeamSettings() {
 		)
 	}
 
+	const leaveTeam = (team: string) => {
+		return run(
+			leaveCall,
+			{ team },
+			async () => {
+				await session.reload()
+				if (activeTeam.value === team) {
+					session.setActiveTeam(session.teams.value[0]?.name ?? null)
+				}
+				caps.reload()
+			},
+			'You left the team',
+		)
+	}
+
+	const teamColumns = [
+		{ key: 'label', label: 'Name', class: 'w-full' },
+		{ key: 'role', label: 'Role' },
+		{ key: 'members', label: 'Members' },
+		{ key: 'created', label: 'Created' },
+		{ key: 'actions', label: '', class: 'w-10' },
+	]
+
+	const confirmLeave = (team: Team): void => {
+		dialog.danger({
+			title: 'Leave team',
+			message: `You'll lose access to everything in “${team.label}”. An admin can invite you back.`,
+			confirmLabel: 'Leave team',
+			onConfirm: async () => {
+				await leaveTeam(team.name)
+			},
+		})
+	}
+
+	const explainOwnerCantLeave = (team: Team): void => {
+		dialog.confirm({
+			title: 'Transfer ownership first',
+			message: `You own “${team.label}”. Hand it to another member before you leave, or delete the team.`,
+			confirmLabel: 'Got it',
+		})
+	}
+
+	const teamRowActions = (team: Team) => {
+		const owned = team.owner === currentUser.value
+		return [
+			{
+				label: 'Switch team',
+				icon: 'lucide-repeat',
+				condition: () => team.name !== activeTeam.value,
+				onClick: () => session.setActiveTeam(team.name),
+			},
+			{
+				label: 'Leave team',
+				icon: 'lucide-log-out',
+				theme: 'red' as const,
+				onClick: () =>
+					owned ? explainOwnerCantLeave(team) : confirmLeave(team),
+			},
+		]
+	}
+
 	function createTeam(teamName: string) {
 		return run(
 			createCall,
@@ -123,6 +186,9 @@ export function useTeamSettings() {
 		rename,
 		transferOwnership,
 		deleteTeam,
+		leaveTeam,
+		teamColumns,
+		teamRowActions,
 		createTeam,
 	}
 }
diff --git a/dashboard/src/layouts/AppShell.vue b/dashboard/src/layouts/AppShell.vue
index 53f615578..6a318675e 100644
--- a/dashboard/src/layouts/AppShell.vue
+++ b/dashboard/src/layouts/AppShell.vue
@@ -25,9 +25,6 @@ import {
 import { useSettingsShortcut } from '@/composables/useSettings'
 import { teamSwitcherOpen } from '@/composables/useTeamSwitcher'
 
-// The search palette builds an index off several team-scoped feeds (servers,
-// members, invoices…). Mount it lazily on first open so those fetches never fire
-// for a user who never searches; once mounted it stays, so its close animation runs.
 const SearchDialog = defineAsyncComponent(
 	() => import('@/components/search/SearchDialog.vue'),
 )
@@ -37,7 +34,6 @@ useNotificationsRealtime()
 useSearchShortcut()
 useSettingsShortcut()
 
-// Keep it mounted once opened so re-opening is instant and the exit transition plays.
 watch(searchOpen, (isOpen) => {
 	if (isOpen) searchMounted.value = true
 })
@@ -55,8 +51,6 @@ watch(
 	},
 )
 
-// The drawer is mobile-only transient state. Leaving mobile must close it, or it
-// survives the breakpoint as an orphaned sheet teleported into <body>.
 watch(isMobile, (mobile) => {
 	if (!mobile) mobileNavDrawer.value = false
 })
@@ -118,17 +112,11 @@ const breadcrumbs = computed(
 		</div>
 	</DesktopShell>
 
-	<!-- The nav drawer's sheet teleports to <body>, so it lives beside the shells
-	     rather than inside MobileShell, and stays mounted across the breakpoint.
-	     Closing it through `open` lets reka animate out and remove the teleported
-	     node; unmounting it mid-open with the shell would strand that node. -->
 	<BottomSheet v-model:open="mobileNavDrawer">
 		<Sidebar class="p-4" />
 	</BottomSheet>
 
 	<ToastProvider />
-	<!-- Desktop only: on mobile the same tabs are pages (/settings/:tab), so the
-	     dialog never mounts there. -->
 	<SettingsModal v-if="!isMobile" />
 	<SearchDialog v-if="searchMounted" v-model:open="searchOpen" />
 	<SwitchTeamDialog v-model:open="teamSwitcherOpen" />
diff --git a/dashboard/src/types/api.ts b/dashboard/src/types/api.ts
index fb64db892..5d1e402c1 100644
--- a/dashboard/src/types/api.ts
+++ b/dashboard/src/types/api.ts
@@ -19,6 +19,9 @@ export interface Team {
 	/** Public file URL of the team's logo, or null for the initial-letter tint. */
 	logo: string | null
 	owner: string | null
+	role: string | null
+	members: number
+	created: string | null
 }
 
 export type MemberStatus = 'Active' | 'Suspended'

From 2aca017d5de4dcdcbbff210e801249c05931bc32 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 10:46:20 +0530
Subject: [PATCH 13/23] fix(ui): tint the settings sidebar in dark mode only

---
 dashboard/src/components/settings/SettingsModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/settings/SettingsModal.vue b/dashboard/src/components/settings/SettingsModal.vue
index 62dc7dba9..a13c3c84c 100644
--- a/dashboard/src/components/settings/SettingsModal.vue
+++ b/dashboard/src/components/settings/SettingsModal.vue
@@ -60,7 +60,7 @@ watch(tabs, (available) => {
 	     (`defineModel('open')`) and declares no `modelValue`, so a bare v-model
 	     binds a prop nothing reads and the dialog never opens. -->
 	<SettingsDialog v-model:open="settingsOpen" v-model:tab="settingsTab">
-		<SettingsSidebar class="!bg-surface-elevation-1">
+		<SettingsSidebar class="dark:bg-surface-elevation-1">
 			<SettingsNavGroup
 				v-for="group in groups"
 				:key="group.label"

From 7bbbf13d9658ab8c2d2a1a237df068e30900bc17 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 16:39:16 +0530
Subject: [PATCH 14/23] feat(ui): upload and delete controls for photo and logo

---
 .../components/settings/forms/ProfileForm.vue | 39 +++++++++++------
 .../components/settings/forms/TeamForm.vue    | 42 ++++++++++++-------
 2 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/dashboard/src/components/settings/forms/ProfileForm.vue b/dashboard/src/components/settings/forms/ProfileForm.vue
index bbe7d5def..bf9e140d3 100644
--- a/dashboard/src/components/settings/forms/ProfileForm.vue
+++ b/dashboard/src/components/settings/forms/ProfileForm.vue
@@ -102,19 +102,32 @@ function resetPassword(): void {
 
 <template>
 	<div class="mt-6 space-y-6">
-		<!-- Photo row, no label — the avatar speaks for itself. The control is
-		     disabled until the upload endpoint lands. -->
-		<div class="flex items-center gap-3">
-			<Avatar
-				:image="profile?.user_image ?? undefined"
-				:label="name.trim() || profile?.full_name || profile?.user || ''"
-				size="2xl"
-				class="shrink-0"
-			/>
-			<Button
-				:label="profile?.user_image ? 'Change photo' : 'Upload photo'"
-				disabled
-			/>
+		<div>
+			<p class="block text-base text-ink-gray-5">Photo</p>
+			<div class="mt-1.5 flex items-center gap-3">
+				<Avatar
+					:image="profile?.user_image ?? undefined"
+					:label="name.trim() || profile?.full_name || profile?.user || ''"
+					size="3xl"
+					class="size-12 shrink-0"
+				/>
+				<div class="flex flex-col items-start gap-1">
+					<Button
+						size="xs"
+						variant="subtle"
+						icon-left="lucide-upload"
+						:label="profile?.user_image ? 'Change' : 'Upload'"
+					/>
+					<Button
+						v-if="profile?.user_image"
+						size="xs"
+						variant="ghost"
+						theme="red"
+						icon-left="lucide-trash-2"
+						label="Delete"
+					/>
+				</div>
+			</div>
 		</div>
 
 		<div class="flex items-end gap-2">
diff --git a/dashboard/src/components/settings/forms/TeamForm.vue b/dashboard/src/components/settings/forms/TeamForm.vue
index ece37c3a2..ad21bfe29 100644
--- a/dashboard/src/components/settings/forms/TeamForm.vue
+++ b/dashboard/src/components/settings/forms/TeamForm.vue
@@ -53,19 +53,33 @@ async function onDelete(): Promise<void> {
 <template>
 	<div class="mt-6">
 		<div class="space-y-6">
-			<div class="flex items-center gap-3">
-				<Avatar
-					:image="activeTeamLogo ?? undefined"
-					:label="name.trim() || activeTeamLabel"
-					size="xl"
-					shape="square"
-					class="shrink-0"
-				/>
-				<Button
-					v-if="canEditTeam"
-					:label="activeTeamLogo ? 'Change logo' : 'Upload logo'"
-					disabled
-				/>
+			<div v-if="canEditTeam">
+				<p class="block text-base text-ink-gray-5">Logo</p>
+				<div class="mt-1.5 flex items-center gap-3">
+					<Avatar
+						:image="activeTeamLogo ?? undefined"
+						:label="name.trim() || activeTeamLabel"
+						size="3xl"
+						shape="square"
+						class="size-12 shrink-0"
+					/>
+					<div class="flex flex-col items-start gap-1">
+						<Button
+							size="xs"
+							variant="subtle"
+							icon-left="lucide-upload"
+							:label="activeTeamLogo ? 'Change' : 'Upload'"
+						/>
+						<Button
+							v-if="activeTeamLogo"
+							size="xs"
+							variant="ghost"
+							theme="red"
+							icon-left="lucide-trash-2"
+							label="Delete"
+						/>
+					</div>
+				</div>
 			</div>
 
 			<div class="flex items-end gap-2">
@@ -92,7 +106,7 @@ async function onDelete(): Promise<void> {
 		<div v-if="canDeleteTeam" class="mt-8 border-t border-outline-gray-1">
 			<SettingsRow
 				title="Delete team"
-				description="Permanently removes the team and everyone's access. Servers and sites must be removed first."
+				description="Permanently delete this team. Remove its servers and sites first."
 			>
 				<Button
 					theme="red"

From a6911b4d3aa667cf43ef88a00f2e12db3529c9d7 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 16:39:39 +0530
Subject: [PATCH 15/23] feat(teams): let a member leave a team

---
 central/api/teams.py                  |  6 ++++++
 central/central/doctype/team/team.py  | 24 +++++++++++++++++++++++-
 central/tests/test_team_management.py | 16 ++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/central/api/teams.py b/central/api/teams.py
index 6250af242..cb1deda26 100644
--- a/central/api/teams.py
+++ b/central/api/teams.py
@@ -235,6 +235,12 @@ def remove_team_member(team: str, user: str) -> dict:
 	return {"team": team, "user": user, "removed": True}
 
 
+@frappe.whitelist(methods=["POST"])
+def leave_team(team: str) -> dict:
+	frappe.get_doc("Team", team).leave()
+	return {"team": team, "left": True}
+
+
 @frappe.whitelist(methods=["POST"])
 @require_capability("team:manage_members", "You can't manage roles for this team.")
 def create_custom_role(team: str, role_name: str, capabilities: list | str) -> dict:
diff --git a/central/central/doctype/team/team.py b/central/central/doctype/team/team.py
index 893b5384e..8404a9aec 100644
--- a/central/central/doctype/team/team.py
+++ b/central/central/doctype/team/team.py
@@ -143,6 +143,23 @@ def remove_member(self, user: str) -> None:
 			self.remove(row)
 		self.save()
 
+	# Internal; the HTTP surface is central.api.teams.leave_team.
+	def leave(self) -> None:
+		"""Drop your own membership. Leaving is yours to do, so it needs no
+		capability — but the owner can't: transfer ownership or delete the team."""
+		user = frappe.session.user
+		if user == self.owner_user:
+			frappe.throw(_("Transfer ownership before leaving this team."))
+		rows = self._get_member_rows(user)
+		if not rows:
+			frappe.throw(_("You are not a member of this team."))
+		for row in rows:
+			self.remove(row)
+		self.flags.from_member_leaving = True
+		# Being the member on the way out authorizes this write; a plain member
+		# holds neither team:manage_members nor write on the Team doc.
+		self.save(ignore_permissions=True)
+
 	# Internal; the HTTP surface is central.api.teams.transfer_team_ownership.
 	def transfer_ownership(self, user: str) -> None:
 		"""Owner is exclusive: promoting `user` drops every role grant they held
@@ -250,7 +267,12 @@ def _validate_role_scope(self) -> None:
 				frappe.throw(_("Team Role {0} does not belong to this team.").format(member.role))
 
 	def _validate_changes(self) -> None:
-		if self.is_new() or self.flags.from_team_invitation or self._is_operator():
+		if (
+			self.is_new()
+			or self.flags.from_team_invitation
+			or self.flags.from_member_leaving
+			or self._is_operator()
+		):
 			if (
 				self.is_new()
 				and not self.flags.from_user_bootstrap
diff --git a/central/tests/test_team_management.py b/central/tests/test_team_management.py
index 78e914ac8..e7a5c9aed 100644
--- a/central/tests/test_team_management.py
+++ b/central/tests/test_team_management.py
@@ -12,6 +12,7 @@
 	delete_custom_role,
 	delete_team,
 	invite_team_member,
+	leave_team,
 	list_team_invitations,
 	rename_team,
 	resend_invitation,
@@ -314,6 +315,21 @@ def test_only_owner_can_transfer_ownership(self):
 		self.assertEqual(team._get_member(self.admin).role, "Owner")
 		self.assertEqual(team._get_member(self.owner).role, "Admin")
 
+	def test_member_leaves_but_owner_cannot(self):
+		frappe.set_user(self.viewer)
+		leave_team(self.team.name)
+
+		team = frappe.get_doc("Team", self.team.name)
+		self.assertFalse(team._get_member_rows(self.viewer))
+		self.assertFalse(can(self.viewer, team.name, "server:view"))
+
+		with self.assertRaises(frappe.ValidationError):
+			leave_team(self.team.name)
+
+		frappe.set_user(self.owner)
+		with self.assertRaises(frappe.ValidationError):
+			leave_team(self.team.name)
+
 	# --- API endpoints (central.api.teams / central.api.identity) ----------------
 
 	def test_create_team_makes_caller_the_owner(self):

From 71d8900224337a0a50245ed0b92fbf897b700a23 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 16:39:39 +0530
Subject: [PATCH 16/23] feat(teams): return role, member count and created in
 my_teams

---
 central/api/identity.py               | 62 ++++++++++++++++++++++-----
 central/tests/test_team_management.py | 11 ++++-
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/central/api/identity.py b/central/api/identity.py
index e95ddc302..ebf879d21 100644
--- a/central/api/identity.py
+++ b/central/api/identity.py
@@ -4,6 +4,7 @@
 
 import frappe
 from frappe.query_builder import Order
+from frappe.query_builder.functions import Count
 from frappe.utils import escape_html
 
 from central.iam import (
@@ -40,7 +41,8 @@ def my_capabilities(team: str | None = None) -> list[str]:
 @frappe.whitelist(methods=["GET"])
 def my_teams() -> list[dict[str, Any]]:
 	"""Teams the signed-in user can switch between in the console — the teams they
-	are an active member of, each with a display label + the owner email."""
+	are an active member of, each with a display label, the owner email, the
+	caller's own role, how many people are in it, and when it was created."""
 	user = frappe.session.user
 	if not user or user == "Guest":
 		return []
@@ -52,7 +54,7 @@ def my_teams() -> list[dict[str, Any]]:
 		frappe.qb.from_(member)
 		.join(team)
 		.on(team.name == member.parent)
-		.select(team.name, team.team_name, team.team_logo, team.owner_user)
+		.select(team.name, team.team_name, team.team_logo, team.owner_user, team.creation, member.role)
 		.where(
 			(member.parenttype == "Team")
 			& (member.parentfield == "members")
@@ -63,15 +65,53 @@ def my_teams() -> list[dict[str, Any]]:
 		.orderby(team.team_name)
 	).run(as_dict=True)
 
-	return [
-		{
-			"name": r.name,
-			"label": r.team_name or r.owner_user or r.name,
-			"logo": r.team_logo,
-			"owner": r.owner_user,
-		}
-		for r in rows
-	]
+	# One row per role grant, so a member holding two roles in a team lands here
+	# twice. Fold to one entry per team, keeping the strongest role.
+	teams: dict[str, dict[str, Any]] = {}
+	for r in rows:
+		entry = teams.setdefault(
+			r.name,
+			{
+				"name": r.name,
+				"label": r.team_name or r.owner_user or r.name,
+				"logo": r.team_logo,
+				"owner": r.owner_user,
+				"role": r.role,
+				"members": 0,
+				"created": r.creation,
+			},
+		)
+		if _role_rank(r.role) < _role_rank(entry["role"]):
+			entry["role"] = r.role
+
+	if not teams:
+		return []
+
+	counts = (
+		frappe.qb.from_(member)
+		.select(member.parent, Count(member.user).distinct().as_("members"))
+		.where(
+			(member.parenttype == "Team")
+			& (member.parentfield == "members")
+			& (member.status == "Active")
+			& member.parent.isin(list(teams))
+		)
+		.groupby(member.parent)
+	).run(as_dict=True)
+	for row in counts:
+		teams[row.parent]["members"] = row.members
+
+	return list(teams.values())
+
+
+# Owner outranks Admin, and any named role outranks none.
+_ROLE_ORDER = ["Owner", "Admin"]
+
+
+def _role_rank(role: str | None) -> int:
+	if role in _ROLE_ORDER:
+		return _ROLE_ORDER.index(role)
+	return len(_ROLE_ORDER)
 
 
 @frappe.whitelist(methods=["GET"])
diff --git a/central/tests/test_team_management.py b/central/tests/test_team_management.py
index e7a5c9aed..0524bd1fc 100644
--- a/central/tests/test_team_management.py
+++ b/central/tests/test_team_management.py
@@ -4,7 +4,7 @@
 from frappe.tests import IntegrationTestCase
 from frappe.utils import add_days, today
 
-from central.api.identity import my_invitations
+from central.api.identity import my_invitations, my_teams
 from central.api.teams import (
 	create_custom_role,
 	create_team,
@@ -315,6 +315,15 @@ def test_only_owner_can_transfer_ownership(self):
 		self.assertEqual(team._get_member(self.admin).role, "Owner")
 		self.assertEqual(team._get_member(self.owner).role, "Admin")
 
+	def test_my_teams_carries_role_member_count_and_created(self):
+		frappe.set_user(self.admin)
+		rows = [row for row in my_teams() if row["name"] == self.team.name]
+
+		self.assertEqual(len(rows), 1)
+		self.assertEqual(rows[0]["role"], "Admin")
+		self.assertEqual(rows[0]["members"], 3)
+		self.assertTrue(rows[0]["created"])
+
 	def test_member_leaves_but_owner_cannot(self):
 		frappe.set_user(self.viewer)
 		leave_team(self.team.name)

From acfbf38291c5864772b5a7fbdd2240e9939062c6 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 16:49:56 +0530
Subject: [PATCH 17/23] fix(ui): Temporarily add settingsDialog styles override
 for now

---
 dashboard/package.json                        |  2 +-
 .../src/components/settings/SettingsModal.vue | 33 +++++++++++++++----
 dashboard/yarn.lock                           | 26 +++++----------
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 83516ee34..3d78ed0cd 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -12,7 +12,7 @@
 	"dependencies": {
 		"@stripe/stripe-js": "^9.10.0",
 		"@tanstack/vue-table": "^8.21.3",
-		"frappe-ui": "github:frappe/frappe-ui#v1.0.0-beta.53",
+		"frappe-ui": "github:frappe/frappe-ui#v1.0.0-beta.56",
 		"reka-ui": "^2.10.1",
 		"socket.io-client": "^4.8.1",
 		"vue": "^3.5.39",
diff --git a/dashboard/src/components/settings/SettingsModal.vue b/dashboard/src/components/settings/SettingsModal.vue
index a13c3c84c..a593eb3d5 100644
--- a/dashboard/src/components/settings/SettingsModal.vue
+++ b/dashboard/src/components/settings/SettingsModal.vue
@@ -61,11 +61,11 @@ watch(tabs, (available) => {
 	     binds a prop nothing reads and the dialog never opens. -->
 	<SettingsDialog v-model:open="settingsOpen" v-model:tab="settingsTab">
 		<SettingsSidebar class="dark:bg-surface-elevation-1">
-			<SettingsNavGroup
-				v-for="group in groups"
-				:key="group.label"
-				:label="group.label"
-			>
+			<SettingsNavGroup v-for="group in groups" :key="group.label">
+				<template #label>
+					<span class="text-sm-medium text-ink-gray-5">{{ group.label }}</span>
+				</template>
+
 				<SettingsNavItem
 					v-for="tab in group.items"
 					:key="tab.value"
@@ -88,11 +88,30 @@ watch(tabs, (available) => {
 
 		<SettingsContent class="bg-surface-base">
 			<SettingsPanel v-for="tab in tabs" :key="tab.value" :value="tab.value">
-				<SettingsHeader :title="tab.title" :description="tab.description" />
-				<SettingsBody>
+				<SettingsHeader
+					class="!px-10 !pt-9"
+					:title="tab.title"
+					:description="tab.description"
+				/>
+				<SettingsBody viewport-class="px-10 pb-16">
 					<component :is="tab.component" />
 				</SettingsBody>
 			</SettingsPanel>
 		</SettingsContent>
 	</SettingsDialog>
 </template>
+
+<!-- NOTE: revert if this merges https://github.com/frappe/frappe-ui/pull/1126 -->
+<style scoped>
+:deep(.text-lg.font-semibold) {
+	@apply text-lg-semibold;
+}
+
+:deep(.text-base.text-ink-gray-6) {
+	@apply text-p-base;
+}
+
+:deep([data-state="active"]) {
+	@apply text-ink-gray-8;
+}
+</style>
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index 41693951d..7a982ef1a 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -277,13 +277,6 @@
     "@floating-ui/utils" "^0.2.11"
     vue-demi ">=0.13.0"
 
-"@headlessui/vue@^1.7.14":
-  version "1.7.23"
-  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.23.tgz#7fe19dbeca35de9e6270c82c78c4864e6a6f7391"
-  integrity sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==
-  dependencies:
-    "@tanstack/vue-virtual" "^3.0.0-beta.60"
-
 "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
@@ -625,7 +618,7 @@
   dependencies:
     "@tanstack/table-core" "8.21.3"
 
-"@tanstack/vue-virtual@^3.0.0-beta.60", "@tanstack/vue-virtual@^3.12.0":
+"@tanstack/vue-virtual@^3.12.0":
   version "3.13.29"
   resolved "https://registry.yarnpkg.com/@tanstack/vue-virtual/-/vue-virtual-3.13.29.tgz#4ad312ec521a20b7053c069b1a7c97f0d1bb88c1"
   integrity sha512-MWb9tNHjpar3sP34b8+3A4I5j9akveoPXIYqqp7/ipyWd49a/kso+1S1LqEmAVR/+g/k1WWTJC4ktvdCGWgXYQ==
@@ -1482,9 +1475,9 @@ fraction.js@^5.3.4:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
   integrity sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==
 
-"frappe-ui@github:frappe/frappe-ui#v1.0.0-beta.53":
-  version "1.0.0-beta.53"
-  resolved "https://codeload.github.com/frappe/frappe-ui/tar.gz/5cdce197c532adb9212eaa56fb273975b4747e87"
+"frappe-ui@github:frappe/frappe-ui#v1.0.0-beta.56":
+  version "1.0.0-beta.56"
+  resolved "https://codeload.github.com/frappe/frappe-ui/tar.gz/314eb43c085fd157fe8cb4219136f443a3d60907"
   dependencies:
     "@codemirror/lang-css" "^6.3.0"
     "@codemirror/lang-html" "^6.4.9"
@@ -1497,7 +1490,6 @@ fraction.js@^5.3.4:
     "@codemirror/lang-xml" "^6.1.0"
     "@codemirror/lang-yaml" "^6.1.3"
     "@floating-ui/dom" "^1.7.4"
-    "@headlessui/vue" "^1.7.14"
     "@tailwindcss/forms" "^0.5.3"
     "@tailwindcss/line-clamp" "^0.4.4"
     "@tailwindcss/typography" "^0.5.16"
@@ -1547,7 +1539,7 @@ fraction.js@^5.3.4:
     highlight.js "^11.11.1"
     idb-keyval "^6.2.0"
     lowlight "^3.3.0"
-    lucide-static "^1.16.0"
+    lucide-static "^1.31.0"
     magic-string "^0.30.21"
     marked "^15.0.12"
     ora "5.4.1"
@@ -1795,10 +1787,10 @@ lowlight@^3.3.0:
     devlop "^1.0.0"
     highlight.js "~11.11.0"
 
-lucide-static@^1.16.0:
-  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-1.21.0.tgz#08812bde7238e206466ba07226e2316f2ab599fe"
-  integrity sha512-6248z2/4sEyKkYAPPUYxOPiB2RCfMmLdMHuoOhsTFnoD40ixAoHmTVhOPux8ADa1NTBmzpEKF7WNePm+Ms503Q==
+lucide-static@^1.31.0:
+  version "1.42.0"
+  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-1.42.0.tgz#03792d91258f1637b30aa97ef871f10be2a2bd79"
+  integrity sha512-S4jgNBM6Tm8TusfIvj2A9KQotIxT8Hsnby3csAVh1LeD3vHgI0li14oCiQmYj+0Jjo/2l7cVzaqgPdwmce338Q==
 
 magic-string@^0.30.17, magic-string@^0.30.21:
   version "0.30.21"

From 4f276b19c1e80058c19e7091a521afe43f1c8247 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Tue, 8 Sep 2026 21:44:43 +0530
Subject: [PATCH 18/23] refactor(ui): drop props that repeat frappe-ui defaults

---
 dashboard/src/components/AddMethodDialog.vue       |  4 +---
 dashboard/src/components/TopupDialog.vue           |  1 -
 dashboard/src/components/addons/AIApiKeys.vue      |  7 -------
 dashboard/src/components/addons/AIOverview.vue     |  2 --
 dashboard/src/components/addons/StorageBuckets.vue | 14 --------------
 .../components/billing/BillingContactTaxCard.vue   |  2 +-
 .../src/components/billing/ChargeBreakdown.vue     |  2 --
 .../src/components/billing/MeteredServicesCard.vue |  2 +-
 dashboard/src/components/billing/PayingForCard.vue |  3 +--
 .../src/components/billing/PaymentMethodsCard.vue  |  1 -
 .../components/billing/ProjectMembersDialog.vue    |  3 +--
 dashboard/src/components/billing/ProjectsCard.vue  |  2 --
 dashboard/src/components/billing/RefundsCard.vue   |  2 --
 dashboard/src/components/billing/StatementCard.vue |  2 --
 .../src/components/billing/StatementPanel.vue      |  1 -
 .../src/components/billing/StopBillingCard.vue     |  1 -
 dashboard/src/components/billing/WalletCard.vue    |  2 --
 .../src/components/billing/WalletHistoryPanel.vue  |  1 -
 .../common/formComponents/ValidatedFormControl.vue |  1 -
 .../src/components/common/list-view/ListView.vue   |  1 -
 dashboard/src/components/navigation/Sidebar.vue    |  2 --
 .../notifications/NotificationsPanel.vue           |  1 -
 .../src/components/servers/ConfigDesigner.vue      |  4 ----
 dashboard/src/components/servers/MapHoverCard.vue  |  3 ---
 .../src/components/servers/ServerListPanel.vue     |  2 --
 .../components/servers/ServerOverviewDialog.vue    |  2 --
 .../src/components/settings/forms/ProfileForm.vue  |  1 -
 .../src/components/settings/forms/TeamForm.vue     |  2 --
 .../src/components/team/ManageRolesDialog.vue      |  3 +--
 dashboard/src/components/team/MembersPanel.vue     |  1 -
 dashboard/src/components/team/RolesPanel.vue       |  1 -
 dashboard/src/components/team/SwitchTeamDialog.vue |  3 +--
 dashboard/src/pages/addons/ObjectStorage.vue       |  1 -
 dashboard/src/pages/addons/Page.vue                |  3 ---
 dashboard/src/pages/auth/LoginPage.vue             |  3 ---
 .../src/pages/billing/BillingInvoicesPage.vue      |  1 -
 dashboard/src/pages/billing/BillingReportsPage.vue |  3 +--
 dashboard/src/pages/onboarding/SiteNamePage.vue    |  1 -
 dashboard/src/pages/servers/NewServerPage.vue      |  5 -----
 dashboard/src/pages/team/AccessPage.vue            |  1 -
 40 files changed, 8 insertions(+), 89 deletions(-)

diff --git a/dashboard/src/components/AddMethodDialog.vue b/dashboard/src/components/AddMethodDialog.vue
index ab937d68c..500585f97 100644
--- a/dashboard/src/components/AddMethodDialog.vue
+++ b/dashboard/src/components/AddMethodDialog.vue
@@ -310,7 +310,6 @@ watch(open, (isOpen) => {
 				>
 					<FormControl
 						v-model="phone"
-						type="text"
 						label="Phone number"
 						placeholder="Mobile number"
 						description="A recurring card on this rail needs a contact number. Saved to your billing profile."
@@ -330,7 +329,7 @@ watch(open, (isOpen) => {
 
 			<div v-else class="space-y-3">
 				<p class="text-p-sm text-ink-gray-5">Couldn't load payment options.</p>
-				<Button variant="subtle" label="Retry" @click="options.reload()" />
+				<Button label="Retry" @click="options.reload()" />
 			</div>
 		</template>
 
@@ -353,7 +352,6 @@ watch(open, (isOpen) => {
 			<div v-else class="flex items-center gap-2">
 				<Button
 					v-if="options.data?.note"
-					variant="subtle"
 					label="Add credit"
 					@click="goToTopup"
 				/>
diff --git a/dashboard/src/components/TopupDialog.vue b/dashboard/src/components/TopupDialog.vue
index f5b5c6f15..b96e34fd1 100644
--- a/dashboard/src/components/TopupDialog.vue
+++ b/dashboard/src/components/TopupDialog.vue
@@ -238,7 +238,6 @@ watch(open, (isOpen) => {
 					<Button
 						class="ml-auto"
 						variant="ghost"
-						size="sm"
 						label="Change"
 						@click="fixed = false"
 					/>
diff --git a/dashboard/src/components/addons/AIApiKeys.vue b/dashboard/src/components/addons/AIApiKeys.vue
index dd0767918..0b14e67c9 100644
--- a/dashboard/src/components/addons/AIApiKeys.vue
+++ b/dashboard/src/components/addons/AIApiKeys.vue
@@ -160,8 +160,6 @@ const confirmRevoke = async (): Promise<void> => {
 
 				<Button
 					v-if="canManage"
-					variant="subtle"
-					size="sm"
 					label="Generate key"
 					icon-left="lucide-plus"
 					class="shrink-0"
@@ -200,7 +198,6 @@ const confirmRevoke = async (): Promise<void> => {
 							>
 							<Badge
 								:theme="key.status === 'Active' ? 'green' : 'gray'"
-								variant="subtle"
 								size="sm"
 								:label="key.status"
 							/>
@@ -245,8 +242,6 @@ const confirmRevoke = async (): Promise<void> => {
 			>
 				<template v-if="canManage" #action>
 					<Button
-						variant="subtle"
-						size="sm"
 						label="Generate key"
 						icon-left="lucide-plus"
 						@click="openGenerate"
@@ -350,7 +345,6 @@ const confirmRevoke = async (): Promise<void> => {
 						v-if="models.length"
 						v-model="selectedModel"
 						:options="modelOptions"
-						size="sm"
 						variant="outline"
 					/>
 				</div>
@@ -364,7 +358,6 @@ const confirmRevoke = async (): Promise<void> => {
 
 					<Button
 						icon="lucide-copy"
-						size="sm"
 						class="sticky top-0 right-0 ml-auto"
 						label="Copy command"
 						@click="copyCurl"
diff --git a/dashboard/src/components/addons/AIOverview.vue b/dashboard/src/components/addons/AIOverview.vue
index 269b16d43..5c1f34630 100644
--- a/dashboard/src/components/addons/AIOverview.vue
+++ b/dashboard/src/components/addons/AIOverview.vue
@@ -75,7 +75,6 @@ const enabledSites = computed(() => instance.value?.enabled_sites ?? [])
 						<Badge
 							:label="instance?.status ?? 'Active'"
 							:theme="instance?.status === 'Active' ? 'green' : 'amber'"
-							variant="subtle"
 						/>
 					</div>
 
@@ -134,7 +133,6 @@ const enabledSites = computed(() => instance.value?.enabled_sites ?? [])
 				<Button
 					class="-ml-2 mt-3"
 					variant="ghost"
-					size="sm"
 					label="Manage on your servers"
 					icon-right="lucide-arrow-up-right"
 					@click="router.push('/servers')"
diff --git a/dashboard/src/components/addons/StorageBuckets.vue b/dashboard/src/components/addons/StorageBuckets.vue
index 15cb2392f..d76264c3c 100644
--- a/dashboard/src/components/addons/StorageBuckets.vue
+++ b/dashboard/src/components/addons/StorageBuckets.vue
@@ -177,7 +177,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 
 			<Button
 				v-if="canManage"
-				variant="subtle"
 				icon-left="lucide-plus"
 				label="Create bucket"
 				@click="openCreate"
@@ -211,7 +210,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 		>
 			<template v-if="canManage" #action>
 				<Button
-					variant="subtle"
 					icon-left="lucide-plus"
 					label="Create bucket"
 					@click="openCreate"
@@ -260,7 +258,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 				<Badge
 					v-else-if="column.key === 'status'"
 					:theme="row.status === 'Active' ? 'green' : 'gray'"
-					variant="subtle"
 					:label="row.status"
 				/>
 
@@ -273,7 +270,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 						<template #trigger>
 							<Button
 								variant="ghost"
-								size="sm"
 								icon="lucide-ellipsis-vertical"
 								label="Bucket actions"
 								tooltip="Bucket actions"
@@ -310,7 +306,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 	>
 		<FormControl
 			v-model="newName"
-			type="text"
 			label="Name"
 			placeholder="e.g. acme-backups"
 			description="3-63 characters: lowercase letters, digits, dots and hyphens. Names are shared across all customers, so a taken one is refused."
@@ -362,7 +357,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 				</p>
 
 				<FormControl
-					type="text"
 					label="Endpoint URL"
 					:model-value="details.endpoint_url"
 					readonly
@@ -370,7 +364,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 					<template #suffix>
 						<Button
 							variant="ghost"
-							size="sm"
 							icon="lucide-copy"
 							label="Copy endpoint URL"
 							tooltip="Copy"
@@ -380,7 +373,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 				</FormControl>
 
 				<FormControl
-					type="text"
 					label="Bucket"
 					:model-value="details.bucket"
 					readonly
@@ -388,7 +380,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 					<template #suffix>
 						<Button
 							variant="ghost"
-							size="sm"
 							icon="lucide-copy"
 							label="Copy bucket name"
 							tooltip="Copy"
@@ -398,7 +389,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 				</FormControl>
 
 				<FormControl
-					type="text"
 					label="Access key"
 					:model-value="details.access_key_id"
 					readonly
@@ -406,7 +396,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 					<template #suffix>
 						<Button
 							variant="ghost"
-							size="sm"
 							icon="lucide-copy"
 							label="Copy access key"
 							tooltip="Copy"
@@ -416,7 +405,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 				</FormControl>
 
 				<FormControl
-					type="text"
 					label="Secret key"
 					:model-value="maskedSecret"
 					readonly
@@ -426,7 +414,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 						<div class="flex items-center">
 							<Button
 								variant="ghost"
-								size="sm"
 								:icon="secretRevealed ? 'lucide-eye-off' : 'lucide-eye'"
 								:label="secretRevealed ? 'Hide secret' : 'Reveal secret'"
 								:tooltip="secretRevealed ? 'Hide' : 'Reveal'"
@@ -434,7 +421,6 @@ const copy = async (value: string, label: string): Promise<void> => {
 							/>
 							<Button
 								variant="ghost"
-								size="sm"
 								icon="lucide-copy"
 								label="Copy secret key"
 								tooltip="Copy"
diff --git a/dashboard/src/components/billing/BillingContactTaxCard.vue b/dashboard/src/components/billing/BillingContactTaxCard.vue
index d255769f8..8a4648db8 100644
--- a/dashboard/src/components/billing/BillingContactTaxCard.vue
+++ b/dashboard/src/components/billing/BillingContactTaxCard.vue
@@ -86,7 +86,7 @@ const isIndia = computed(() => country.value === 'India')
 				<dd v-if="gstin" class="text-right font-mono text-ink-gray-8">
 					{{ gstin }}
 				</dd>
-				<Badge v-else theme="gray" label="Not set" />
+				<Badge v-else label="Not set" />
 			</div>
 		</dl>
 	</BillingCard>
diff --git a/dashboard/src/components/billing/ChargeBreakdown.vue b/dashboard/src/components/billing/ChargeBreakdown.vue
index 7693172f2..a71d96916 100644
--- a/dashboard/src/components/billing/ChargeBreakdown.vue
+++ b/dashboard/src/components/billing/ChargeBreakdown.vue
@@ -215,7 +215,6 @@ function isEstimated(li: BillingLine): boolean {
 								<Badge
 									v-if="showBasis && isEstimated(li)"
 									theme="amber"
-									variant="subtle"
 									label="Estimated"
 								/>
 								<span
@@ -258,7 +257,6 @@ function isEstimated(li: BillingLine): boolean {
 						<Badge
 							v-if="showBasis && isEstimated(li)"
 							theme="amber"
-							variant="subtle"
 							label="Estimated"
 						/>
 						<span class="text-sm tabular-nums text-ink-gray-8">
diff --git a/dashboard/src/components/billing/MeteredServicesCard.vue b/dashboard/src/components/billing/MeteredServicesCard.vue
index 6fcbd274e..f0d845441 100644
--- a/dashboard/src/components/billing/MeteredServicesCard.vue
+++ b/dashboard/src/components/billing/MeteredServicesCard.vue
@@ -201,7 +201,7 @@ function exhausted(row: ServiceRow): boolean {
 			description="Subscribe to a usage-billed service like AI tokens, email, or PDF rendering."
 		>
 			<template v-if="canManageBilling" #action>
-				<Button variant="subtle" label="Subscribe" @click="goToAddons" />
+				<Button label="Subscribe" @click="goToAddons" />
 			</template>
 		</EmptyState>
 	</BillingCard>
diff --git a/dashboard/src/components/billing/PayingForCard.vue b/dashboard/src/components/billing/PayingForCard.vue
index 61e569737..0ca29f3fc 100644
--- a/dashboard/src/components/billing/PayingForCard.vue
+++ b/dashboard/src/components/billing/PayingForCard.vue
@@ -78,7 +78,6 @@ function serverTitle(sub: SubscriptionRow): string {
 			<Button
 				v-if="hidden"
 				variant="ghost"
-				size="sm"
 				class="-mb-2 -ml-2 mt-2"
 				:label="`View all ${rows.length}`"
 				@click="$emit('open')"
@@ -96,7 +95,7 @@ function serverTitle(sub: SubscriptionRow): string {
 			description="Servers and metered services you're subscribed to will show here with what they cost."
 		>
 			<template v-if="canManageBilling" #action>
-				<Button variant="subtle" label="Browse add-ons" @click="goToAddons" />
+				<Button label="Browse add-ons" @click="goToAddons" />
 			</template>
 		</EmptyState>
 
diff --git a/dashboard/src/components/billing/PaymentMethodsCard.vue b/dashboard/src/components/billing/PaymentMethodsCard.vue
index 917427ee1..2cc29d2c6 100644
--- a/dashboard/src/components/billing/PaymentMethodsCard.vue
+++ b/dashboard/src/components/billing/PaymentMethodsCard.vue
@@ -269,7 +269,6 @@ function onAdd(): void {
 								/>
 								<Badge
 									v-else-if="pm.status !== 'Active'"
-									theme="gray"
 									:label="pm.status"
 								/>
 							</div>
diff --git a/dashboard/src/components/billing/ProjectMembersDialog.vue b/dashboard/src/components/billing/ProjectMembersDialog.vue
index eac592b1c..e3440a21c 100644
--- a/dashboard/src/components/billing/ProjectMembersDialog.vue
+++ b/dashboard/src/components/billing/ProjectMembersDialog.vue
@@ -92,7 +92,7 @@ async function removeMember(sub: SubscriptionRow): Promise<void> {
 </script>
 
 <template>
-	<Dialog v-model="open" :title="project ? `${project.title} — servers` : ''" size="lg">
+	<Dialog v-model="open" :title="project ? `${project.title} — servers` : ''">
 		<template #default>
 			<div class="space-y-4">
 				<div v-if="members.length" class="divide-y divide-outline-gray-1">
@@ -136,7 +136,6 @@ async function removeMember(sub: SubscriptionRow): Promise<void> {
 					</p>
 					<Button
 						v-if="candidates.length"
-						variant="subtle"
 						label="Add"
 						:disabled="!toAdd"
 						@click="addMember"
diff --git a/dashboard/src/components/billing/ProjectsCard.vue b/dashboard/src/components/billing/ProjectsCard.vue
index 9dfe64726..d19060b9b 100644
--- a/dashboard/src/components/billing/ProjectsCard.vue
+++ b/dashboard/src/components/billing/ProjectsCard.vue
@@ -134,7 +134,6 @@ function subtitle(p: Project): string {
 			<Button
 				v-if="hidden"
 				variant="ghost"
-				size="sm"
 				class="-ml-2 mt-2"
 				:label="`View all ${rows.length}`"
 				@click="$emit('open')"
@@ -154,7 +153,6 @@ function subtitle(p: Project): string {
 			<template v-if="canManageBilling" #action>
 				<Button
 					variant="solid"
-					theme="gray"
 					label="Create project"
 					@click="showCreate = true"
 				>
diff --git a/dashboard/src/components/billing/RefundsCard.vue b/dashboard/src/components/billing/RefundsCard.vue
index d4ccc42e0..4d6a1b436 100644
--- a/dashboard/src/components/billing/RefundsCard.vue
+++ b/dashboard/src/components/billing/RefundsCard.vue
@@ -60,7 +60,6 @@ function destinationLabel(row: RefundRow): string {
 					<span class="flex justify-end">
 						<Badge
 							:theme="(STATUS_THEME[row.status] as any) || 'gray'"
-							variant="subtle"
 							:label="row.status"
 						/>
 					</span>
@@ -82,7 +81,6 @@ function destinationLabel(row: RefundRow): string {
 			<li v-if="rows.length > shown" class="py-3">
 				<Button
 					variant="ghost"
-					size="sm"
 					class="-ml-2"
 					:label="`Show all ${rows.length}`"
 					@click="shown = rows.length"
diff --git a/dashboard/src/components/billing/StatementCard.vue b/dashboard/src/components/billing/StatementCard.vue
index d30ff8c98..badf0b73a 100644
--- a/dashboard/src/components/billing/StatementCard.vue
+++ b/dashboard/src/components/billing/StatementCard.vue
@@ -77,7 +77,6 @@ const hidden = computed(() =>
 							<span role="cell" class="flex justify-end">
 								<Badge
 									:theme="invoiceTheme(row.status)"
-									variant="subtle"
 									:label="row.status"
 								/>
 							</span>
@@ -105,7 +104,6 @@ const hidden = computed(() =>
 					<Button
 						v-if="statement && hidden"
 						variant="ghost"
-						size="sm"
 						:label="`View all ${statement.rows.length}`"
 						@click="$emit('open')"
 					>
diff --git a/dashboard/src/components/billing/StatementPanel.vue b/dashboard/src/components/billing/StatementPanel.vue
index 620b05e71..013d56eb5 100644
--- a/dashboard/src/components/billing/StatementPanel.vue
+++ b/dashboard/src/components/billing/StatementPanel.vue
@@ -42,7 +42,6 @@ const rows = computed(() => [...(data.value?.rows ?? [])].reverse())
 				<div class="flex shrink-0 items-center gap-3">
 					<Badge
 						:theme="invoiceTheme(row.status)"
-						variant="subtle"
 						:label="row.status"
 					/>
 					<span class="w-24 text-right text-p-sm tabular-nums text-ink-gray-9">
diff --git a/dashboard/src/components/billing/StopBillingCard.vue b/dashboard/src/components/billing/StopBillingCard.vue
index fa300fe1b..b5a6c8691 100644
--- a/dashboard/src/components/billing/StopBillingCard.vue
+++ b/dashboard/src/components/billing/StopBillingCard.vue
@@ -24,7 +24,6 @@ const { canManageBilling } = useCapabilities()
 		</div>
 		<Button
 			v-if="canManageBilling"
-			variant="subtle"
 			theme="red"
 			label="Suspend all"
 			:disabled="true"
diff --git a/dashboard/src/components/billing/WalletCard.vue b/dashboard/src/components/billing/WalletCard.vue
index f17eb1964..e473f1681 100644
--- a/dashboard/src/components/billing/WalletCard.vue
+++ b/dashboard/src/components/billing/WalletCard.vue
@@ -149,8 +149,6 @@ function onAddCredit(): void {
 				class="mt-auto flex items-center justify-end gap-2 pt-4"
 			>
 				<Button
-					variant="subtle"
-					size="sm"
 					label="Add credit"
 					@click="onAddCredit"
 				>
diff --git a/dashboard/src/components/billing/WalletHistoryPanel.vue b/dashboard/src/components/billing/WalletHistoryPanel.vue
index d683c979b..1f12eff0b 100644
--- a/dashboard/src/components/billing/WalletHistoryPanel.vue
+++ b/dashboard/src/components/billing/WalletHistoryPanel.vue
@@ -108,7 +108,6 @@ function isCredit(entry: CreditLedgerEntry): boolean {
 		<template v-if="canManageBilling" #footer>
 			<Button
 				variant="solid"
-				theme="gray"
 				label="Add credit"
 				class="w-full"
 				@click="onAddCredit"
diff --git a/dashboard/src/components/common/formComponents/ValidatedFormControl.vue b/dashboard/src/components/common/formComponents/ValidatedFormControl.vue
index c67923183..d93ca02bf 100644
--- a/dashboard/src/components/common/formComponents/ValidatedFormControl.vue
+++ b/dashboard/src/components/common/formComponents/ValidatedFormControl.vue
@@ -51,7 +51,6 @@ defineExpose({ dirty, valid, validate })
 		:type="type"
 		:error="error"
 		size="md"
-		variant="subtle"
 		v-bind="attrs"
 		:class="attrs.class"
 		@update:model-value="emit('update:modelValue', String($event ?? ''))"
diff --git a/dashboard/src/components/common/list-view/ListView.vue b/dashboard/src/components/common/list-view/ListView.vue
index ff05b4e7c..dbd45edbc 100644
--- a/dashboard/src/components/common/list-view/ListView.vue
+++ b/dashboard/src/components/common/list-view/ListView.vue
@@ -448,7 +448,6 @@ const showListControls = computed(
 					:key="filter.key"
 					:model-value="query.filters[filter.key] || ''"
 					class="w-40"
-					variant="subtle"
 					:placeholder="filter.allLabel || `All ${filter.label.toLowerCase()}`"
 					:options="[
             {
diff --git a/dashboard/src/components/navigation/Sidebar.vue b/dashboard/src/components/navigation/Sidebar.vue
index e300d4372..90b5f8b1a 100644
--- a/dashboard/src/components/navigation/Sidebar.vue
+++ b/dashboard/src/components/navigation/Sidebar.vue
@@ -154,7 +154,6 @@ onScopeDispose(() => cancelAnimationFrame(edgeRaf))
 			<Dropdown
 				:options="footerMenuItems"
 				side="top"
-				align="start"
 				match-trigger-width
 			>
 				<template #default="{ open }">
@@ -178,7 +177,6 @@ onScopeDispose(() => cancelAnimationFrame(edgeRaf))
 						<Avatar
 							:image="profile?.user_image ?? undefined"
 							:label="profile?.full_name || currentUser || ''"
-							size="md"
 						/>
 						<!-- Name first, email beneath — the email alone reads like a
 						     login prompt, not a person. -->
diff --git a/dashboard/src/components/notifications/NotificationsPanel.vue b/dashboard/src/components/notifications/NotificationsPanel.vue
index 129abf244..e6433f287 100644
--- a/dashboard/src/components/notifications/NotificationsPanel.vue
+++ b/dashboard/src/components/notifications/NotificationsPanel.vue
@@ -101,7 +101,6 @@ const onRowClick = async (notification: TeamNotification): Promise<void> => {
 		v-model:open="open"
 		bare
 		:side="isMobile ? 'top' : 'right'"
-		align="start"
 		:offset="isMobile ? 0 : 9"
 		:collision-padding="0"
 	>
diff --git a/dashboard/src/components/servers/ConfigDesigner.vue b/dashboard/src/components/servers/ConfigDesigner.vue
index a5e39ce8b..d801a3ce5 100644
--- a/dashboard/src/components/servers/ConfigDesigner.vue
+++ b/dashboard/src/components/servers/ConfigDesigner.vue
@@ -254,9 +254,7 @@ function indexOf(ladder: number[], value: number): number {
 				<div class="min-w-0 flex-1">
 					<Slider
 						v-model="vcpuModel"
-						:min="0"
 						:max="Math.max(0, maxVcpuIndex)"
-						:step="1"
 					/>
 				</div>
 				<LadderSelect
@@ -279,9 +277,7 @@ function indexOf(ladder: number[], value: number): number {
 				<div class="min-w-0 flex-1">
 					<Slider
 						v-model="diskModel"
-						:min="0"
 						:max="Math.max(0, maxDiskIndex)"
-						:step="1"
 					/>
 				</div>
 				<button
diff --git a/dashboard/src/components/servers/MapHoverCard.vue b/dashboard/src/components/servers/MapHoverCard.vue
index d3d0ea8d7..689c34ca3 100644
--- a/dashboard/src/components/servers/MapHoverCard.vue
+++ b/dashboard/src/components/servers/MapHoverCard.vue
@@ -42,7 +42,6 @@ function canOpenBench(server: NonNullable<MapPin['server']>): boolean {
 					>
 					<Badge
 						:theme="node.pin.visual.badgeTheme"
-						variant="subtle"
 						size="sm"
 						:label="node.pin.visual.label"
 					/>
@@ -181,8 +180,6 @@ function canOpenBench(server: NonNullable<MapPin['server']>): boolean {
 		</div>
 		<Button
 			class="mt-3"
-			variant="subtle"
-			size="sm"
 			label="New server"
 			icon-left="lucide-plus"
 			@click="emit('new-server', node.targets[0].id)"
diff --git a/dashboard/src/components/servers/ServerListPanel.vue b/dashboard/src/components/servers/ServerListPanel.vue
index b83ff2440..33586fb5f 100644
--- a/dashboard/src/components/servers/ServerListPanel.vue
+++ b/dashboard/src/components/servers/ServerListPanel.vue
@@ -79,7 +79,6 @@ const hoverId = defineModel<string | null>('hoverId', { required: true })
 			<div class="shrink-0 px-4 pb-3">
 				<FormControl
 					v-model="query"
-					type="text"
 					placeholder="Search"
 					autocomplete="off"
 					class="[&_input]:w-full"
@@ -136,7 +135,6 @@ const hoverId = defineModel<string | null>('hoverId', { required: true })
 									v-if="row.visual.key !== 'active'"
 									:label="row.visual.label"
 									:theme="row.visual.badgeTheme"
-									variant="subtle"
 									size="sm"
 								/>
 							</span>
diff --git a/dashboard/src/components/servers/ServerOverviewDialog.vue b/dashboard/src/components/servers/ServerOverviewDialog.vue
index 7124e679e..2095f5fd3 100644
--- a/dashboard/src/components/servers/ServerOverviewDialog.vue
+++ b/dashboard/src/components/servers/ServerOverviewDialog.vue
@@ -173,7 +173,6 @@ const planLabel = computed(() =>
 								v-if="visual"
 								:label="visual.label"
 								:theme="visual.badgeTheme"
-								variant="subtle"
 								size="sm"
 							/>
 						</div>
@@ -232,7 +231,6 @@ const planLabel = computed(() =>
 				<Button label="Close" @click="close" />
 				<Button
 					v-if="props.server && canOpen"
-					variant="subtle"
 					label="Open server"
 					icon-right="lucide-arrow-up-right"
 					@click="openServer"
diff --git a/dashboard/src/components/settings/forms/ProfileForm.vue b/dashboard/src/components/settings/forms/ProfileForm.vue
index bf9e140d3..a504a221b 100644
--- a/dashboard/src/components/settings/forms/ProfileForm.vue
+++ b/dashboard/src/components/settings/forms/ProfileForm.vue
@@ -114,7 +114,6 @@ function resetPassword(): void {
 				<div class="flex flex-col items-start gap-1">
 					<Button
 						size="xs"
-						variant="subtle"
 						icon-left="lucide-upload"
 						:label="profile?.user_image ? 'Change' : 'Upload'"
 					/>
diff --git a/dashboard/src/components/settings/forms/TeamForm.vue b/dashboard/src/components/settings/forms/TeamForm.vue
index ad21bfe29..99e141721 100644
--- a/dashboard/src/components/settings/forms/TeamForm.vue
+++ b/dashboard/src/components/settings/forms/TeamForm.vue
@@ -66,7 +66,6 @@ async function onDelete(): Promise<void> {
 					<div class="flex flex-col items-start gap-1">
 						<Button
 							size="xs"
-							variant="subtle"
 							icon-left="lucide-upload"
 							:label="activeTeamLogo ? 'Change' : 'Upload'"
 						/>
@@ -110,7 +109,6 @@ async function onDelete(): Promise<void> {
 			>
 				<Button
 					theme="red"
-					variant="subtle"
 					label="Delete"
 					@click="confirmDelete = true"
 				/>
diff --git a/dashboard/src/components/team/ManageRolesDialog.vue b/dashboard/src/components/team/ManageRolesDialog.vue
index 3678f2672..9df2ed06e 100644
--- a/dashboard/src/components/team/ManageRolesDialog.vue
+++ b/dashboard/src/components/team/ManageRolesDialog.vue
@@ -170,7 +170,7 @@ const dialogOptions = computed(() => ({
 		<template #default>
 			<div v-if="member" class="space-y-4">
 				<div class="flex items-center gap-3">
-					<Avatar :label="member.full_name" size="md" />
+					<Avatar :label="member.full_name" />
 					<div class="min-w-0">
 						<p class="truncate font-medium text-ink-gray-9">
 							{{ member.full_name }}
@@ -227,7 +227,6 @@ const dialogOptions = computed(() => ({
 				</div>
 
 				<Button
-					variant="subtle"
 					icon-left="lucide-plus"
 					label="Add role for a resource"
 					@click="addRow"
diff --git a/dashboard/src/components/team/MembersPanel.vue b/dashboard/src/components/team/MembersPanel.vue
index 9bc91d8fd..6a0fcaf47 100644
--- a/dashboard/src/components/team/MembersPanel.vue
+++ b/dashboard/src/components/team/MembersPanel.vue
@@ -226,7 +226,6 @@ const roleFilters = computed<ListViewFilter[]>(() => [
 				<Avatar
 					:image="row.member?.user_image ?? undefined"
 					:label="row.name"
-					size="md"
 					:class="row.invite ? 'opacity-60' : ''"
 				/>
 				<div class="min-w-0">
diff --git a/dashboard/src/components/team/RolesPanel.vue b/dashboard/src/components/team/RolesPanel.vue
index 1768efd69..640e37f6f 100644
--- a/dashboard/src/components/team/RolesPanel.vue
+++ b/dashboard/src/components/team/RolesPanel.vue
@@ -111,7 +111,6 @@ const { selectedKey, selected, select, clear } = useTeamRowSelection(
 		<template #toolbar>
 			<Button
 				v-if="canManageMembers"
-				variant="subtle"
 				label="New role"
 				icon-left="lucide-plus"
 				@click="newRoleDialog = true"
diff --git a/dashboard/src/components/team/SwitchTeamDialog.vue b/dashboard/src/components/team/SwitchTeamDialog.vue
index c8e0f885a..9c9a9e82b 100644
--- a/dashboard/src/components/team/SwitchTeamDialog.vue
+++ b/dashboard/src/components/team/SwitchTeamDialog.vue
@@ -85,13 +85,12 @@ const createTeam = () => {
 						v-if="row.name === activeTeam"
 						label="Current"
 						theme="green"
-						variant="subtle"
 					/>
 				</span>
 			</template>
 
 			<template #role="{ row }">
-				<Badge :label="row.role ?? 'Member'" theme="gray" variant="subtle" />
+				<Badge :label="row.role ?? 'Member'" />
 			</template>
 
 			<template #members="{ row }">
diff --git a/dashboard/src/pages/addons/ObjectStorage.vue b/dashboard/src/pages/addons/ObjectStorage.vue
index 9ce477aba..1a8a949fd 100644
--- a/dashboard/src/pages/addons/ObjectStorage.vue
+++ b/dashboard/src/pages/addons/ObjectStorage.vue
@@ -132,7 +132,6 @@ const activateService = async (): Promise<void> => {
 							<Badge
 								:label="instance?.status ?? 'Active'"
 								:theme="instance?.status === 'Active' ? 'green' : 'amber'"
-								variant="subtle"
 							/>
 						</div>
 
diff --git a/dashboard/src/pages/addons/Page.vue b/dashboard/src/pages/addons/Page.vue
index 44760ce2d..64789235a 100644
--- a/dashboard/src/pages/addons/Page.vue
+++ b/dashboard/src/pages/addons/Page.vue
@@ -163,14 +163,11 @@ const cards = computed(() =>
 					</div>
 					<Badge
 						v-if="service.comingSoon"
-						theme="gray"
-						variant="subtle"
 						label="Coming soon"
 					/>
 					<Badge
 						v-else
 						:theme="service.on ? 'green' : 'gray'"
-						variant="subtle"
 						:label="service.on ? 'On' : 'Off'"
 					/>
 				</div>
diff --git a/dashboard/src/pages/auth/LoginPage.vue b/dashboard/src/pages/auth/LoginPage.vue
index 657fc4ad4..8b01150ba 100644
--- a/dashboard/src/pages/auth/LoginPage.vue
+++ b/dashboard/src/pages/auth/LoginPage.vue
@@ -126,7 +126,6 @@ const isFormDisabled = computed(
 					Continue
 				</Button>
 				<Button
-					type="button"
 					variant="outline"
 					size="md"
 					class="w-full"
@@ -166,9 +165,7 @@ const isFormDisabled = computed(
 					>
 						<template #suffix>
 							<Button
-								type="button"
 								variant="ghost"
-								size="sm"
 								:label="showPassword ? 'Hide password' : 'Show password'"
 								:icon="showPassword ? 'lucide-eye-off' : 'lucide-eye'"
 								@click="showPassword = !showPassword"
diff --git a/dashboard/src/pages/billing/BillingInvoicesPage.vue b/dashboard/src/pages/billing/BillingInvoicesPage.vue
index 601da07e2..58099900c 100644
--- a/dashboard/src/pages/billing/BillingInvoicesPage.vue
+++ b/dashboard/src/pages/billing/BillingInvoicesPage.vue
@@ -203,7 +203,6 @@ const eventDetail = (ev: {
 					</span>
 					<Badge
 						:theme="invoiceTheme(shown.status)"
-						variant="subtle"
 						:label="shown.status"
 					/>
 				</div>
diff --git a/dashboard/src/pages/billing/BillingReportsPage.vue b/dashboard/src/pages/billing/BillingReportsPage.vue
index 6345fe855..c1e6bf89f 100644
--- a/dashboard/src/pages/billing/BillingReportsPage.vue
+++ b/dashboard/src/pages/billing/BillingReportsPage.vue
@@ -155,7 +155,6 @@ function exportUrl(report: string): string {
 				>
 					<template #action>
 						<Button
-							variant="subtle"
 							label="Go to billing overview"
 							@click="router.push({ name: 'Billing' })"
 						/>
@@ -169,7 +168,7 @@ function exportUrl(report: string): string {
 					description="Something went wrong on our side."
 				>
 					<template #action>
-						<Button variant="subtle" label="Retry" @click="history.reload()" />
+						<Button label="Retry" @click="history.reload()" />
 					</template>
 				</EmptyState>
 
diff --git a/dashboard/src/pages/onboarding/SiteNamePage.vue b/dashboard/src/pages/onboarding/SiteNamePage.vue
index d74516a30..559024257 100644
--- a/dashboard/src/pages/onboarding/SiteNamePage.vue
+++ b/dashboard/src/pages/onboarding/SiteNamePage.vue
@@ -104,7 +104,6 @@ async function createSite() {
 				v-model="subdomain"
 				label="Site address"
 				size="md"
-				variant="subtle"
 				placeholder="yourcompany"
 				autocomplete="off"
 				autocapitalize="off"
diff --git a/dashboard/src/pages/servers/NewServerPage.vue b/dashboard/src/pages/servers/NewServerPage.vue
index b02dbe094..db79bd35a 100644
--- a/dashboard/src/pages/servers/NewServerPage.vue
+++ b/dashboard/src/pages/servers/NewServerPage.vue
@@ -428,7 +428,6 @@ async function submit() {
 							</div>
 							<FormControl
 								v-model="name"
-								type="text"
 								placeholder="e.g. Acme Production"
 								:maxlength="60"
 								class="mt-2 max-w-xs auto-f"
@@ -451,7 +450,6 @@ async function submit() {
 								<FormControl
 									id="subdomain"
 									:model-value="subdomain"
-									type="text"
 									placeholder="acme-production"
 									:maxlength="63"
 									autocomplete="off"
@@ -523,7 +521,6 @@ async function submit() {
 								<Button
 									v-for="r in providerRegions"
 									:key="r.region"
-									size="sm"
 									variant="outline"
 									:class="[
 										'!rounded-6 focus-visible:!ring-1 focus-visible:!ring-outline-gray-4',
@@ -541,8 +538,6 @@ async function submit() {
 									{{ regionLabel(r) }}
 									<Badge
 										v-if="!r.reachable"
-										theme="gray"
-										variant="subtle"
 										label="Unreachable"
 										class="ml-1"
 									/>
diff --git a/dashboard/src/pages/team/AccessPage.vue b/dashboard/src/pages/team/AccessPage.vue
index 904f01246..b06924bf4 100644
--- a/dashboard/src/pages/team/AccessPage.vue
+++ b/dashboard/src/pages/team/AccessPage.vue
@@ -57,7 +57,6 @@ const memberCountText = computed(() => {
 					<Button
 						v-if="canEditTeam || canDeleteTeam"
 						class="ml-auto my-auto"
-						variant="subtle"
 						icon="lucide-pencil"
 						label="Edit team"
 						@click="openSettings('team')"

From d430eb98c30617b117ad7333822a6eaaafcda673 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Wed, 9 Sep 2026 07:54:13 +0530
Subject: [PATCH 19/23] refactor(ui): drop wrapper divs around single elements

---
 dashboard/src/components/AddMethodDialog.vue  |   4 +-
 .../billing/BillingContactTaxCard.vue         |   4 +-
 .../billing/CycleBreakdownPanel.vue           |  13 +--
 .../billing/EditBillingProfileDialog.vue      |   4 +-
 .../src/components/billing/EstimatedCard.vue  |   5 +-
 .../components/billing/NextPaymentCard.vue    |   4 +-
 .../src/components/billing/PayingForPanel.vue |   4 +-
 .../src/components/billing/PayingForRow.vue   |  10 +-
 .../billing/PaymentSchedulePanel.vue          |   4 +-
 .../src/components/billing/ProjectsPanel.vue  |   4 +-
 .../src/components/billing/StatementCard.vue  |  23 ++--
 .../src/components/billing/StatementPanel.vue |   4 +-
 .../src/components/billing/WalletCard.vue     |   4 +-
 .../components/billing/WalletHistoryPanel.vue |   4 +-
 .../src/components/servers/ConfigDesigner.vue |  22 ++--
 .../components/team/RoleCapabilitiesPanel.vue |   9 +-
 .../components/team/SentInvitationsPanel.vue  |  49 +++++----
 dashboard/src/pages/addons/Page.vue           | 100 +++++++++---------
 .../src/pages/billing/BillingInvoicesPage.vue |  30 +++---
 .../src/pages/billing/BillingOverviewPage.vue |   4 +-
 20 files changed, 138 insertions(+), 167 deletions(-)

diff --git a/dashboard/src/components/AddMethodDialog.vue b/dashboard/src/components/AddMethodDialog.vue
index 500585f97..89c2b7b5d 100644
--- a/dashboard/src/components/AddMethodDialog.vue
+++ b/dashboard/src/components/AddMethodDialog.vue
@@ -221,9 +221,7 @@ watch(open, (isOpen) => {
 		:show-close-button="!stripeSubmitting"
 	>
 		<template #default>
-			<div v-if="options.loading && !options.data" class="space-y-2">
-				<LoadingText :lines="3" />
-			</div>
+			<LoadingText v-if="options.loading && !options.data" :lines="3" />
 
 			<!-- Stripe card entry: Element renders inside the iframe Stripe hosts. -->
 			<div v-else-if="stripeMode" class="space-y-3">
diff --git a/dashboard/src/components/billing/BillingContactTaxCard.vue b/dashboard/src/components/billing/BillingContactTaxCard.vue
index 8a4648db8..53498b666 100644
--- a/dashboard/src/components/billing/BillingContactTaxCard.vue
+++ b/dashboard/src/components/billing/BillingContactTaxCard.vue
@@ -46,9 +46,7 @@ const isIndia = computed(() => country.value === 'India')
 			/>
 		</template>
 
-		<div v-if="loading" class="space-y-3">
-			<LoadingText :lines="4" />
-		</div>
+		<LoadingText v-if="loading" :lines="4" />
 
 		<dl v-else class="space-y-4 pt-3 text-base">
 			<div class="flex justify-between gap-3">
diff --git a/dashboard/src/components/billing/CycleBreakdownPanel.vue b/dashboard/src/components/billing/CycleBreakdownPanel.vue
index ae11214fd..9126fe701 100644
--- a/dashboard/src/components/billing/CycleBreakdownPanel.vue
+++ b/dashboard/src/components/billing/CycleBreakdownPanel.vue
@@ -30,9 +30,7 @@ const period = computed(() =>
 		title="Breakdown of this cycle"
 		:subtitle="period"
 	>
-		<div v-if="loading" class="space-y-3 p-4">
-			<LoadingText :lines="6" />
-		</div>
+		<LoadingText v-if="loading" :lines="6" class="p-4" />
 
 		<div
 			v-else-if="!lines.length"
@@ -42,9 +40,12 @@ const period = computed(() =>
 		</div>
 
 		<template v-else>
-			<div class="p-4">
-				<ChargeBreakdown :lines="lines" :currency="currency" show-basis />
-			</div>
+			<ChargeBreakdown
+				:lines="lines"
+				:currency="currency"
+				show-basis
+				class="p-4"
+			/>
 
 			<div class="border-t border-outline-gray-2 p-4">
 				<div class="flex items-baseline justify-between gap-3 py-1">
diff --git a/dashboard/src/components/billing/EditBillingProfileDialog.vue b/dashboard/src/components/billing/EditBillingProfileDialog.vue
index 7444f0a74..302c22fa5 100644
--- a/dashboard/src/components/billing/EditBillingProfileDialog.vue
+++ b/dashboard/src/components/billing/EditBillingProfileDialog.vue
@@ -125,9 +125,7 @@ async function submit(): Promise<void> {
 <template>
 	<Dialog v-model:open="open" title="Billing details" size="2xl">
 		<template #default>
-			<div v-if="profile.loading && !profile.data" class="space-y-3">
-				<LoadingText :lines="6" />
-			</div>
+			<LoadingText v-if="profile.loading && !profile.data" :lines="6" />
 
 			<div v-else class="space-y-6">
 				<div class="space-y-3">
diff --git a/dashboard/src/components/billing/EstimatedCard.vue b/dashboard/src/components/billing/EstimatedCard.vue
index 34cc9e514..c5725f33a 100644
--- a/dashboard/src/components/billing/EstimatedCard.vue
+++ b/dashboard/src/components/billing/EstimatedCard.vue
@@ -279,9 +279,8 @@ async function submitAlert(): Promise<void> {
 			</div>
 		</div>
 
-		<div v-if="loading" class="mt-2 w-40">
-			<LoadingText :lines="2" />
-		</div>
+		<LoadingText v-if="loading" :lines="2" class="mt-2 w-40" />
+
 		<template v-else>
 			<div class="mt-1.5 flex flex-wrap items-baseline gap-x-2.5">
 				<span class="text-2xl-semibold tabular-nums text-ink-gray-9">
diff --git a/dashboard/src/components/billing/NextPaymentCard.vue b/dashboard/src/components/billing/NextPaymentCard.vue
index a3cfc159a..11eb4fbd4 100644
--- a/dashboard/src/components/billing/NextPaymentCard.vue
+++ b/dashboard/src/components/billing/NextPaymentCard.vue
@@ -60,9 +60,7 @@ const instrument = computed(() => {
 			</button>
 		</div>
 
-		<div v-if="loading" class="mt-2 w-32">
-			<LoadingText :lines="1" />
-		</div>
+		<LoadingText v-if="loading" :lines="1" class="mt-2 w-32" />
 
 		<template v-else-if="amount > 0">
 			<p class="mt-1.5 text-2xl-semibold tabular-nums text-ink-gray-9">
diff --git a/dashboard/src/components/billing/PayingForPanel.vue b/dashboard/src/components/billing/PayingForPanel.vue
index 90f7fcbc8..a7b41e07c 100644
--- a/dashboard/src/components/billing/PayingForPanel.vue
+++ b/dashboard/src/components/billing/PayingForPanel.vue
@@ -30,9 +30,7 @@ const subtitle = computed(() =>
 
 <template>
 	<SidePanel v-model:open="open" title="Subscriptions" :subtitle="subtitle">
-		<div v-if="loading" class="space-y-3 p-4">
-			<LoadingText :lines="6" />
-		</div>
+		<LoadingText v-if="loading" :lines="6" class="p-4" />
 		<div v-else class="divide-y divide-outline-gray-1 px-4">
 			<PayingForRow
 				v-for="row in rows"
diff --git a/dashboard/src/components/billing/PayingForRow.vue b/dashboard/src/components/billing/PayingForRow.vue
index 32836c531..d86723413 100644
--- a/dashboard/src/components/billing/PayingForRow.vue
+++ b/dashboard/src/components/billing/PayingForRow.vue
@@ -186,11 +186,11 @@ function overAllowance(s: ServiceRow): boolean {
 					</div>
 				</div>
 			</div>
-			<div class="shrink-0 text-right">
-				<span class="block text-sm-medium tabular-nums text-ink-gray-9">
-					{{ money(row.cost ?? 0, currency) }}
-				</span>
-			</div>
+			<span
+				class="block shrink-0 text-right text-sm-medium tabular-nums text-ink-gray-9"
+			>
+				{{ money(row.cost ?? 0, currency) }}
+			</span>
 		</template>
 	</div>
 </template>
diff --git a/dashboard/src/components/billing/PaymentSchedulePanel.vue b/dashboard/src/components/billing/PaymentSchedulePanel.vue
index 74cb56f80..bee34da09 100644
--- a/dashboard/src/components/billing/PaymentSchedulePanel.vue
+++ b/dashboard/src/components/billing/PaymentSchedulePanel.vue
@@ -43,9 +43,7 @@ const blockerLines = computed(() => {
 
 <template>
 	<SidePanel v-model:open="open" title="Payment schedule">
-		<div v-if="loading" class="space-y-3 p-4">
-			<LoadingText :lines="5" />
-		</div>
+		<LoadingText v-if="loading" :lines="5" class="p-4" />
 
 		<template v-else>
 			<!-- What we intend to do -->
diff --git a/dashboard/src/components/billing/ProjectsPanel.vue b/dashboard/src/components/billing/ProjectsPanel.vue
index 58ef6e580..2d01db6b5 100644
--- a/dashboard/src/components/billing/ProjectsPanel.vue
+++ b/dashboard/src/components/billing/ProjectsPanel.vue
@@ -43,9 +43,7 @@ function rowSubtitle(p: Project): string {
 
 <template>
 	<SidePanel v-model:open="open" title="Projects" :subtitle="subtitle">
-		<div v-if="loading" class="space-y-3 p-4">
-			<LoadingText :lines="6" />
-		</div>
+		<LoadingText v-if="loading" :lines="6" class="p-4" />
 		<div v-else class="divide-y divide-outline-gray-1 px-4">
 			<div
 				v-for="p in rows"
diff --git a/dashboard/src/components/billing/StatementCard.vue b/dashboard/src/components/billing/StatementCard.vue
index badf0b73a..fe2fab062 100644
--- a/dashboard/src/components/billing/StatementCard.vue
+++ b/dashboard/src/components/billing/StatementCard.vue
@@ -100,18 +100,17 @@ const hidden = computed(() =>
 			</p>
 
 			<div class="mt-2 flex flex-wrap items-center justify-between gap-2">
-				<div class="-ml-2 flex items-center gap-1">
-					<Button
-						v-if="statement && hidden"
-						variant="ghost"
-						:label="`View all ${statement.rows.length}`"
-						@click="$emit('open')"
-					>
-						<template #suffix>
-							<span class="lucide-chevron-right size-4" aria-hidden="true" />
-						</template>
-					</Button>
-				</div>
+				<Button
+					v-if="statement && hidden"
+					variant="ghost"
+					:label="`View all ${statement.rows.length}`"
+					class="-ml-2"
+					@click="$emit('open')"
+				>
+					<template #suffix>
+						<span class="lucide-chevron-right size-4" aria-hidden="true" />
+					</template>
+				</Button>
 				<p class="ml-auto text-p-sm text-ink-gray-5">
 					For reconciling against your own records. Tax invoices are issued
 					separately.
diff --git a/dashboard/src/components/billing/StatementPanel.vue b/dashboard/src/components/billing/StatementPanel.vue
index 013d56eb5..8d8f93c8b 100644
--- a/dashboard/src/components/billing/StatementPanel.vue
+++ b/dashboard/src/components/billing/StatementPanel.vue
@@ -21,9 +21,7 @@ const rows = computed(() => [...(data.value?.rows ?? [])].reverse())
 		title="Statement of account"
 		:subtitle="data ? billingPeriod(data.from_date, data.to_date) : undefined"
 	>
-		<div v-if="loading" class="space-y-3 p-4">
-			<LoadingText :lines="6" />
-		</div>
+		<LoadingText v-if="loading" :lines="6" class="p-4" />
 		<ul v-else-if="data" class="divide-y divide-outline-gray-1">
 			<li
 				v-for="row in rows"
diff --git a/dashboard/src/components/billing/WalletCard.vue b/dashboard/src/components/billing/WalletCard.vue
index e473f1681..74dfa2557 100644
--- a/dashboard/src/components/billing/WalletCard.vue
+++ b/dashboard/src/components/billing/WalletCard.vue
@@ -84,9 +84,7 @@ function onAddCredit(): void {
 			</button>
 		</div>
 
-		<div v-if="loading" class="mt-2 w-32">
-			<LoadingText :lines="1" />
-		</div>
+		<LoadingText v-if="loading" :lines="1" class="mt-2 w-32" />
 		<template v-else>
 			<p class="mt-1.5 text-2xl-semibold tabular-nums text-ink-gray-9">
 				{{ money(balance, currency) }}
diff --git a/dashboard/src/components/billing/WalletHistoryPanel.vue b/dashboard/src/components/billing/WalletHistoryPanel.vue
index 1f12eff0b..f49e0f1c8 100644
--- a/dashboard/src/components/billing/WalletHistoryPanel.vue
+++ b/dashboard/src/components/billing/WalletHistoryPanel.vue
@@ -58,9 +58,7 @@ function isCredit(entry: CreditLedgerEntry): boolean {
 
 		<!-- Ledger -->
 		<div class="min-h-0 flex-1 overflow-y-auto">
-			<div v-if="ledger.loading && !ledger.data" class="space-y-3 p-4">
-				<LoadingText :lines="5" />
-			</div>
+			<LoadingText v-if="ledger.loading && !ledger.data" :lines="5" class="p-4" />
 			<div
 				v-else-if="!ledger.data?.length"
 				class="px-4 py-12 text-center text-p-sm text-ink-gray-5"
diff --git a/dashboard/src/components/servers/ConfigDesigner.vue b/dashboard/src/components/servers/ConfigDesigner.vue
index d801a3ce5..615619094 100644
--- a/dashboard/src/components/servers/ConfigDesigner.vue
+++ b/dashboard/src/components/servers/ConfigDesigner.vue
@@ -251,12 +251,11 @@ function indexOf(ladder: number[], value: number): number {
 			<!-- Compute: vCPU slider with the derived RAM shown as a pill. -->
 			<div class="flex items-center gap-4">
 				<span class="w-20 shrink-0 text-p-sm text-ink-gray-7">Compute</span>
-				<div class="min-w-0 flex-1">
-					<Slider
-						v-model="vcpuModel"
-						:max="Math.max(0, maxVcpuIndex)"
-					/>
-				</div>
+				<Slider
+					v-model="vcpuModel"
+					:max="Math.max(0, maxVcpuIndex)"
+					class="min-w-0 flex-1"
+				/>
 				<LadderSelect
 					class="shrink-0"
 					:options="vcpuOptions"
@@ -274,12 +273,11 @@ function indexOf(ladder: number[], value: number): number {
 			<!-- Storage: independent ladder slider with rung-by-rung ± steppers. -->
 			<div class="flex items-center gap-4">
 				<span class="w-20 shrink-0 text-p-sm text-ink-gray-7">Storage</span>
-				<div class="min-w-0 flex-1">
-					<Slider
-						v-model="diskModel"
-						:max="Math.max(0, maxDiskIndex)"
-					/>
-				</div>
+				<Slider
+					v-model="diskModel"
+					:max="Math.max(0, maxDiskIndex)"
+					class="min-w-0 flex-1"
+				/>
 				<button
 					type="button"
 					class="shrink-0 rounded-5 bg-surface-gray-2 px-3 py-1.5 text-ink-gray-7 hover:bg-surface-gray-3 disabled:opacity-50"
diff --git a/dashboard/src/components/team/RoleCapabilitiesPanel.vue b/dashboard/src/components/team/RoleCapabilitiesPanel.vue
index b956fc37e..a88796646 100644
--- a/dashboard/src/components/team/RoleCapabilitiesPanel.vue
+++ b/dashboard/src/components/team/RoleCapabilitiesPanel.vue
@@ -28,9 +28,12 @@ watch(role, (value) => {
 			:subtitle="shown ? roleDisplay(shown).description : ''"
 			@update:open="(v: boolean) => !v && (role = null)"
 		>
-			<div v-if="shown" class="p-4">
-				<CapabilityList :caps="shown.capabilities" :palette="capabilities" />
-			</div>
+			<CapabilityList
+				v-if="shown"
+				:caps="shown.capabilities"
+				:palette="capabilities"
+				class="p-4"
+			/>
 		</SidePanel>
 	</Teleport>
 </template>
diff --git a/dashboard/src/components/team/SentInvitationsPanel.vue b/dashboard/src/components/team/SentInvitationsPanel.vue
index 400660ce6..c51916499 100644
--- a/dashboard/src/components/team/SentInvitationsPanel.vue
+++ b/dashboard/src/components/team/SentInvitationsPanel.vue
@@ -89,31 +89,30 @@ function getInvitationKey(invitation: InvitationRow): string {
 </script>
 
 <template>
-	<div class="min-w-0 flex-1 overflow-y-auto px-4 py-5 sm:px-6">
-		<ListView
-			v-model:query="query"
-			:rows="invitations"
-			:columns="columns"
-			:row-key="getInvitationKey"
-			:loading="loading"
-			:error="error"
-			:filters="filters"
-			searchable
-			search-placeholder="Search invitations..."
-			item-label="invitation"
-			:empty-state="{ title: 'No invitations', description: 'Invitations you send to this team will appear here.' }"
-			@retry="reload"
-		>
-			<template v-if="canManageMembers" #toolbar>
-				<Button
-					variant="solid"
-					label="Invite"
-					icon-left="lucide-user-plus"
-					@click="inviteOpen = true"
-				/>
-			</template>
-		</ListView>
-	</div>
+	<ListView
+	class="min-w-0 flex-1 overflow-y-auto px-4 py-5 sm:px-6"
+		v-model:query="query"
+		:rows="invitations"
+		:columns="columns"
+		:row-key="getInvitationKey"
+		:loading="loading"
+		:error="error"
+		:filters="filters"
+		searchable
+		search-placeholder="Search invitations..."
+		item-label="invitation"
+		:empty-state="{ title: 'No invitations', description: 'Invitations you send to this team will appear here.' }"
+		@retry="reload"
+	>
+		<template v-if="canManageMembers" #toolbar>
+			<Button
+				variant="solid"
+				label="Invite"
+				icon-left="lucide-user-plus"
+				@click="inviteOpen = true"
+			/>
+		</template>
+	</ListView>
 
 	<InviteMemberDialog v-model:open="inviteOpen" @invited="reload" />
 </template>
diff --git a/dashboard/src/pages/addons/Page.vue b/dashboard/src/pages/addons/Page.vue
index 64789235a..5732194d8 100644
--- a/dashboard/src/pages/addons/Page.vue
+++ b/dashboard/src/pages/addons/Page.vue
@@ -138,58 +138,56 @@ const cards = computed(() =>
 </script>
 
 <template>
-	<div class="mx-auto mt-10 max-w-3xl px-5">
-		<section class="grid gap-3 md:grid-cols-2">
-			<!-- A card is a link only once its page exists, so nothing invites a
-			     click that goes nowhere. -->
-			<component
-				:is="service.linkable ? 'router-link' : 'div'"
-				v-for="service in cards"
-				:key="service.title"
-				:to="service.linkable ? service.to : undefined"
-				class="flex flex-col gap-3 rounded-6 border p-4"
-				:class="[
-					service.comingSoon
-						? 'border-dashed border-outline-gray-3'
-						: 'border-outline-gray-2',
-					service.linkable ? 'transition-colors hover:border-outline-gray-4' : '',
-				]"
-			>
-				<div class="flex items-start justify-between gap-3">
-					<div
-						class="grid size-8 place-items-center rounded-5 bg-surface-gray-2"
-					>
-						<span :class="service.icon" class="size-4 text-ink-gray-6" />
-					</div>
-					<Badge
-						v-if="service.comingSoon"
-						label="Coming soon"
-					/>
-					<Badge
-						v-else
-						:theme="service.on ? 'green' : 'gray'"
-						:label="service.on ? 'On' : 'Off'"
-					/>
+	<section class="mx-auto mt-10 grid max-w-3xl gap-3 px-5 md:grid-cols-2">
+		<!-- A card is a link only once its page exists, so nothing invites a
+		     click that goes nowhere. -->
+		<component
+			:is="service.linkable ? 'router-link' : 'div'"
+			v-for="service in cards"
+			:key="service.title"
+			:to="service.linkable ? service.to : undefined"
+			class="flex flex-col gap-3 rounded-6 border p-4"
+			:class="[
+				service.comingSoon
+					? 'border-dashed border-outline-gray-3'
+					: 'border-outline-gray-2',
+				service.linkable ? 'transition-colors hover:border-outline-gray-4' : '',
+			]"
+		>
+			<div class="flex items-start justify-between gap-3">
+				<div
+					class="grid size-8 place-items-center rounded-5 bg-surface-gray-2"
+				>
+					<span :class="service.icon" class="size-4 text-ink-gray-6" />
 				</div>
+				<Badge
+					v-if="service.comingSoon"
+					label="Coming soon"
+				/>
+				<Badge
+					v-else
+					:theme="service.on ? 'green' : 'gray'"
+					:label="service.on ? 'On' : 'Off'"
+				/>
+			</div>
 
-				<div>
-					<p class="text-base-medium text-ink-gray-9">{{ service.title }}</p>
-					<p class="mt-1 text-p-base text-ink-gray-5">
-						{{ service.description }}
-					</p>
-				</div>
+			<div>
+				<p class="text-base-medium text-ink-gray-9">{{ service.title }}</p>
+				<p class="mt-1 text-p-base text-ink-gray-5">
+					{{ service.description }}
+				</p>
+			</div>
 
-				<div class="mt-auto flex items-center gap-2 text-p-base">
-					<span :class="service.on ? 'text-ink-gray-7' : 'text-ink-gray-5'">
-						{{ service.meta }}
-					</span>
-					<span
-						v-if="service.linkable"
-						class="lucide-arrow-right ml-auto size-4 text-ink-gray-5"
-						aria-hidden="true"
-					/>
-				</div>
-			</component>
-		</section>
-	</div>
+			<div class="mt-auto flex items-center gap-2 text-p-base">
+				<span :class="service.on ? 'text-ink-gray-7' : 'text-ink-gray-5'">
+					{{ service.meta }}
+				</span>
+				<span
+					v-if="service.linkable"
+					class="lucide-arrow-right ml-auto size-4 text-ink-gray-5"
+					aria-hidden="true"
+				/>
+			</div>
+		</component>
+	</section>
 </template>
diff --git a/dashboard/src/pages/billing/BillingInvoicesPage.vue b/dashboard/src/pages/billing/BillingInvoicesPage.vue
index 58099900c..c4751307a 100644
--- a/dashboard/src/pages/billing/BillingInvoicesPage.vue
+++ b/dashboard/src/pages/billing/BillingInvoicesPage.vue
@@ -177,14 +177,13 @@ const eventDetail = (ev: {
 		<!-- LIST — capped and centered so rows stay scannable when the panel is
          closed; the cap matches the Limit tiers page. -->
 		<div class="min-w-0 flex-1 overflow-y-auto">
-			<div class="mx-auto w-full max-w-3xl px-4 py-5 sm:px-6">
-				<InvoiceListView
-					:invoices="invoices"
-					:loading="invoicesLoading && !invoices.length"
-					:active-name="selected?.name"
-					@row-click="selectRow"
-				/>
-			</div>
+			<InvoiceListView
+				:invoices="invoices"
+				:loading="invoicesLoading && !invoices.length"
+				:active-name="selected?.name"
+				class="mx-auto w-full max-w-3xl px-4 py-5 sm:px-6"
+				@row-click="selectRow"
+			/>
 		</div>
 
 		<!-- Docked receipt panel — the shared SidePanel, slides in beside the
@@ -234,9 +233,7 @@ const eventDetail = (ev: {
 				/>
 			</template>
 
-			<div v-if="detail.loading && !detail.data" class="space-y-3 p-4">
-				<LoadingText :lines="6" />
-			</div>
+			<LoadingText v-if="detail.loading && !detail.data" :lines="6" class="p-4" />
 
 			<!-- Body: the receipt list scrolls on its own; the cost breakdown and
            Activity sit below it, so the totals never shift as the list
@@ -255,12 +252,11 @@ const eventDetail = (ev: {
 				<!-- No inner scroll: the panel already scrolls, and a second scroller
 					     here clipped the receipt mid-row once a team had more than one
 					     machine on the invoice. -->
-				<div class="shrink-0 px-4 pt-4">
-					<ChargeBreakdown
-						:lines="detail.data.items"
-						:currency="detail.data.currency"
-					/>
-				</div>
+				<ChargeBreakdown
+					:lines="detail.data.items"
+					:currency="detail.data.currency"
+					class="shrink-0 px-4 pt-4"
+				/>
 
 				<!-- Cost breakdown + Activity -->
 				<div class="mt-4 border-t border-outline-gray-2 px-4">
diff --git a/dashboard/src/pages/billing/BillingOverviewPage.vue b/dashboard/src/pages/billing/BillingOverviewPage.vue
index 22040fa74..36952a5b5 100644
--- a/dashboard/src/pages/billing/BillingOverviewPage.vue
+++ b/dashboard/src/pages/billing/BillingOverviewPage.vue
@@ -106,9 +106,7 @@ const advancedOpen = ref(false)
 							/>
 							<h2 class="text-base-medium text-ink-gray-8">Advanced</h2>
 						</button>
-						<div v-if="advancedOpen" class="mt-4">
-							<StopBillingCard />
-						</div>
+						<StopBillingCard v-if="advancedOpen" class="mt-4" />
 					</section>
 				</div>
 			</div>

From 257514fe96e95e7c74303dd73a2ca860eabcb832 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Thu, 10 Sep 2026 07:50:13 +0530
Subject: [PATCH 20/23] refactor(ui): responsive page padding and fewer layout
 wrappers

---
 dashboard/src/layouts/AppShell.vue            |   4 +-
 dashboard/src/pages/addons/AIInference.vue    |   2 +-
 dashboard/src/pages/addons/ObjectStorage.vue  |   2 +-
 dashboard/src/pages/addons/Page.vue           | 124 +++++++---------
 .../src/pages/billing/BillingInvoicesPage.vue |  13 +-
 .../src/pages/billing/BillingOverviewPage.vue | 135 ++++++++----------
 .../src/pages/billing/BillingReportsPage.vue  |   6 +-
 .../src/pages/billing/SpendingLimitsPage.vue  |   4 +-
 dashboard/src/pages/servers/NewServerPage.vue |   8 +-
 .../src/pages/settings/SettingsDetailPage.vue |   2 +-
 dashboard/src/pages/team/AccessPage.vue       |   4 +-
 11 files changed, 132 insertions(+), 172 deletions(-)

diff --git a/dashboard/src/layouts/AppShell.vue b/dashboard/src/layouts/AppShell.vue
index 6a318675e..0c5ed6ad0 100644
--- a/dashboard/src/layouts/AppShell.vue
+++ b/dashboard/src/layouts/AppShell.vue
@@ -63,7 +63,7 @@ const breadcrumbs = computed(
 <template>
 	<MobileShell v-if="isMobile">
 		<header
-			class="sticky top-0 z-10 flex h-12 shrink-0 items-center justify-between gap-3 border-b border-outline-gray-1 bg-surface-base px-4"
+			class="sticky top-0 z-10 flex h-12 shrink-0 items-center justify-between gap-3 border-b border-outline-gray-1 bg-surface-base px-3"
 		>
 			<button class="flex items-center gap-1" @click="mobileNavDrawer = true">
 				<Breadcrumbs :items="breadcrumbs" />
@@ -101,7 +101,7 @@ const breadcrumbs = computed(
 		</template>
 
 		<header
-			class="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-outline-gray-1 px-4 sm:px-6"
+			class="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-outline-gray-1 px-4"
 		>
 			<Breadcrumbs :items="breadcrumbs" />
 			<div id="header-actions" class="flex shrink-0 items-center gap-2" />
diff --git a/dashboard/src/pages/addons/AIInference.vue b/dashboard/src/pages/addons/AIInference.vue
index b17f36457..fcd2bbc93 100644
--- a/dashboard/src/pages/addons/AIInference.vue
+++ b/dashboard/src/pages/addons/AIInference.vue
@@ -80,7 +80,7 @@ const activateService = async (): Promise<void> => {
 		</div>
 
 		<template v-else>
-			<div class="mx-auto w-full max-w-3xl shrink-0 px-6 pt-8">
+			<div class="mx-auto w-full max-w-3xl shrink-0 p-3 md:p-4 lg:mt-6">
 				<div class="flex items-start gap-3">
 					<span
 						class="grid size-10 shrink-0 place-items-center rounded-6 bg-surface-gray-2 text-ink-gray-7"
diff --git a/dashboard/src/pages/addons/ObjectStorage.vue b/dashboard/src/pages/addons/ObjectStorage.vue
index 1a8a949fd..5139cf7d0 100644
--- a/dashboard/src/pages/addons/ObjectStorage.vue
+++ b/dashboard/src/pages/addons/ObjectStorage.vue
@@ -116,7 +116,7 @@ const activateService = async (): Promise<void> => {
 
 		<template v-else-if="managedService">
 			<div class="min-h-0 flex-1 overflow-y-auto">
-				<div class="mx-auto w-full max-w-5xl px-6 pb-8 pt-8">
+				<div class="mx-auto w-full max-w-5xl p-3 md:p-4 lg:mt-6">
 					<!-- No icon tile: it would indent the heading 52px while every section
 					     below it starts at the container edge. -->
 					<div class="min-w-0">
diff --git a/dashboard/src/pages/addons/Page.vue b/dashboard/src/pages/addons/Page.vue
index 5732194d8..5edbc2647 100644
--- a/dashboard/src/pages/addons/Page.vue
+++ b/dashboard/src/pages/addons/Page.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Badge, useCall } from 'frappe-ui'
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { API, method } from '@/api/methods'
 import { useSession } from '@/composables/useSession'
 import { whenTeamReady } from '@/composables/useTeamScope'
@@ -33,14 +32,11 @@ const metered = useCall<MeteredServices, { team: string }>({
 	immediate: false,
 	refetch: true,
 })
+
 whenTeamReady(() => metered.reload())
 
 const currency = computed(() => metered.data?.currency ?? 'USD')
 
-// The catalog is product copy; whether a service is rolled out comes from the
-// Central Settings feature flags, and what it costs and has used comes from the
-// API. `resourceType` is the join key. Every service names the page it will
-// own — see `linkable` below.
 const CATALOG = [
 	{
 		resourceType: 'Tokens',
@@ -68,7 +64,7 @@ const CATALOG = [
 		title: 'PDF rendering',
 		description: 'PDFs from your print formats, rendered off your server.',
 		noun: 'documents',
-		to: '/addons/pdf-rendering',
+		to: null,
 		flag: 'pdf' as const,
 	},
 	{
@@ -78,92 +74,72 @@ const CATALOG = [
 		description:
 			'Send mail from your own domain. DKIM and SPF handled for you.',
 		noun: 'emails',
-		to: '/addons/email-sending',
+		to: null,
 		flag: 'email' as const,
 	},
 ]
 
-// A card turns into a link the moment its route exists — registering the route
-// is the only step. Asking the router beats a hand-kept flag here, which would
-// be a second place to remember and a dead link when someone forgets.
-const router = useRouter()
-const isRouted = (to: string): boolean => router.resolve(to).matched.length > 0
-
 const number = new Intl.NumberFormat(undefined, {
 	notation: 'compact',
 	maximumFractionDigits: 1,
 })
 
-// Per-unit rates run to five decimals, so quote them per thousand — $0.22 per
-// 1,000 documents reads where $0.00022 each does not.
-function rateLabel(rate: number, noun: string): string {
-	return `${money(rate * 1000, currency.value)} per 1,000 ${noun}`
-}
+const rateOf = (resourceType: string | null): number | undefined =>
+	metered.data?.services.find((s) => s.resource_type === resourceType)
+		?.locked_rate ??
+	metered.data?.available_plans.find((p) => p.resource_type === resourceType)
+		?.rate
+
+const rateLabel = (rate: number | undefined, noun: string): string =>
+	rate == null
+		? 'Pricing to be announced'
+		: `${money(rate * 1000, currency.value)} per 1,000 ${noun}`
 
 const cards = computed(() =>
 	CATALOG.map((entry) => {
-		// Off flag = not rolled out yet, whatever the catalog or a seeded
-		// subscription says.
-		const comingSoon = !features[entry.flag]
-		const subscribed = metered.data?.services.find(
-			(s) => s.resource_type === entry.resourceType,
-		)
-		const plan = metered.data?.available_plans.find(
-			(p) => p.resource_type === entry.resourceType,
-		)
-		const rate = subscribed?.locked_rate ?? plan?.rate
+		const live = features[entry.flag] && !!entry.to
+		const subscribed = live
+			? metered.data?.services.find(
+					(s) => s.resource_type === entry.resourceType,
+				)
+			: undefined
+		const usage = subscribed?.period_usage
 		return {
 			...entry,
-			comingSoon,
+			to: live ? entry.to : '',
+			live,
 			on: !!subscribed,
-			linkable: !comingSoon && isRouted(entry.to),
-			// Coming soon: what it will cost. On: what it has done this cycle.
-			// Off: what it would cost.
-			// A free service quotes 0, so ask whether a rate exists, not whether
-			// it is non-zero.
-			meta: comingSoon
-				? rate != null
-					? rateLabel(rate, entry.noun)
-					: 'Pricing to be announced'
-				: subscribed
-					? subscribed.period_usage
-						? `${number.format(subscribed.period_usage)} ${entry.noun} this cycle`
-						: 'No usage this cycle'
-					: rate != null
-						? rateLabel(rate, entry.noun)
-						: 'Not available yet',
+			meta: subscribed
+				? usage
+					? `${number.format(usage)} ${entry.noun} this cycle`
+					: 'No usage this cycle'
+				: rateLabel(rateOf(entry.resourceType), entry.noun),
 		}
 	}),
 )
 </script>
 
 <template>
-	<section class="mx-auto mt-10 grid max-w-3xl gap-3 px-5 md:grid-cols-2">
-		<!-- A card is a link only once its page exists, so nothing invites a
-		     click that goes nowhere. -->
-		<component
-			:is="service.linkable ? 'router-link' : 'div'"
+	<section
+		class="mx-auto lg:mt-10 grid max-w-3xl gap-3 md:gap-4 p-3 md:p-4 md:grid-cols-2"
+	>
+		<router-link
 			v-for="service in cards"
 			:key="service.title"
-			:to="service.linkable ? service.to : undefined"
-			class="flex flex-col gap-3 rounded-6 border p-4"
-			:class="[
-				service.comingSoon
-					? 'border-dashed border-outline-gray-3'
-					: 'border-outline-gray-2',
-				service.linkable ? 'transition-colors hover:border-outline-gray-4' : '',
-			]"
+			:to="service.to"
+			class="flex flex-col rounded-6 border p-4"
+			:class="
+				service.live
+					? 'border-outline-gray-2 transition-colors hover:border-outline-gray-4'
+					: 'border-dashed border-outline-gray-3 pointer-events-none'
+			"
 		>
-			<div class="flex items-start justify-between gap-3">
-				<div
-					class="grid size-8 place-items-center rounded-5 bg-surface-gray-2"
-				>
+			<!-- icon and badge header -->
+			<div class="flex items-start justify-between gap-3 mb-3">
+				<div class="grid size-8 place-items-center rounded-5 bg-surface-gray-2">
 					<span :class="service.icon" class="size-4 text-ink-gray-6" />
 				</div>
-				<Badge
-					v-if="service.comingSoon"
-					label="Coming soon"
-				/>
+				<Badge v-if="!service.live" label="Coming soon" />
 				<Badge
 					v-else
 					:theme="service.on ? 'green' : 'gray'"
@@ -171,23 +147,21 @@ const cards = computed(() =>
 				/>
 			</div>
 
-			<div>
-				<p class="text-base-medium text-ink-gray-9">{{ service.title }}</p>
-				<p class="mt-1 text-p-base text-ink-gray-5">
-					{{ service.description }}
-				</p>
-			</div>
+			<p class="text-base-medium text-ink-gray-9">{{ service.title }}</p>
+			<p class="mt-1 text-p-base text-ink-gray-5 mb-3">
+				{{ service.description }}
+			</p>
 
 			<div class="mt-auto flex items-center gap-2 text-p-base">
 				<span :class="service.on ? 'text-ink-gray-7' : 'text-ink-gray-5'">
 					{{ service.meta }}
 				</span>
+
 				<span
-					v-if="service.linkable"
+					v-if="service.to"
 					class="lucide-arrow-right ml-auto size-4 text-ink-gray-5"
-					aria-hidden="true"
 				/>
 			</div>
-		</component>
+		</router-link>
 	</section>
 </template>
diff --git a/dashboard/src/pages/billing/BillingInvoicesPage.vue b/dashboard/src/pages/billing/BillingInvoicesPage.vue
index c4751307a..8fa6a843d 100644
--- a/dashboard/src/pages/billing/BillingInvoicesPage.vue
+++ b/dashboard/src/pages/billing/BillingInvoicesPage.vue
@@ -181,7 +181,7 @@ const eventDetail = (ev: {
 				:invoices="invoices"
 				:loading="invoicesLoading && !invoices.length"
 				:active-name="selected?.name"
-				class="mx-auto w-full max-w-3xl px-4 py-5 sm:px-6"
+				class="p-3 md:p-4"
 				@row-click="selectRow"
 			/>
 		</div>
@@ -200,10 +200,7 @@ const eventDetail = (ev: {
 					<span class="truncate text-base-semibold text-ink-gray-9">
 						{{ shown.name }}
 					</span>
-					<Badge
-						:theme="invoiceTheme(shown.status)"
-						:label="shown.status"
-					/>
+					<Badge :theme="invoiceTheme(shown.status)" :label="shown.status" />
 				</div>
 			</template>
 			<template #subtitle>
@@ -233,7 +230,11 @@ const eventDetail = (ev: {
 				/>
 			</template>
 
-			<LoadingText v-if="detail.loading && !detail.data" :lines="6" class="p-4" />
+			<LoadingText
+				v-if="detail.loading && !detail.data"
+				:lines="6"
+				class="p-4"
+			/>
 
 			<!-- Body: the receipt list scrolls on its own; the cost breakdown and
            Activity sit below it, so the totals never shift as the list
diff --git a/dashboard/src/pages/billing/BillingOverviewPage.vue b/dashboard/src/pages/billing/BillingOverviewPage.vue
index 36952a5b5..57a60c449 100644
--- a/dashboard/src/pages/billing/BillingOverviewPage.vue
+++ b/dashboard/src/pages/billing/BillingOverviewPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Alert } from 'frappe-ui'
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import BillingContactTaxCard from '@/components/billing/BillingContactTaxCard.vue'
 import CollectionActionBanner from '@/components/billing/CollectionActionBanner.vue'
 import CycleBreakdownPanel from '@/components/billing/CycleBreakdownPanel.vue'
@@ -54,87 +54,70 @@ const advancedOpen = ref(false)
 </script>
 
 <template>
-	<div class="flex h-full flex-col">
-		<!-- Content + docked wallet-history panel (like the invoice tray): the panel
-         shares the row, the content stays bright beside it — no modal overlay. -->
-		<div class="flex min-h-0 flex-1">
-			<div class="cards-host min-w-0 flex-1 overflow-y-auto">
-				<div class="mx-auto w-full max-w-3xl space-y-5 px-6 py-8">
-					<!-- Until the billing profile is filled, ask the team to complete it
+	<!-- Content + docked wallet-history panel (like the invoice tray): the panel
+       shares the row, the content stays bright beside it — no modal overlay. -->
+	<div class="flex h-full min-h-0">
+		<div
+			class="grid min-w-0 flex-1 grid-cols-[min(48rem,100%)] content-start justify-center gap-3 md:gap-4
+      overflow-y-auto p-3 md:p-4 lg:mt-6  [container-type:inline-size]"
+		>
+			<!-- Until the billing profile is filled, ask the team to complete it
                first — money-moving actions stay gated on it. -->
-					<Alert
-						v-if="!complete"
-						theme="amber"
-						title="Add your billing details"
-						description="Currency, legal name, and address are needed to add credit, save a payment method, and provision servers."
-						:primary-action="{ label: 'Add billing details', onClick: () => { setupDialogOpen = true } }"
-					/>
+			<Alert
+				v-if="!complete"
+				theme="amber"
+				title="Add your billing details"
+				description="Currency, legal name, and address are needed to add credit, save a payment method, and provision servers."
+				:primary-action="{ label: 'Add billing details', onClick: () => { setupDialogOpen = true } }"
+			/>
 
-					<CollectionActionBanner />
-					<!-- The cycle figure is the page's headline, so it gets the full
+			<CollectionActionBanner />
+			<!-- The cycle figure is the page's headline, so it gets the full
                width; what happens to it next sits in the pair beneath. -->
-					<EstimatedCard
-						:active="showCycleBreakdown"
-						@open="showCycleBreakdown = true"
-					/>
-					<div class="cards-row grid gap-4">
-						<NextPaymentCard
-							:active="showSchedule"
-							@open="showSchedule = true"
-						/>
-						<WalletCard
-							:active="showWalletHistory"
-							@open="showWalletHistory = true"
-						/>
-					</div>
-					<PayingForCard @open="showPayingFor = true" />
-					<ProjectsCard @open="showProjects = true" />
-					<PaymentMethodsCard />
-					<BillingContactTaxCard @edit="setupDialogOpen = true" />
-
-					<!-- Advanced — collapsed home for the rare, destructive-adjacent
-               verbs (Stop billing). -->
-					<section>
-						<button
-							class="-mx-2 flex items-center gap-1.5 rounded-5 px-2 py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4"
-							:aria-expanded="advancedOpen"
-							@click="advancedOpen = !advancedOpen"
-						>
-							<span
-								class="lucide-chevron-right size-3.5 shrink-0 text-ink-gray-5 transition-transform duration-150 ease-out"
-								:class="advancedOpen ? 'rotate-90' : ''"
-							/>
-							<h2 class="text-base-medium text-ink-gray-8">Advanced</h2>
-						</button>
-						<StopBillingCard v-if="advancedOpen" class="mt-4" />
-					</section>
-				</div>
+			<EstimatedCard
+				:active="showCycleBreakdown"
+				@open="showCycleBreakdown = true"
+			/>
+			<div
+				class="grid gap-3 md:gap-4 [@container_(min-width:50rem)]:grid-cols-2"
+			>
+				<NextPaymentCard :active="showSchedule" @open="showSchedule = true" />
+				<WalletCard
+					:active="showWalletHistory"
+					@open="showWalletHistory = true"
+				/>
 			</div>
+			<PayingForCard @open="showPayingFor = true" />
+			<ProjectsCard @open="showProjects = true" />
+			<PaymentMethodsCard />
+			<BillingContactTaxCard @edit="setupDialogOpen = true" />
 
-			<!-- The shared docked SidePanel owns its own slide-in/out. Only one is
-           ever open (see `tray`), so they can all mount here. -->
-			<WalletHistoryPanel v-model:open="showWalletHistory" />
-			<CycleBreakdownPanel v-model:open="showCycleBreakdown" />
-			<PaymentSchedulePanel v-model:open="showSchedule" />
-			<PayingForPanel v-model:open="showPayingFor" />
-			<ProjectsPanel v-model:open="showProjects" />
+			<!-- Advanced — collapsed home for the rare, destructive-adjacent
+               verbs (Stop billing). -->
+			<section>
+				<button
+					class="-mx-2 flex items-center gap-1.5 rounded-5 px-2 py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4"
+					:aria-expanded="advancedOpen"
+					@click="advancedOpen = !advancedOpen"
+				>
+					<span
+						class="lucide-chevron-right size-3.5 shrink-0 text-ink-gray-5 transition-transform duration-150 ease-out"
+						:class="advancedOpen ? 'rotate-90' : ''"
+					/>
+					<h2 class="text-base-medium text-ink-gray-8">Advanced</h2>
+				</button>
+				<StopBillingCard v-if="advancedOpen" class="mt-4" />
+			</section>
 		</div>
 
-		<EditBillingProfileDialog v-model="setupDialogOpen" />
+		<!-- The shared docked SidePanel owns its own slide-in/out. Only one is
+         ever open (see `tray`), so they can all mount here. -->
+		<WalletHistoryPanel v-model:open="showWalletHistory" />
+		<CycleBreakdownPanel v-model:open="showCycleBreakdown" />
+		<PaymentSchedulePanel v-model:open="showSchedule" />
+		<PayingForPanel v-model:open="showPayingFor" />
+		<ProjectsPanel v-model:open="showProjects" />
 	</div>
-</template>
 
-<style scoped>
-/* Queried on the content column, which is the space the page actually gets:
-   it narrows when the wallet panel opens and widens when the sidebar collapses,
-   so one rule covers both. (The max-w-3xl box inside can't be the container —
-   it reads 768px regardless, so it never sees either change.) */
-.cards-host {
-	container-type: inline-size;
-}
-@container (min-width: 50rem) {
-	.cards-row {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-}
-</style>
+	<EditBillingProfileDialog v-model="setupDialogOpen" />
+</template>
diff --git a/dashboard/src/pages/billing/BillingReportsPage.vue b/dashboard/src/pages/billing/BillingReportsPage.vue
index c1e6bf89f..8b6b222be 100644
--- a/dashboard/src/pages/billing/BillingReportsPage.vue
+++ b/dashboard/src/pages/billing/BillingReportsPage.vue
@@ -139,8 +139,10 @@ function exportUrl(report: string): string {
 <template>
 	<div class="flex h-full min-h-0">
 		<div class="min-w-0 flex-1 overflow-y-auto">
-			<div class="mx-auto w-full max-w-5xl space-y-5 px-6 py-8">
-				<div v-if="loading" class="space-y-5">
+			<div
+				class="mx-auto w-full max-w-5xl space-y-3 p-3 md:space-y-4 md:p-4 lg:mt-6"
+			>
+				<div v-if="loading" class="space-y-3 md:space-y-4">
 					<BillingCard v-for="i in 2" :key="i" title=" ">
 						<LoadingText :lines="4" />
 					</BillingCard>
diff --git a/dashboard/src/pages/billing/SpendingLimitsPage.vue b/dashboard/src/pages/billing/SpendingLimitsPage.vue
index 847b6b409..59900554d 100644
--- a/dashboard/src/pages/billing/SpendingLimitsPage.vue
+++ b/dashboard/src/pages/billing/SpendingLimitsPage.vue
@@ -223,7 +223,9 @@ const levels = computed(() => {
 
 <template>
 	<div class="h-full overflow-y-auto">
-		<div class="mx-auto flex w-full max-w-3xl flex-col gap-8 px-6 py-8">
+		<div
+			class="mx-auto flex w-full max-w-3xl flex-col gap-3 p-3 md:gap-4 md:p-4 lg:mt-6"
+		>
 			<LoadingText v-if="tier.loading && !tier.data" :lines="6" />
 
 			<template v-else-if="levels.length">
diff --git a/dashboard/src/pages/servers/NewServerPage.vue b/dashboard/src/pages/servers/NewServerPage.vue
index db79bd35a..dfd81cdb0 100644
--- a/dashboard/src/pages/servers/NewServerPage.vue
+++ b/dashboard/src/pages/servers/NewServerPage.vue
@@ -407,7 +407,7 @@ async function submit() {
 
 		<div class="flex min-h-0 flex-1 flex-col-reverse lg:flex-row">
 			<!-- Stepped form (left) -->
-			<div class="w-full overflow-y-auto p-4 lg:w-[40rem] lg:shrink-0">
+			<div class="w-full overflow-y-auto p-3 md:p-4 lg:w-[40rem] lg:shrink-0">
 				<p v-if="loading" class="text-p-sm text-ink-gray-5">Loading regions…</p>
 				<p v-else-if="!regions.length" class="text-p-sm text-ink-gray-5">
 					No active regions are available right now.
@@ -536,11 +536,7 @@ async function submit() {
 										>{{ flagEmoji(r.country_code) }}</span
 									>
 									{{ regionLabel(r) }}
-									<Badge
-										v-if="!r.reachable"
-										label="Unreachable"
-										class="ml-1"
-									/>
+									<Badge v-if="!r.reachable" label="Unreachable" class="ml-1" />
 								</Button>
 							</div>
 						</div>
diff --git a/dashboard/src/pages/settings/SettingsDetailPage.vue b/dashboard/src/pages/settings/SettingsDetailPage.vue
index ab97b2e10..61ef6348f 100644
--- a/dashboard/src/pages/settings/SettingsDetailPage.vue
+++ b/dashboard/src/pages/settings/SettingsDetailPage.vue
@@ -48,7 +48,7 @@ watch(
 
 <template>
 	<div v-if="tab && allowed" class="h-full overflow-y-auto">
-		<div class="mx-auto max-w-2xl px-4 py-5 sm:px-6">
+		<div class="mx-auto max-w-2xl p-3 md:p-4">
 			<header>
 				<h1 class="text-lg-semibold text-ink-gray-8">{{ tab.title }}</h1>
 				<p
diff --git a/dashboard/src/pages/team/AccessPage.vue b/dashboard/src/pages/team/AccessPage.vue
index b06924bf4..8323f6681 100644
--- a/dashboard/src/pages/team/AccessPage.vue
+++ b/dashboard/src/pages/team/AccessPage.vue
@@ -33,7 +33,9 @@ const memberCountText = computed(() => {
 <template>
 	<div class="flex h-full min-h-0">
 		<div class="min-w-0 flex-1 overflow-y-auto">
-			<main class="mx-auto flex flex-col max-w-3xl gap-3 mt-10 px-3 xl:p-0">
+			<main
+				class="mx-auto flex max-w-3xl flex-col gap-3 md:gap-4 p-3 md:p-4 lg:mt-6"
+			>
 				<div class="mb-5 flex items-center gap-3">
 					<!-- Square: this is the organisation, not a person. Circles stay
 					     reserved for people across the console. -->

From 2b026491c6933f2aaee2b9fbadd7074804fb3849 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 11 Sep 2026 14:23:39 +0530
Subject: [PATCH 21/23] fix(teams): gate leave_team on team membership

---
 central/api/teams.py                  | 1 +
 central/tests/test_team_management.py | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/central/api/teams.py b/central/api/teams.py
index cb1deda26..cf876dae3 100644
--- a/central/api/teams.py
+++ b/central/api/teams.py
@@ -236,6 +236,7 @@ def remove_team_member(team: str, user: str) -> dict:
 
 
 @frappe.whitelist(methods=["POST"])
+@require_team_member
 def leave_team(team: str) -> dict:
 	frappe.get_doc("Team", team).leave()
 	return {"team": team, "left": True}
diff --git a/central/tests/test_team_management.py b/central/tests/test_team_management.py
index 0524bd1fc..83f6494c0 100644
--- a/central/tests/test_team_management.py
+++ b/central/tests/test_team_management.py
@@ -324,6 +324,13 @@ def test_my_teams_carries_role_member_count_and_created(self):
 		self.assertEqual(rows[0]["members"], 3)
 		self.assertTrue(rows[0]["created"])
 
+	def test_leave_team_rejects_a_non_member_before_reading_the_team(self):
+		outsider = create_user("team.outsider@example.test")
+		frappe.set_user(outsider)
+
+		with self.assertRaises(frappe.PermissionError):
+			leave_team(self.team.name)
+
 	def test_member_leaves_but_owner_cannot(self):
 		frappe.set_user(self.viewer)
 		leave_team(self.team.name)

From 36aad386ce42a26a62a1c6b8807a39078c730548 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 11 Sep 2026 14:23:39 +0530
Subject: [PATCH 22/23] fix(teams): scope the leave bypass to self-removal

---
 central/central/doctype/team/team.py  | 27 +++++++++++++++++----------
 central/tests/test_team_management.py |  9 +++++++++
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/central/central/doctype/team/team.py b/central/central/doctype/team/team.py
index 8404a9aec..a70b983f0 100644
--- a/central/central/doctype/team/team.py
+++ b/central/central/doctype/team/team.py
@@ -155,9 +155,8 @@ def leave(self) -> None:
 			frappe.throw(_("You are not a member of this team."))
 		for row in rows:
 			self.remove(row)
-		self.flags.from_member_leaving = True
-		# Being the member on the way out authorizes this write; a plain member
-		# holds neither team:manage_members nor write on the Team doc.
+		# A plain member holds no write permission on the Team doc; _validate_changes
+		# is the real gate and allows this diff only because it is a self-removal.
 		self.save(ignore_permissions=True)
 
 	# Internal; the HTTP surface is central.api.teams.transfer_team_ownership.
@@ -267,12 +266,7 @@ def _validate_role_scope(self) -> None:
 				frappe.throw(_("Team Role {0} does not belong to this team.").format(member.role))
 
 	def _validate_changes(self) -> None:
-		if (
-			self.is_new()
-			or self.flags.from_team_invitation
-			or self.flags.from_member_leaving
-			or self._is_operator()
-		):
+		if self.is_new() or self.flags.from_team_invitation or self._is_operator():
 			if (
 				self.is_new()
 				and not self.flags.from_user_bootstrap
@@ -288,7 +282,7 @@ def _validate_changes(self) -> None:
 
 		if self._metadata_changed(previous):
 			self._require_capability("team:edit")
-		if self._members_changed(previous):
+		if self._members_changed(previous) and not self._is_self_removal(previous):
 			self._require_capability("team:manage_members")
 			self._validate_sensitive_member_changes(previous)
 
@@ -300,6 +294,19 @@ def _members_changed(self, previous) -> bool:
 			previous
 		)
 
+	def _is_self_removal(self, previous) -> bool:
+		"""The entire member diff is the caller dropping their own rows: leaving.
+		Anything else rides the normal team:manage_members gate."""
+		user = frappe.session.user
+		if self.owner_user != previous.owner_user or user == previous.owner_user:
+			return False
+		before = self._grants_by_user(previous)
+		after = self._grants_by_user(self)
+		if user not in before or user in after:
+			return False
+		del before[user]
+		return before == after
+
 	def _validate_sensitive_member_changes(self, previous) -> None:
 		before = self._grants_by_user(previous)
 		after = self._grants_by_user(self)
diff --git a/central/tests/test_team_management.py b/central/tests/test_team_management.py
index 83f6494c0..9be718add 100644
--- a/central/tests/test_team_management.py
+++ b/central/tests/test_team_management.py
@@ -331,6 +331,15 @@ def test_leave_team_rejects_a_non_member_before_reading_the_team(self):
 		with self.assertRaises(frappe.PermissionError):
 			leave_team(self.team.name)
 
+	def test_leaving_cannot_carry_other_member_changes(self):
+		frappe.set_user(self.viewer)
+		team = frappe.get_doc("Team", self.team.name)
+		for row in team._get_member_rows(self.viewer) + team._get_member_rows(self.admin):
+			team.remove(row)
+
+		with self.assertRaises(frappe.PermissionError):
+			team.save(ignore_permissions=True)
+
 	def test_member_leaves_but_owner_cannot(self):
 		frappe.set_user(self.viewer)
 		leave_team(self.team.name)

From 0cc0ebf2a3ac0c599d045e9b4cd12bcc4f4b2dde Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 11 Sep 2026 14:39:49 +0530
Subject: [PATCH 23/23] test(teams): leaving twice raises a permission error

---
 central/tests/test_team_management.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/central/tests/test_team_management.py b/central/tests/test_team_management.py
index 9be718add..19fd8ae84 100644
--- a/central/tests/test_team_management.py
+++ b/central/tests/test_team_management.py
@@ -348,7 +348,7 @@ def test_member_leaves_but_owner_cannot(self):
 		self.assertFalse(team._get_member_rows(self.viewer))
 		self.assertFalse(can(self.viewer, team.name, "server:view"))
 
-		with self.assertRaises(frappe.ValidationError):
+		with self.assertRaises(frappe.PermissionError):
 			leave_team(self.team.name)
 
 		frappe.set_user(self.owner)