fix(web): keep profile names from stretching the menus

Profile names are user-supplied and run to 48 characters. The Browser
sub-menu rendered them bare inside an unbounded popup, so a long one widened
it to fit-content and wrapped; it is now capped and truncated like the other
name-bearing menus.

The clear actions repeated the name their own group heading already shows,
which drove the popup far past its width for no added information. The heading
keeps the profile and the actions keep fixed-length labels.

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

Author: juliusmarminge

apps/web/src/components/RightPanelTabs.tsx

@@ -732,13 +732,18 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                         <Globe2 />
                         Browser
                       </MenuSubTrigger>
-                      <MenuSubPopup className="min-w-40">
+                      {/*
+                        Capped and truncated: profile names are user-supplied
+                        and run to 48 characters, which would otherwise widen
+                        the popup to fit-content and wrap.
+                      */}
+                      <MenuSubPopup className="min-w-40 max-w-56">
                         {browserProfiles.map((profile) => (
                           <MenuItem
                             key={profile.id}
                             onClick={() => props.onAddBrowserInProfile(profile.id)}
                           >
-                            {profile.name}
+                            <span className="min-w-0 truncate">{profile.name}</span>
                           </MenuItem>
                         ))}
                       </MenuSubPopup>

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

@@ -200,18 +200,27 @@ export function PreviewMoreMenu({
           at open and nothing else in the chrome shows it.
         */}
         <MenuGroup>
-          {profileName ? <MenuGroupLabel>Profile: {profileName}</MenuGroupLabel> : null}
+          {/*
+            The heading carries the profile so the actions below can keep
+            fixed-length labels: repeating a name of up to 48 characters in
+            each one drove the popup far past its width.
+          */}
+          {profileName ? (
+            <MenuGroupLabel>
+              <span className="min-w-0 truncate">Profile: {profileName}</span>
+            </MenuGroupLabel>
+          ) : null}
           <MenuItem
             onClick={() =>
               void bridge.clearCookies(environmentId, profileId).catch(() => undefined)
             }
           >
-            {profileName ? `Clear cookies (${profileName})` : "Clear cookies"}
+            Clear cookies
           </MenuItem>
           <MenuItem
             onClick={() => void bridge.clearCache(environmentId, profileId).catch(() => undefined)}
           >
-            {profileName ? `Clear cache (${profileName})` : "Clear cache"}
+            Clear cache
           </MenuItem>
         </MenuGroup>
       </MenuPopup>