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.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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`.