Skip to main content

Arcade gains a stable tablet workspace

· 2 min read
EXEPERT Team
Brain Research Visualizer

EXEPERT Arcade now gives the brain, Chat, and Game Boy predictable space on tablet-sized workspaces without changing the desktop or phone layouts.

Root cause​

Dashboard and Arcade previously shared the same implicit two-row compact grid. When Chat restored a longer conversation, its intrinsic content height expanded the lower row and compressed the brain and Game Boy into a shallow top strip. The brain canvas then appeared stretched, its status bar consumed most of the tile, and the Arcade viewport could not use the available application height.

What changed​

  • At 961-1240px, Arcade uses explicit responsive rows: minmax(260px, 0.85fr) for Brain and minmax(0, 1.15fr) for Study/Chat. Brain and Study/Chat share the left column while Game Boy spans both rows in the right column.
  • The tracks remain stable in Study and Chat modes, so restoring a long transcript cannot resize the brain, Chat, or console panels.
  • Tablet Arcade Chat tabs use a compact 30px height. Existing phone touch targets and the Dashboard tablet layout are unchanged.
  • Compact Affective Field telemetry is a single bar-free horizontal strip. It retains the dominant state, phase, intensity, valence, arousal, and toxicity; narrow tiles scroll locally while Firefox and WebKit scrollbars stay hidden.
  • #affectField is keyboard-focusable and shows a focus-visible outline. Arcade menu navigation yields arrow keys while this strip is focused, letting keyboard users scroll telemetry without changing normal Game Boy controls.

No API, event, storage key, chat-state, DOM-order, or DOM-ID contract changed. Desktop widths above 1240px, the Dashboard tablet reflow, and the single-column Brain -> Study/Chat -> Tool order at 960px and below remain intact.

Verification​

Responsive Playwright coverage now restores a deliberately long conversation and verifies fixed Arcade tracks at 1240px and 970px, brain/canvas containment, the full-height console column, the 30px tabs, locally scrollable telemetry, keyboard scrolling, phone ordering, and the absence of document-level horizontal overflow. Existing Dashboard, Prompt, Observability, Journal, Arcade menu, Fit, resize, and narrow-panel behavior remain covered.

The release passed app and docs TypeScript checks, 252 unit tests with six expected skips, all 18 focused responsive and Arcade Playwright scenarios, the production app build, and the Docusaurus production build. Visual checks at 1240x820, 970x820, 390x844, and 390x667 confirmed the intended proportions, a 46px affect strip, readable transcript, and pinned composer.