Adapt Terminal View
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
1180pxbreakpoint now rethinks navigation as a horizontal rail rather than a full-width vertical block. - The
720pxbreakpoint 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.