@oxy.so/bloom 4.25.0 → 4.26.0

package/src/ai-chat/AiChatShell.tsx

@@ -236,7 +236,7 @@ export function AiChatResizeHandle({
 // ---------------------------------------------------------------------------
 
 /**
- * The in-container header below `xl`: 48 tall, px 12 / pt 11. The menu
+ * The in-container header below `xl`: at least 48 tall, px 12 / pt 11. The menu
  * button (below `lg`, where the sidebar is a drawer) and the chat's name in
  * headline-medium on the left; the button opening the panel drawer on the right.
  * Both are 36px secondary icon buttons. Renders nothing outside an
@@ -251,7 +251,7 @@ export function AiChatMobileHeader({ title, style, testID }: AiChatMobileHeaderP
       testID={testID}
       style={[
         {
-          height: 48,
+          minHeight: 48,
           flexShrink: 0,
           flexDirection: 'row',
           alignItems: 'center',
@@ -738,7 +738,7 @@ export function AiChatShell({
               ]}>
               <View
                 style={{
-                  height: 40,
+                  minHeight: 40,
                   flexShrink: 0,
                   flexDirection: 'row',
                   alignItems: 'center',

package/src/composer-panel/ComposerPanelStatusTab.tsx

@@ -44,7 +44,7 @@ function StatusItem({ icon, label, palette }: { icon: React.ReactNode; label: st
 
 /**
  * The status tab: the grey tab hanging off the Composer Panel's
- * top edge — 34 tall, inset 28 each side, radius 16 on the top corners only,
+ * top edge — at least 34 tall, inset 28 each side, radius 16 on the top corners only,
  * px 8 / py 4. Branch (mirrored merge glyph) and project folder on the left, 12
  * apart; the context meter on the right (py 4, pl 6 / pr 8, gap 4).
  */
@@ -58,7 +58,7 @@ function ComposerPanelStatusTabComponent({ branch, project, context, style, test
         {
           marginLeft: TAB_INSET,
           marginRight: TAB_INSET,
-          height: TAB_HEIGHT,
+          minHeight: TAB_HEIGHT,
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',

package/src/composer-panel/ComposerPillBase.tsx

@@ -251,7 +251,9 @@ function ModelMenu({
   const modelName = models.find((entry) => entry.id === modelId)?.name ?? modelId;
   const hasEffort = levels.length > 0;
   const triggerStyle: WebCssStyle = {
-    height: 32,
+    // At least 32, never exactly: a fixed height clips the name at the largest
+    // system font.
+    minHeight: 32,
     flexShrink: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/composer-panel/ComposerStatusBarBase.tsx

@@ -142,8 +142,8 @@ function FolderRow({
 }
 
 /**
- * The line under the AI chat's pill composer (the reference's `StatusBar`): 26
- * tall, space-between.
+ * The line under the AI chat's pill composer (the reference's `StatusBar`): at
+ * least 26 tall (it grows with the system font), space-between.
  *
  *   left     gap 12: the branch (mirrored merge glyph) and the project folder —
  *            its caret turns over while the "Local Folders" panel is open
@@ -188,7 +188,7 @@ export function ComposerStatusBarBase({
   return (
     <View
       testID={testID}
-      style={[{ width: '100%', height: 26, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, style]}>
+      style={[{ width: '100%', minHeight: 26, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, style]}>
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
         {branch !== undefined ? (
           <StatusItem

package/src/composer-panel/ModelPickerBase.tsx

@@ -369,7 +369,8 @@ function ModelRow({
     <View
       style={{
         position: 'relative',
-        height: ROW_HEIGHT,
+        // A floor, not a height: the name grows with the system font.
+        minHeight: ROW_HEIGHT,
         width: '100%',
         flexShrink: 0,
         flexDirection: 'row',
@@ -424,7 +425,7 @@ function ModelRow({
  *            mark in view (instantly on open, smoothly after)
  *   column   top 8 / right 8 / left 52: a 20px header ("Models" + a 50%-opacity
  *            "Quick Search" hint, or the search field), then the list 4 below
- *   rows     36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
+ *   rows     min 36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
  *            searching), the effort chip on the selected row, 12, 14px radio;
  *            4 apart, pb 4, soft top edge once scrolled
  *

package/src/composer-panel/PermissionMenu.tsx

@@ -10,6 +10,8 @@ import type { ComposerPanelLabels, ComposerPanelPermissionOption } from './types
 import { dataHook } from './web-hooks';
 
 const FLIP: ViewStyle = { transform: [{ scaleY: -1 }] };
+/** The permission chip's widest: past this a mode's name truncates. */
+const PERMISSION_TRIGGER_MAX_WIDTH = 160;
 
 interface PermissionMenuProps {
   palette: ComposerPalette;
@@ -27,7 +29,9 @@ interface PermissionMenuProps {
  * press or while its menu is open, and a 323px panel of radio rows that opens
  * upward.
  *
- *   trigger   h 30, pl 8 / pr 10, gap 4, icon 16, body-medium secondary
+ *   trigger   min-h 30 (grows with the system font), max-w 160 then the
+ *             label ellipsizes, pl 8 / pr 10, gap 4, icon 16, body-medium
+ *             secondary
  *   panel     w 323, radius 20, border, p 6, shadow-dropdown
  *   body      pt 4, header→rows 6; header px 8 gap 10, body-medium tertiary
  *   row       p 8, radius 14, gap 8, icon 20, label body-medium secondary,
@@ -82,7 +86,12 @@ export function PermissionMenu({
         onHoverOut={() => setHovered(false)}
         style={({ pressed }) => {
           const trigger: WebCssStyle = {
-            height: 30,
+            // At least 30, never exactly: at the largest system font the label
+            // is taller than 30 and a fixed height clipped it top and bottom.
+            // A long mode name truncates at a width that still reads as a chip.
+            minHeight: 30,
+            minWidth: 0,
+            maxWidth: PERMISSION_TRIGGER_MAX_WIDTH,
             flexShrink: 0,
             flexDirection: 'row',
             alignItems: 'center',
@@ -98,10 +107,14 @@ export function PermissionMenu({
           };
           return trigger;
         }}>
-        <View style={current.flip ? FLIP : undefined}>
+        <View style={current.flip ? [FLIP, { flexShrink: 0 }] : { flexShrink: 0 }}>
           <CurrentIcon width={16} height={16} fill={palette.iconSecondary} />
         </View>
-        <Text variant="body-medium" numberOfLines={1} style={{ color: palette.textSecondary }}>
+        <Text
+          variant="body-medium"
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={{ flexShrink: 1, minWidth: 0, color: palette.textSecondary }}>
           {current.label}
         </Text>
       </Pressable>

package/src/media-header/MediaActionBar.tsx

@@ -279,6 +279,8 @@ function FollowButtonComponent({
   onFollowChange,
   label = 'Follow',
   followingLabel = 'Following',
+  accessibilityLabel,
+  accessibilityHint,
   color,
   tone = 'support',
   iconOnly = false,
@@ -319,7 +321,8 @@ function FollowButtonComponent({
   );
   return (
     <Button appearance="subtle" tone={tone} size={size} iconOnly={iconOnly}
-      pressed={following} stopPropagation accessibilityLabel={label} disabled={disabled} loading={loading}
+      pressed={following} stopPropagation accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint} disabled={disabled} loading={loading}
       onPress={() => onFollowChange(!following)} trailing={visual}
       style={style} testID={testID} />
   );

package/src/media-header/types.ts

@@ -160,6 +160,16 @@ export interface FollowButtonProps extends ToggleBase {
   label?: string;
   /** Default `"Following"`. */
   followingLabel?: string;
+  /**
+   * Accessible name, instead of `label`. Pass one that follows the state when
+   * the caller knows more than the visible text does — "Following @nate"
+   * rather than "Follow" — so a screen reader hears who and whether without
+   * relying on the pressed state alone (Android TalkBack reads a pressed
+   * toggle as "selected", which says nothing about following).
+   */
+  accessibilityLabel?: string;
+  /** What pressing does, read after the name ("Unfollows @nate"). */
+  accessibilityHint?: string;
   /** Draw on a band: the pill takes the band's text colour. */
   color?: string;
   /** Shared Button sizes; small by default. */