Swap tab groups to render icon only to match tabs (warpdotdev#13105)

## Description

When tabs shrink to a certain size in the horizontal tab bar, they stop
displaying the tab name and just show their icon. This PR modifies tab
group headers to follow the same behavior.

## How it works

- Wrapped the group header in a `SizeConstraintSwitch` that swaps the
full layout (collage + name) for a compact, icon-only collage below
`COMPACT_TAB_WIDTH_THRESHOLD` (42px) — the same mechanism and threshold
`TabComponent` already uses, so headers and tabs go compact at the same
width.
- The compact collage renders at the tab's compact icon size
(`TAB_INDICATOR_HEIGHT`, 14px), centered

## Linked Issue


https://linear.app/warpdotdev/issue/APP-4777/tab-group-header-icon-collage-is-clipped-when-many-tabs-open

## Testing
<!--
How did you test this change? What automated tests did you add? If you
didn't add any new tests, what's your justification for not adding any?

Manual testing is required for changes that can be manually tested, and
almost all changes can be manually tested. If your change can be
manually tested, please include screenshots or a screen recording that
show it working end to end.

You can run the app locally using `./script/run` - see AGENTS.md for
more details on how to get set up.
-->

- [x] I have manually tested my changes locally with `./script/run`

### Screenshots / Videos
<!-- Attach screenshots or a short video demonstrating the change, where
appropriate. Remove this section if it is not relevant to your PR. -->

[Demo
before](https://www.loom.com/share/c1af83499c9349a8a59249deb8c5c335)

[Demo
after](https://www.loom.com/share/6ad23f13cacb4a8f9c1d8f5dd7d474a9)

Author: johnturcoo

app/src/tab.rs

@@ -55,7 +55,7 @@ use crate::workspace::{
 use crate::BlocklistAIHistoryModel;
 
 pub const TAB_BAR_BORDER_HEIGHT: f32 = 1.0;
-const TAB_INDICATOR_HEIGHT: f32 = 14.0;
+pub(crate) const TAB_INDICATOR_HEIGHT: f32 = 14.0;
 
 /// Label for the tab right-click menu's "Move to group" submenu parent.
 pub const MOVE_TO_GROUP_LABEL: &str = "Move to group";
@@ -77,7 +77,7 @@ pub(crate) const TAB_PIN_INDICATOR_ICON_SIZE: f32 = 16.0;
 const TAB_INDICATOR_SYNCED_COLOR: u32 = 0x4A93FFFF;
 
 // Width threshold (in px) below which we render an icon-only tab
-const COMPACT_TAB_WIDTH_THRESHOLD: f32 = 42.0;
+pub(crate) const COMPACT_TAB_WIDTH_THRESHOLD: f32 = 42.0;
 // Horizontal inset for the tab close button
 const TAB_CLOSE_BUTTON_HORIZONTAL_INSET: f32 = 2.0;
 

app/src/workspace/view.rs

@@ -96,7 +96,7 @@ use warpui::elements::{
     Highlight, Hoverable, Icon as WarpUiIcon, Image, MainAxisAlignment, MainAxisSize,
     MouseInBehavior, MouseStateHandle, OffsetPositioning, ParentAnchor, ParentElement,
     ParentOffsetBounds, PositionedElementAnchor, PositionedElementOffsetBounds, Radius, Rect,
-    SavePosition, Shrinkable, Stack, Text,
+    SavePosition, Shrinkable, SizeConstraintCondition, SizeConstraintSwitch, Stack, Text,
 };
 use warpui::fonts::{Properties, Weight};
 use warpui::geometry::vector::{vec2f, Vector2F};
@@ -354,8 +354,8 @@ use crate::settings_view::{flags, SettingsSection, SettingsView, SettingsViewEve
 use crate::shell_indicator::ShellIndicatorType;
 use crate::tab::{
     tab_position_id, uses_vertical_tabs, NewSessionMenuItem, PaneNameMenuTarget, SelectedTabColor,
-    TabBarState, TabComponent, TabData, TabTelemetryAction, MOVE_TO_GROUP_LABEL,
-    TAB_BAR_BORDER_HEIGHT, TAB_PIN_INDICATOR_ICON_SIZE,
+    TabBarState, TabComponent, TabData, TabTelemetryAction, COMPACT_TAB_WIDTH_THRESHOLD,
+    MOVE_TO_GROUP_LABEL, TAB_BAR_BORDER_HEIGHT, TAB_INDICATOR_HEIGHT, TAB_PIN_INDICATOR_ICON_SIZE,
 };
 use crate::tab_configs::action_sidecar::SidecarItemKind;
 use crate::tab_configs::remove_confirmation_dialog::{
@@ -19708,8 +19708,6 @@ impl Workspace {
         let header_selected = is_collapsed && any_member_active;
 
         let member_kinds = self.compute_group_member_kinds(group.id, ctx);
-        let icon_circle =
-            render_group_member_icon_collage(&member_kinds, GROUP_ICON_COLLAGE_SIZE, appearance);
 
         let is_being_renamed = self
             .current_workspace_state
@@ -19736,21 +19734,56 @@ impl Workspace {
                 .finish()
         };
 
-        let mut row = Flex::row()
+        // Full header: collage + name, with the horizontal padding inside it so
+        // the size switch below measures the full slot width, like a tab.
+        let mut full_row = Flex::row()
             // Fill the slot and center the icon + title.
             .with_main_axis_size(MainAxisSize::Max)
             .with_main_axis_alignment(MainAxisAlignment::Center)
             .with_cross_axis_alignment(CrossAxisAlignment::Center)
             .with_spacing(6.)
-            .with_child(icon_circle)
+            .with_child(render_group_member_icon_collage(
+                &member_kinds,
+                GROUP_ICON_COLLAGE_SIZE,
+                appearance,
+            ))
             .with_child(Shrinkable::new(1.0, name_element).finish());
         // Collapsed + pinned: pin indicator to the right of the name, where an
         // ungrouped tab would show its close button. Expanded groups show the
         // pin after their last member instead.
         if FeatureFlag::PinnedTabs.is_enabled() && group.pinned && is_collapsed {
-            row.add_child(render_horizontal_group_pin_indicator(appearance));
+            full_row.add_child(render_horizontal_group_pin_indicator(appearance));
         }
-        let row = row.finish();
+        let full_content = Container::new(full_row.finish())
+            .with_padding_left(8.)
+            .with_padding_right(if is_collapsed { 8. } else { 9. })
+            .finish();
+
+        // Compact header (narrow slot): just the collage at the tab's compact
+        // icon size, centered and clipped, like a tab dropping its title.
+        let compact_content = Clipped::new(
+            Flex::row()
+                .with_main_axis_size(MainAxisSize::Max)
+                .with_main_axis_alignment(MainAxisAlignment::Center)
+                .with_cross_axis_alignment(CrossAxisAlignment::Center)
+                .with_child(render_group_member_icon_collage(
+                    &member_kinds,
+                    TAB_INDICATOR_HEIGHT,
+                    appearance,
+                ))
+                .finish(),
+        )
+        .finish();
+
+        // Go compact at the same width as a tab, so headers and tabs shrink in step.
+        let content = SizeConstraintSwitch::new(
+            full_content,
+            vec![(
+                SizeConstraintCondition::WidthLessThan(COMPACT_TAB_WIDTH_THRESHOLD),
+                compact_content,
+            )],
+        )
+        .finish();
 
         let header_active_bg = internal_colors::fg_overlay_2(theme);
         let header_hover_bg = internal_colors::fg_overlay_1(theme);
@@ -19764,13 +19797,10 @@ impl Workspace {
                 ElementFill::None
             };
 
-            // Tab-style border: left edge if first; right edge only when collapsed
-            // (the divider). Expanded, the divider moves to the container's far
-            // edge, so swap that 1px border for 1px right padding so the title
-            // doesn't shift.
-            Container::new(row)
-                .with_padding_left(8.)
-                .with_padding_right(if is_collapsed { 8. } else { 9. })
+            // Tab-style border: left edge if first, right edge only when
+            // collapsed (the divider). Expanded swaps that right border for
+            // padding so the title doesn't shift on collapse/expand.
+            Container::new(content)
                 .with_vertical_padding(6.)
                 .with_background(bg)
                 .with_border(