burrito.space
group conversations with models and local files
Fix conversation pane scrolling
Two bugs:
1. mainStyle used `flex: 1` from when `<main>` lived inside a flex
row in ProjectBody. Phase 5 wrapped main in a `<Panel>`, where
`flex: 1` no longer gives it a height — so the inner scroller
couldn't compute a positive scroll viewport and was stuck. Switch
to `height: 100%` to fill the Panel.
2. Snap-to-latest didn't always fire on conversation open because
the existing useEffect's deps (lastTurn id/length, turns.length)
don't change if you reopen the same conversation. Add a conv-id
effect that forces stick + scrolls to bottom, with a 50ms retry
to catch reflows from markdown rendering.
author
dietrich ayala
date
(May 26, 2026, 3:08 PM +0200)
commit
d6527701
d652770139087a83f987ab32d8631298ee23addb
parent
9eb9b62a
9eb9b62ae9dbcb54b0f5b2b8d3d0bc2f24402cfa
+17
-1
+17
-1
src/App.tsx
+17
-1
src/App.tsx
···
1625
1625
// Stick to the bottom when a new turn comes in or a streaming turn
1626
1626
// grows. Skip if the user scrolled away (within 80px of bottom = "near").
1627
1627
const stickRef = useRef(true)
1628
+
// When the active conversation changes, snap to the latest message
1629
+
// unconditionally — opening a conv should land on its newest content.
1630
+
useEffect(() => {
1631
+
stickRef.current = true
1632
+
// Wait for the DOM to settle (markdown / images can extend
1633
+
// scrollHeight after the first paint), then snap to bottom.
1634
+
const snap = (): void => {
1635
+
const el = scrollerRef.current
1636
+
if (el) el.scrollTop = el.scrollHeight
1637
+
}
1638
+
snap()
1639
+
const t = window.setTimeout(snap, 50)
1640
+
return () => window.clearTimeout(t)
1641
+
}, [convId])
1642
+
// Subsequent updates: if we were stuck to the bottom, stay stuck.
1628
1643
useEffect(() => {
1629
1644
const el = scrollerRef.current
1630
1645
if (!el || !stickRef.current) return
···
2207
2222
alignItems: 'center',
2208
2223
}
2209
2224
const mainStyle: React.CSSProperties = {
2210
-
flex: 1,
2225
+
height: '100%',
2211
2226
display: 'flex',
2212
2227
flexDirection: 'column',
2213
2228
overflow: 'hidden',
2229
+
boxSizing: 'border-box',
2214
2230
}
2215
2231
const turnsScrollerStyle: React.CSSProperties = {
2216
2232
flex: 1,