fix(site): hide bottom spacer on last session thread (#24248)

If theres is no agentic loop on the last thread, there will be a space
between the bottom of the section and the session completed lines. This
fixes that

Before
<img width="346" height="333" alt="Screenshot 2026-04-10 at 12 25 39 PM"
src="https://github.com/user-attachments/assets/de0a1ebb-ba58-4318-be0d-28dacfd5dcb2"
/>

After
<img width="222" height="209" alt="Screenshot 2026-04-10 at 12 26 13 PM"
src="https://github.com/user-attachments/assets/c2bd5086-6bbd-4c85-ba7b-4955185ddaf1"
/>
This commit is contained in:
Jeremy Ruppel
2026-04-14 09:48:28 -04:00
committed by GitHub
parent a1ef3043bb
commit 4d4266a4ad
@@ -397,9 +397,9 @@ const ThreadItem: FC<ThreadItemProps> = ({ thread, initiator }) => {
)}
</BracketConnector>
) : (
// if no agentic loop, we need a little spacing element to create
// the visual gap between threads
<div className="h-4" />
// Spacer to create visual gap between threads. Hidden on the
// last thread via the wrapper div's :last-child selector.
<div className="h-4 thread-gap" />
)}
</>
);
@@ -525,9 +525,15 @@ export const SessionTimeline: FC<SessionTimelineProps> = ({
</div>
<div className="row-start-5 col-start-2 col-span-4">
{/* threads */}
{threads.map((thread) => (
<ThreadItem key={thread.id} thread={thread} initiator={initiator} />
))}
<div className="[&>.thread-gap:last-child]:hidden">
{threads.map((thread) => (
<ThreadItem
key={thread.id}
thread={thread}
initiator={initiator}
/>
))}
</div>
{/* infinite scroll sentinel — sits 200px below the last thread */}
<div ref={sentinelRef} />
{isFetchingNextPage && (