frontend

Fullscreen mobile wrapper under a 66px fixed header using mt-66px plus calc 100dvh-66px, uncapped transcript, and a compact messaging header.

My mobile chat needed its own messaging-app-style frame, but the answer logic stays single-sourced by reusing the exported TurnBody.

TL;DR: A desktop three-column chat layout doesn't survive shrinking to phones, so the author built a separate mobile thread component using the familiar messaging-app pattern. Sticky header, chat bubbles, composer, all done with CSS sticky and backdrop-filter. Only the frame is duplicated; shared TurnBody logic keeps desktop and mobile in sync.

My chat history sidebar vanished at the lg breakpoint: a CSS order tie-break and a details element forced into flex duty, two roots in one commit.

TL;DR: A missing sidebar at lg breakpoints came down to two bugs from a mobile accordion refactor. Equal flex order values let the center wrapper win the source-order tie-break, fixed with an explicit lg:order-2. A details element can't flex-size children in Chromium, so it became state-driven with aria-expanded instead.

A responsive pass on my AI chat panel: 44px send targets per WCAG, 16px input fonts against iOS zoom, and a 65vh transcript with overscroll containment.

TL;DR: A desktop-tidy chat panel broke on mobile in three unrelated ways, each fixed by a standardized number. Buttons grew to 44px per WCAG target-size guidance, and the textarea got a 16px font to stop Safari's forced zoom. A 65vh transcript with overscroll containment stops scroll chaining and pull-to-refresh.

Citation badges in the sidebar list are computed with indexOf from the original array, not the filtered iteration position, so numbers stay truthful.

TL;DR: While refactoring a chat sources sidebar, badge numbers were computed over a filtered array, so dropping knowledge entries shifted every web source's number and broke reference links. The fix: compute numbers with indexOf on the original turn.sources, so badges always match answer references. Lesson: reference numbers must come from original data, not filtered display order.

Knowledge cards now render inline below the chat answer; reusing the card component takes a named export, unique per-panel ids, and its own expand state.

TL;DR: Moving knowledge cards inline into the chat answer panel sounded trivial but broke two hidden contracts. SourceCard became a named export, and card ids got a prefix to avoid duplicate ids across the document. Expanded state now lives locally per panel, keyed by turn and slug, so opening a card in one panel doesn't leak into the other.

The output card was already square at xl, but the panel still looked like a box in a box; the wrapper's padding and gap had to go too.

TL;DR: The chat center panel card was already square, yet a thin white strip and sidebar gaps remained. The wrapper still carried xl:p-4 and default gap-4, so the one-line fix was xl:p-0 xl:gap-0 on the parent. Lesson: a wrong-looking element isn't always the wrong one; match child resets with parent spacing resets at the same breakpoint.

The AI output panel stays a card on mobile, then xl:rounded-none and xl:border-0 square it at xl: mobile-first override at one breakpoint.

TL;DR: The author flattened the last card-looking panel in a three-column AI workspace by appending xl:rounded-none xl:border-0 to the existing classes in AiChatWorkspace.tsx. Tailwind's mobile-first cascade keeps card styling on small screens and drops the border only at the xl breakpoint, making the override easy to reverse. Lesson learned: overly terse commit messages like "no border" mislead future readers.

The right context panel dropped its floating-card frame for a single left-border divider, matching the sidebar's design language.

TL;DR: The author changed a right panel from floating card to flush panel by swapping rounded corners and a four-sided border for a single left border. The border's job shifted from frame to divider, not removal. Lesson: when converting a card to a panel, ask what the border should do now.