eleven / ocho Public

mac: the typeahead is a drop-up, not a band that moves the transcript (#1508)

Paul: "It's weird that the whole pane moves."

The Mac's typeahead lived inside the composer's VStack, which is the bottom
safeAreaInset's content — and that inset SHRINKS the feed's scroll view. The
strip is one row per candidate, re-ranked on every keystroke, so `/t` → `/th`
→ `/thr` moved the entire transcript a row at a time as the list narrowed.
Transparent was not enough: transparent still occupies layout.

The web has never done this — style.css `.typeahead` is absolutely positioned
against `.composer-float`, a zero-height anchor at the top of the composer
stack, with a comment naming this exact failure ("a drop-UP that OVERLAYS the
feed rather than a flex band that shoves the messages up as you type"). iOS
sidesteps it with a horizontal chip strip whose height never changes. Mac was
the only surface doing it, so this is parity, not a new idea.

Now an `.overlay(alignment: .topLeading)` on the band, plus the web's height
cap. Three things measured off-screen rather than reasoned about, each of
which was wrong on the first attempt:

- `.overlay(alignment: .top)` CENTRES its child and lets it take its ideal
  width; the in-flow VStack had given it the full width, left-aligned. Needs
  .topLeading and an explicit maxWidth.
- An `alignmentGuide` set INSIDE a conditional never reaches the overlay: the
  overlay aligns the _ConditionalContent container and reads its default
  guide, so the card was laid out with its top on the band's top and ran down
  over the composer (measured: 360…458 over a band at 360…400, vs 262…360
  with the guide outside the `if`).
- A ScrollView is greedy in its scroll axis, so `.frame(maxHeight: 216)` alone
  gives a full-height card for two candidates (228pt for 2 rows AND for 10).
  `.fixedSize(vertical:)` first, then the clamp: 2 rows → 69pt, 10 → 228pt.

The staged-attachment strip deliberately stays in flow, on both platforms —
the web's CSS records why: floating it covered tappable things at the feed's
bottom edge ("Skip for now" became dead text under a thumbnail).

Mouse-clicking a row was verified by hand (the card draws outside its inset
region, so hit-testing there was the one thing frames couldn't answer);
keyboard ↑↓/Tab/Return/Esc is untouched, and ↑↓ now keeps the selection in
view once the list scrolls, like the web's scrollIntoView({block:"nearest"}).

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>