2026-05-14 18:24

# Adapt Terminal View

Surface: `apps/web/app/globals.css` · Beads issue: `islandflow-1f5`

## Summary

The terminal view now adapts more deliberately across desktop, tablet, and phone contexts. The update preserves the evidence-console density on larger screens while making controls, navigation, filters, drawers, and data lanes more usable on smaller touch devices.

## Changes Made

- Changed the tablet rail from a stacked desktop sidebar into a sticky horizontal command rail with scrollable navigation and metric strips.
- Added phone-specific touch sizing for buttons, navigation links, filter controls, and pane actions.
- Converted the flow filter panel and evidence drawers into bottom-sheet style surfaces on small screens.
- Adjusted pane spacing, page heading scale, and table row heights to fit small screens without hiding core workflow content.
- Kept dense data tables horizontally scrollable instead of crushing columns into unreadable cells.
- Replaced colored side-stripe table accents with full-row inset outlines to preserve semantic color without banned side-stripe treatment.

## Context

Islandflow is a product-register interface for serious traders and researchers. The relevant scene is a user moving between a desktop workstation and a smaller companion screen while monitoring live or replayed market evidence. The design keeps the dark, composed terminal atmosphere because it supports high-contrast scanning in dim, focused trading conditions.

## Important Implementation Details

- The responsive behavior remains CSS-only in `globals.css`, avoiding component churn in the large terminal module.
- The `1180px` breakpoint now rethinks navigation as a horizontal rail rather than a full-width vertical block.
- The `720px` breakpoint shifts to touch-first behavior with 44px minimum targets and bottom-reachable overlays.
- The data tables retain their information architecture by using horizontal scroll lanes and slightly larger mobile rows.

## Validation

- Ran `bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts`: 64 passing tests.
- Ran `bun --cwd=apps/web run build`: production Next.js build completed successfully.
- Searched for banned colored side-stripe CSS patterns in the app stylesheet after the update: none found.

## Issues, Limitations, and Mitigations

- No real-device browser session was available in this turn, so tactile behavior was validated through CSS structure and production build checks rather than physical-device testing.
- The tables intentionally remain horizontally scrollable on phones because hiding key evidence columns would damage the investigative workflow.
- Bottom-sheet drawers can still cover part of the active tape on very short screens, mitigated by max-height limits and internal scrolling.

## Follow-up Work

No new follow-up issue was filed. The current adaptation is self-contained under `islandflow-1f5`.