Generative: the video strip scrolls and reveals; tags wrap in their row

The timeline's scroll box is the flex row itself, so its reach is its
shots; a focused shot brings itself whole into view through
layout::bring_into_view, which table headers now share; Extend sits
with the caption under the strip. A voice's tags cap at the row's
width and wrap inside it.

src/layout/mod.rs

@@ -21,6 +21,7 @@ pub use floating::FloatingPanel;
 pub use grid::{Masonry, SimpleGrid};
 pub use page::{AppShell, MasterDetail, Page};
 pub use panes::{PaneGroup, PaneId, PaneLayout};
+pub(crate) use scroll::bring_into_view;
 pub use scroll::{ScrollArea, Scrollbar, on_axis};
 pub use scroll_aids::{ScrollShadow, ScrollToTop, StickyHeader};
 pub use sheet::{Drawer, Sheet};

src/layout/scroll.rs

@@ -5,7 +5,7 @@ use std::{
 };
 
 use gpui::{
-    AnyElement, App, Axis, Div, ElementId, EmptyView, Entity, EntityId, InteractiveElement,
+    AnyElement, App, Axis, Bounds, Div, ElementId, EmptyView, Entity, EntityId, InteractiveElement,
     IntoElement, ParentElement, Pixels, Point, RenderOnce, ScrollHandle,
     StatefulInteractiveElement, StyleRefinement, Styled, Window, div, point, prelude::*,
 };
@@ -16,6 +16,22 @@ use crate::{motion, theme::ActiveTheme};
 
 const IDLE: Duration = Duration::from_millis(900);
 
+/// Sets `scroll`'s sideways offset whole so `item`, as painted, sits inside the box, its start first when it is wider; true when it moved.
+pub(crate) fn bring_into_view(scroll: &ScrollHandle, item: Bounds<Pixels>) -> bool {
+    let (frame, offset) = (scroll.bounds(), scroll.offset());
+    let shift = if item.left() < frame.left() {
+        frame.left() - item.left()
+    } else if item.right() > frame.right() {
+        (frame.right() - item.right()).max(frame.left() - item.left())
+    } else {
+        Pixels::ZERO
+    };
+    if shift != Pixels::ZERO {
+        scroll.set_offset(point(offset.x + shift, offset.y));
+    }
+    shift != Pixels::ZERO
+}
+
 /// Keeps a scroll box's wheel to its own axes; gpui turns a wheel along the other axis onto a box that scrolls one way, while the page scrolls too.
 pub fn on_axis<E: Styled>(mut element: E) -> E {
     element.style().restrict_scroll_to_axis = Some(true);