fix(web): keep the profile chrome from crowding its neighbours

The leading-icon rules added for the Browser sub-trigger were scoped with
`:first-of-type`, which on a sub-trigger with no leading icon matches the
trailing chevron instead — the compound selector outranks its `ms-auto` and
took away the right alignment on the existing Appearance and Turn triggers.
Scoping away from the last child leaves the chevron alone.

The profile badge in the chrome row was unbounded while profile names run to 48
characters, so it took width from the URL input, the only flexible element
there. It is capped and truncated.

Removing a profile now confirms first, like every other destructive action in
Settings, and Incognito is no longer offered as — or resolved to — the default
profile: as a default it would open every new tab into storage discarded on
close, and the settings list and the resolved default now agree on that.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: juliusmarminge

apps/web/src/browser/browserDefaults.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from "vite-plus/test";
+import { DEFAULT_BROWSER_PROFILE_ID, INCOGNITO_BROWSER_PROFILE_ID } from "@t3tools/contracts";
+
+const settings = vi.hoisted(() => ({ current: {} as Record<string, unknown> }));
+
+vi.mock("~/hooks/useSettings", () => ({
+  getClientSettings: () => settings.current,
+  useClientSettings: () => undefined,
+  ensureClientSettingsHydrated: () => Promise.resolve(),
+}));
+
+const { getBrowserDefaults } = await import("./browserDefaults");
+
+const withDefaultProfile = (browserDefaultProfileId: string) => {
+  settings.current = {
+    browserDefaultViewport: { _tag: "fill" },
+    browserDefaultZoomFactor: 1,
+    browserDefaultAppearance: "system",
+    browserAutoShowFloatingPreview: true,
+    browserProfiles: [{ id: "work", name: "Work", kind: "persistent" }],
+    browserDefaultProfileId,
+  };
+  return getBrowserDefaults();
+};
+
+describe("getBrowserDefaults profile resolution", () => {
+  it("keeps a configured persistent profile", () => {
+    expect(withDefaultProfile("work").profileId).toBe("work");
+  });
+
+  it("falls back for an unknown profile", () => {
+    expect(withDefaultProfile("deleted").profileId).toBe(DEFAULT_BROWSER_PROFILE_ID);
+  });
+
+  it("refuses incognito as the default", () => {
+    // A stored incognito default would open every new tab into storage that is
+    // discarded on close, and the settings list no longer offers it — so the
+    // row badged "Default" must be the one tabs actually open under.
+    expect(withDefaultProfile(INCOGNITO_BROWSER_PROFILE_ID).profileId).toBe(
+      DEFAULT_BROWSER_PROFILE_ID,
+    );
+  });
+});

apps/web/src/browser/browserDefaults.ts

