fix(mobile): knowledge panel tabs, autocomplete height floor, status row gap

The project knowledge panel's section sidebar becomes a horizontal pill
strip on mobile, where a half-width side column left no room for
content. The autocomplete popups get their 120px minimum height back —
browser keyboard panning could put the anchor above the measured
boundary and collapse them to nothing. The status row's 24px footer-swap
reservation now applies only to the assistant-status instance; the
accessory-only row above the composer (pending changes) takes the
normal 8px instead of floating a stray gap.
This commit is contained in:
Bohdan Triapitsyn
2026-08-24 01:44:15 +03:00
parent a547f83ebe
commit d678a4244e
3 changed files with 48 additions and 2 deletions
@@ -313,7 +313,10 @@ export const StatusRow: React.FC<StatusRowProps> = ({
// carries ~12px more structure BELOW its footer than this row has — so
// the swap used to lift the line up. mb-6 (24px) reserves that space
// under this row instead (verified: row top 636 == footer top 636).
className={cn("mb-6", !hasLeftAccessory && "chat-column")}
// The reservation belongs to the assistant-status swap only: a row that
// renders just an accessory (the pending-changes bar) takes the normal
// 8px, or it floats a stray gap above the composer.
className={cn(showAssistantStatus ? "mb-6" : "mb-2", !hasLeftAccessory && "chat-column")}
style={STATUS_ROW_CONTAINER_STYLE}
>
{/* h-8 matches the turn footer's real row height: its h-8 action
@@ -35,7 +35,11 @@ export const useMobileAutocompleteMaxHeight = (
// The popup's bottom edge is its anchor (composer top) and does not
// depend on its current height.
const available = Math.max(0, Math.floor(el.getBoundingClientRect().bottom - boundaryTop - 8));
const next = available < normalMaxHeight ? available : undefined;
// Floor: browser keyboard panning can put the anchor above the
// measured boundary for a frame (or for the whole pan), which
// would collapse the popup to zero height. A short popup that
// slightly overlaps the header beats an invisible one.
const next = available < normalMaxHeight ? Math.max(120, available) : undefined;
setMaxHeight((prev) => (prev === next ? prev : next));
};
measure();