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.