@@ -15,7 +15,6 @@
  */
 import {
   DEFAULT_BROWSER_PROFILE_ID,
-  findBrowserProfile,
   resolveBrowserProfiles,
   type BrowserProfile,
   type DesktopPreviewTabDefaults,
@@ -57,9 +56,15 @@ const toBrowserDefaults = (settings: {
     profiles,
     // A default pointing at a deleted profile falls back rather than opening
     // tabs into a partition with no profile behind it.
+    // Incognito is a per-tab choice, not a default: a profile that discards
+    // everything on close would leave every new tab signed out. Excluding it
+    // here keeps the resolved default equal to what the settings list offers,
+    // so the row badged "Default" is the one tabs actually open under.
     profileId:
-      findBrowserProfile(profiles, settings.browserDefaultProfileId)?.id ??
-      DEFAULT_BROWSER_PROFILE_ID,
+      profiles.find(
+        (profile) =>
+          profile.id === settings.browserDefaultProfileId && profile.kind !== "incognito",
+      )?.id ?? DEFAULT_BROWSER_PROFILE_ID,
   };
 };
 

apps/web/src/components/preview/PreviewView.tsx

@@ -697,7 +697,10 @@ export function PreviewView({
           // "Default" would be noise on the common case, while a tab in
           // another profile is exactly what needs calling out.
           activeProfile && activeProfile.id !== browserDefaults.profileId ? (
-            <Badge variant="outline" className="shrink-0">
+            // Capped and truncated: profile names run to 48 characters, and an
+            // unbounded badge in this row takes its width from the URL input,
+            // the only flexible element in the compact chrome.
+            <Badge variant="outline" className="max-w-28 shrink-0 truncate">
               {activeProfile.name}
             </Badge>
           ) : null

apps/web/src/components/settings/IntegrationsSettings.tsx

@@ -8,6 +8,7 @@
  */
 import {
   BROWSER_PROFILE_MAX_COUNT,
+  type BrowserProfile,
   BROWSER_PROFILE_NAME_MAX_LENGTH,
   DEFAULT_BROWSER_AUTO_SHOW_FLOATING_PREVIEW,
   DEFAULT_BROWSER_PROFILE_ID,
@@ -28,6 +29,7 @@ import {
 } from "@t3tools/contracts";
 import { PREVIEW_VIEWPORT_PRESETS } from "@t3tools/shared/previewViewport";
 import { InfoIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
+import { useState } from "react";
 import type { ReactNode } from "react";
 
 import { ScreenRotationIcon } from "~/browser/ScreenRotationIcon";
@@ -37,6 +39,15 @@ import { usePrimaryEnvironment } from "~/state/environments";
 import { isElectron } from "../../env";
 
 import { Badge } from "../ui/badge";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPopup,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
 import { Button } from "../ui/button";
 import { DraftInput } from "../ui/draft-input";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "../ui/number-field";
@@ -477,6 +488,7 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
   const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
   const updateSettings = useUpdatePrimarySettings();
   const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
 
   const addProfile = () => {
     if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
@@ -502,6 +514,7 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
   };
 
   const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
     // Drop the partition's data too, otherwise a removed profile's cookies
     // stay on disk with nothing in the UI pointing at them.
     if (environmentId) {
@@ -564,7 +577,7 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
                         variant="ghost-muted"
                         disabled={disabled}
                         aria-label={`Remove ${profile.name}`}
-                        onClick={() => removeProfile(profile.id)}
+                        onClick={() => setProfilePendingRemoval(profile)}
                       >
                         <Trash2Icon />
                       </Button>
@@ -577,6 +590,33 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
           );
         })}
       </div>
+      <AlertDialog
+        open={profilePendingRemoval !== null}
+        onOpenChange={(open) => {
+          if (!open) setProfilePendingRemoval(null);
+        }}
+      >
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove “{profilePendingRemoval?.name}”?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Its cookies, logins, and cache are deleted with it. Tabs open in this profile move to
+              the default one.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (profilePendingRemoval) removeProfile(profilePendingRemoval.id);
+              }}
+            >
+              Remove profile
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialog>
     </SettingsRow>
   );
 }
@@ -585,7 +625,11 @@ function BrowserDefaultProfileSetting({ disabled }: { readonly disabled: boolean
   const userProfiles = useClientSettings((settings) => settings.browserProfiles);
   const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
   const updateSettings = useUpdatePrimarySettings();
-  const profiles = resolveBrowserProfiles(userProfiles);
+  // Incognito is deliberately absent: as a default it would open every tab
+  // into storage that is discarded on close.
+  const profiles = resolveBrowserProfiles(userProfiles).filter(
+    (profile) => profile.kind !== "incognito",
+  );
   const selected = findBrowserProfile(profiles, defaultProfileId) ?? profiles[0];
 
   return (

apps/web/src/components/ui/menu.tsx

@@ -237,9 +237,10 @@ function MenuSubTrigger({
       className={cn(
         // Leading-icon treatment matches `MenuItem`: a sub-trigger sits in the
         // same column as the items around it, so its icon has to align and dim
-        // with theirs. Scoped to the first svg because the chevron below is
-        // also a direct child, and `-mx-0.5` would override its `-me-0.5`.
-        "[&>svg:first-of-type]:-mx-0.5 flex min-h-8 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&>svg:first-of-type:not([class*='opacity-'])]:opacity-80 [&_svg]:pointer-events-none [&>svg]:shrink-0",
+        // with theirs. Scoped away from the last child because the chevron is
+        // also a direct svg — on a sub-trigger with no leading icon it is the
+        // only one, and these rules would take away its `ms-auto` alignment.
+        "[&>svg:not(:last-child)]:-mx-0.5 flex min-h-8 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&>svg:not(:last-child):not([class*='opacity-'])]:opacity-80 [&_svg]:pointer-events-none [&>svg]:shrink-0",
         className,
       )}
       data-inset={inset}