Skip to content

fix(ui): reserve chat/composer height when both ArtifactPane and BrowserPanel are open at narrow widths #824

Closed

Description

@Astro-Han

Context

From the #546 Artifact pane + browser panel closure audit and PR #818. At <=990px both ArtifactPane and BrowserPanel become bottom sheets below the composer, each with min-height: 220px. When both are open and the detail area height is <=~440px, the first grid row (minmax(0, 1fr) for chat) shrinks to 0 and the chat/composer is clipped. The app allows restoring windows down to 480x320 (window-state.ts sanitizeBounds) and BrowserWindow sets no minHeight, so this is a reachable, supported state.

Behavior today

  • Single auxiliary panel (browser OR artifact): fine — one 220–360px bottom sheet leaves chat usable on a normal-height window.
  • Both panels + <=990px wide + short window (<=~440px tall): chat row → 0. The browser close button stays at the top of the second row and is reachable, so closing the browser always recovers the chat column; the ArtifactPane collapse button starts ~220px down and may be clipped at extreme heights, so "collapse one or close the browser" is not always uniformly reachable. This is an edge-of-edge case (it was already unusable at similar heights before fix(ui): give BrowserPanel a narrow bottom-sheet layout (#546) #818), but the current CSS comment's "recover by collapsing ArtifactPane or closing the browser" overstates reachability at the shortest heights.

Proposal (product decision needed — not bundling into #818)

Pick one (or a combination), as a separate scoped change:

  1. :has()-scoped height budget: when .maka-detail-with-artifacts:has(.maka-browser-panel) .maka-artifact-pane (both present), cap each auxiliary panel at a dvh-scaled height (e.g. ~28dvh) instead of the fixed 220px, so the two share the auxiliary budget and chat keeps a guaranteed minimum.
  2. Composer minimum height: give the chat row (minmax(0, 1fr)) a floor (e.g. minmax(var(--h-composer-min), 1fr)) so the composer always stays visible, letting the auxiliary panels overflow/scroll instead of eating chat.
  3. Auto-collapse one panel: when both are open at narrow width, auto-collapse the less-recently-used one (needs JS/state, heavier).
  4. Window minHeight: set a BrowserWindow minimum height that prevents the broken short-window state entirely (broadest but most intrusive — affects all layouts, not just this one).

Out of scope

Acceptance

  • With both ArtifactPane and a live BrowserPanel open at <=990px and a short window (down to the 320px restore minimum), the composer remains visible and usable, OR an explicit product decision is recorded that short windows with both panels open are not supported (with the minHeight guard from option 4).
  • The chosen approach is covered by a computed-style or DOM-contract test (not a fixed screenshot).

Refs #546. Related: PR #818 (narrow bottom-sheet fix), #819 (browser renderer-chrome visual-smoke fixture).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions