Gallery: a blocked note wraps beside its dot

blocked() laid its text as a flex item beside the dot, and gpui measures
a text item's least width unwrapped, so a long note ran past its column
and the dot shrank to nothing. The text now sits in a flex_1 block with
no least width beside a dot that never shrinks, which rests on the first
line, as Alert holds its icon. The a11y note and the motion page's
Lottie note wrap inside their columns. A failed hue check names both
charts in hex.

examples/gallery/ui.rs

@@ -69,12 +69,19 @@ pub fn blocked(text: impl Into<SharedString>, cx: &App) -> impl IntoElement {
     let theme = cx.theme();
     div()
         .flex()
-        .items_center()
+        .items_start()
         .gap_2()
         .text_size(theme.text_size(TextSize::Sm))
         .text_color(theme.colors.warning)
-        .child(div().size_1p5().rounded_full().bg(theme.colors.warning))
-        .child(text.into())
+        .child(
+            div()
+                .flex_none()
+                .mt_1p5()
+                .size_1p5()
+                .rounded_full()
+                .bg(theme.colors.warning),
+        )
+        .child(div().flex_1().min_w_0().child(text.into()))
 }
 
 /// A demo's state, kept across frames under `key`.

src/i18n/tests/a11y.rs

@@ -85,6 +85,18 @@ fn nearest(colors: &[Hsla], matrix: Option<&[[f32; 3]; 3]>) -> f32 {
     near
 }
 
+fn hexes(colors: &[Hsla]) -> String {
+    colors
+        .iter()
+        .map(|&color| {
+            let rgb = Rgba::from(color);
+            let byte = |channel: f32| (channel * 255.0).round() as u8;
+            format!("{:02x}{:02x}{:02x}", byte(rgb.r), byte(rgb.g), byte(rgb.b))
+        })
+        .collect::<Vec<_>>()
+        .join(" ")
+}
+
 /// Red and green, far apart for most eyes, run together for deuteranopia: the measure bites.
 #[test]
 fn red_and_green_run_together_for_deuteranopia() {
@@ -107,10 +119,16 @@ fn color_blind_safe_hues_stay_apart(cx: &mut TestAppContext) {
         expected.chart = safe.chart;
         assert_eq!(safe, expected, "{mode:?}: only the chart changes");
         assert_ne!(safe.chart, own.chart, "{mode:?}: the chart changes");
-        assert!(nearest(&safe.chart, None) >= 10.0, "{mode:?}");
+        let seen = format!(
+            "{mode:?}: {} against {}",
+            hexes(&safe.chart),
+            hexes(&own.chart)
+        );
+        let near = nearest(&safe.chart, None);
+        assert!(near >= 10.0, "{seen}: {near}");
         for (name, matrix) in &DICHROMACY {
             let near = nearest(&safe.chart, Some(matrix));
-            assert!(near >= 10.0, "{mode:?} for {name}: {near}");
+            assert!(near >= 10.0, "{seen} for {name}: {near}");
         }
         for hue in safe.chart {
             let ratio = contrast(hue, safe.bg);