fix(web): make each profile its own row, and truncate the menu heading

Bare rows stack on narrow viewports with a larger gap inside a row than
between rows, so the remove button read as belonging to the profile below.
Each profile is now a bounded row, and the list carries the bottom spacing
`SettingsRow` leaves to its children.

`MenuGroupLabel` renders a block box, so `text-overflow` on an inline span
inside it never applied and a long profile name pushed the popup past its
width. The truncation sits on the label itself.

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

Author: juliusmarminge

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

@@ -206,9 +206,10 @@ export function PreviewMoreMenu({
             each one drove the popup far past its width.
           */}
           {profileName ? (
-            <MenuGroupLabel>
-              <span className="min-w-0 truncate">Profile: {profileName}</span>
-            </MenuGroupLabel>
+            // Truncation sits on the label itself: it renders a block box, so
+            // `text-overflow` on an inline child inside it never applies and a
+            // long name would push the popup past its width instead.
+            <MenuGroupLabel className="max-w-64 truncate">Profile: {profileName}</MenuGroupLabel>
           ) : null}
           <MenuItem
             onClick={() =>

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

@@ -544,11 +544,23 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
         </Button>
       }
     >
-      <div className="mt-1 space-y-1">
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
         {resolveBrowserProfiles(userProfiles).map((profile) => {
           const builtIn = isBuiltInBrowserProfileId(profile.id);
           return (
-            <div key={profile.id} className={ITEM_ROW_INNER_CLASSNAME}>
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
               {builtIn ? (
                 // Dimmed here rather than on the list, which is the only
                 // content in the row without a disabled treatment of its own: