From 96b179243c7f570e689490f8fdd8d938d9360183 Mon Sep 17 00:00:00 2001 From: dirtydishes Date: Fri, 29 May 2026 18:37:04 -0400 Subject: [PATCH] improve narrow options table behavior --- .beads/issues.jsonl | 1 + apps/web/app/globals.css | 118 +++++- ...26-05-29-improve-narrow-options-table.html | 359 ++++++++++++++++++ 3 files changed, 469 insertions(+), 9 deletions(-) create mode 100644 docs/turns/2026-05-29-improve-narrow-options-table.html diff --git a/.beads/issues.jsonl b/.beads/issues.jsonl index fb7d590..8dda90e 100644 --- a/.beads/issues.jsonl +++ b/.beads/issues.jsonl @@ -24,6 +24,7 @@ {"_type":"issue","id":"islandflow-ayo","title":"Drop stale backlog events from live fanout","description":"Follow-up to live freshness rollout: /ws/live was still fanning out stale backlog events for freshness-gated channels, which kept tape panes in Live feed behind despite active synthetic ingest. Gate fanout and cache ingest by freshness for options/nbbo/equities/flow.","status":"closed","priority":1,"issue_type":"bug","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:26:39Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:26:44Z","started_at":"2026-04-28T21:26:44Z","closed_at":"2026-04-28T21:26:44Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-0v6","title":"Fix tape freshness, NBBO coverage, pause controls, and filter popup","description":"Implement the tape fixes requested for synthetic options notional sizing, strict live freshness, live-mode pause/resume behavior, stronger NBBO snapshot coverage, and moving flow filters behind a popup. Includes server-side live cache changes, web terminal state/UI changes, and tests for synthetic pricing, live snapshot freshness/NBBO retention, and live pause/filter interactions.","status":"closed","priority":1,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:02:52Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:13:38Z","started_at":"2026-04-28T21:02:57Z","closed_at":"2026-04-28T21:13:38Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-e4r","title":"Implement smart-money flow filtering and synthetic firehose modes","description":"Implement the approved multi-surface plan for named synthetic market profiles, options raw-vs-signal filtering, live/API filter contracts, Tape page client-side flow filters, firehose-readiness improvements, tests, and README updates.","status":"closed","priority":1,"issue_type":"feature","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:10:49Z","created_by":"dirtydishes","updated_at":"2026-04-28T20:29:29Z","started_at":"2026-04-28T20:10:53Z","closed_at":"2026-04-28T20:29:29Z","close_reason":"Implemented synthetic market profiles, options signal-path filtering, signal-aware API/replay contracts, Tape page filters, tests, and README updates. Follow-up tracked in islandflow-biq.","dependency_count":0,"dependent_count":0,"comment_count":0} +{"_type":"issue","id":"islandflow-833","title":"Improve narrow options table responsiveness","description":"Adapt the Options route for narrow screens so dense tape tables remain contained in their panes, preserve row identity while horizontally panning, and keep the mobile ticker/filter controls readable.","acceptance_criteria":"Options tape panes have bounded heights on narrow screens; table body scrolls internally; first table column remains visible while panning; mobile topbar and filter controls have adequate spacing; web production build passes.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-29T22:34:05Z","created_by":"dirtydishes","updated_at":"2026-05-29T22:36:20Z","started_at":"2026-05-29T22:34:24Z","closed_at":"2026-05-29T22:36:20Z","close_reason":"Implemented narrow-screen options pane containment, sticky row context, touch-scroll affordances, and mobile control spacing. Validated with web build and in-browser narrow viewport checks.","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-aq9","title":"Harden terminal UI error and overflow states","description":"Harden the web terminal against oversized API errors, non-JSON synthetic admin failures, and long status text so live trading panes remain stable under bad network/backend responses.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-29T22:10:16Z","created_by":"dirtydishes","updated_at":"2026-05-29T22:13:37Z","closed_at":"2026-05-29T22:13:37Z","close_reason":"Hardened terminal UI error rendering, synthetic admin failure parsing, long-message wrapping, and added focused tests.","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-ggm","title":"Harden web terminal UI states","description":"Improve the web terminal surface so it handles loading, empty data, API failures, overflow, and accessible live-status behavior more robustly.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-29T21:59:45Z","created_by":"dirtydishes","updated_at":"2026-05-29T22:05:45Z","started_at":"2026-05-29T21:59:59Z","closed_at":"2026-05-29T22:05:45Z","close_reason":"Hardened web terminal status announcements, empty states, table semantics, clipped-cell fallbacks, tests, validation, and turn documentation.","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-dk5","title":"Remove frontend cooker route","description":"Remove the experimental /frontend-cooker page and update repository references that still list it as an available public route.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-29T13:50:38Z","created_by":"dirtydishes","updated_at":"2026-05-29T13:53:05Z","started_at":"2026-05-29T13:50:48Z","closed_at":"2026-05-29T13:53:05Z","close_reason":"Removed the /frontend-cooker Next.js route, cleaned route/scanner references, documented the work, and validated the web build.","dependency_count":0,"dependent_count":0,"comment_count":0} diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 092961a..1c1a5cc 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -1469,6 +1469,7 @@ h3 { } .data-table-wrap { + position: relative; display: flex; flex: 1 1 auto; min-height: 0; @@ -2489,6 +2490,10 @@ h3 { min-height: 0; } + .page-grid-options > .terminal-pane { + height: clamp(430px, 68svh, 720px); + } + .command-deck-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: @@ -2563,7 +2568,7 @@ h3 { } .terminal-content { - padding: 16px 10px 22px; + padding: 18px 10px calc(22px + env(safe-area-inset-bottom)); } .page-shell { @@ -2615,11 +2620,19 @@ h3 { position: sticky; top: 0; z-index: 30; - padding: 12px 10px; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: start; + column-gap: 10px; + row-gap: 16px; + padding: 10px 10px 12px; } .terminal-topbar-leading { - width: 100%; + width: auto; + min-width: 0; + grid-column: 1; + grid-row: 1; } .terminal-button, @@ -2638,30 +2651,50 @@ h3 { .terminal-topbar-actions, .terminal-topbar-controls, .terminal-topbar-mode { - width: 100%; + min-width: 0; justify-content: flex-start; } - .terminal-topbar-actions, + .terminal-topbar-actions { + display: contents; + } + .terminal-topbar-controls { - flex-direction: column; - align-items: stretch; + width: 100%; + grid-column: 1 / -1; + grid-row: 2; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + gap: 10px; + } + + .terminal-topbar-mode { + grid-column: 2; + grid-row: 1; + width: auto; + justify-content: flex-end; } .terminal-menu-trigger { - width: 100%; + width: auto; justify-content: center; } .terminal-topbar-mode .terminal-button, - .terminal-topbar-controls > .terminal-button, .terminal-topbar-leading > .terminal-button, .page-actions > .terminal-button, .page-actions > .flow-filter-popover { width: 100%; } + .terminal-topbar-controls > .terminal-button { + width: auto; + min-width: 76px; + } + .instrument-focus-chip { + grid-column: 1 / -1; max-width: none; min-height: 44px; justify-content: space-between; @@ -2685,6 +2718,10 @@ h3 { border-radius: 12px; } + .page-grid-options > .terminal-pane { + height: clamp(390px, 62svh, 620px); + } + .terminal-pane-head, .terminal-pane-body { padding: 14px 12px; @@ -2716,6 +2753,7 @@ h3 { width: 100%; flex-direction: column; align-items: stretch; + margin-top: 2px; } .flow-filter-popover { @@ -2753,6 +2791,19 @@ h3 { margin-inline: -12px; border-radius: 0; scroll-snap-type: x proximity; + scrollbar-gutter: stable; + overscroll-behavior-x: contain; + -webkit-overflow-scrolling: touch; + } + + .data-table-wrap::after { + content: ""; + position: sticky; + right: 0; + z-index: 5; + flex: 0 0 18px; + pointer-events: none; + background: linear-gradient(90deg, transparent, oklch(0.12 0.01 250 / 0.92)); } .data-table { @@ -2770,6 +2821,39 @@ h3 { padding-inline: 8px; } + .data-table-head .data-table-cell:first-child, + .data-table-row .data-table-cell:first-child { + position: sticky; + left: 0; + z-index: 4; + margin-left: -8px; + padding-left: 8px; + background: oklch(0.13 0.01 250); + box-shadow: + 1px 0 0 oklch(0.72 0.012 250 / 0.14), + 14px 0 18px oklch(0.06 0.01 250 / 0.42); + } + + .data-table-head .data-table-cell:first-child { + z-index: 6; + background: oklch(0.15 0.012 250); + } + + .data-table-row.is-even .data-table-cell:first-child { + background: oklch(0.145 0.011 250); + } + + .data-table-row:hover .data-table-cell:first-child, + .data-table-row:focus-visible .data-table-cell:first-child { + background: oklch(0.18 0.025 74); + } + + .data-table-row-classified .data-table-cell:first-child { + background: + linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.04 + var(--classifier-intensity, 0) * 0.1)), transparent 90%), + oklch(0.13 0.01 250); + } + .data-table-row-options, .data-table-row-equities { height: 40px; @@ -2832,6 +2916,22 @@ h3 { } @media (max-width: 420px) { + .terminal-topbar { + column-gap: 8px; + row-gap: 14px; + padding-inline: 8px; + } + + .terminal-menu-trigger { + min-width: 92px; + padding-inline: 8px; + } + + .terminal-topbar-mode .terminal-button { + min-width: 82px; + padding-inline: 8px; + } + .terminal-content { padding-inline: 8px; } diff --git a/docs/turns/2026-05-29-improve-narrow-options-table.html b/docs/turns/2026-05-29-improve-narrow-options-table.html new file mode 100644 index 0000000..c4119bf --- /dev/null +++ b/docs/turns/2026-05-29-improve-narrow-options-table.html @@ -0,0 +1,359 @@ + + + + + + Improve Narrow Options Table Responsiveness + + + +
+
+

Improve Narrow Options Table Responsiveness

+

+ Adapted the Options route for narrow screens so dense tape tables stay inside bounded panes, + keep row identity visible while panning horizontally, and give the mobile ticker/filter controls + more room to breathe. +

+
+ Completed: 2026-05-29 18:34 EDT + Issue: islandflow-833 + Surface: apps/web Options route +
+
+ +
+

Summary

+

+ The Options tape now behaves like a contained terminal pane on phone-sized screens instead of + stretching down the page with the full virtual table height. The first table column remains pinned + during horizontal panning, and the mobile topbar spacing is less compressed around the ticker field. +

+
+ +
+

Changes Made

+
    +
  • Added bounded viewport-based heights for Options route panes at tablet and phone breakpoints.
    • +
  • Kept the first table column sticky on narrow screens so row context remains visible while panning.
    • +
  • Added a subtle right-edge affordance and touch scrolling refinements for horizontally wide tables.
    • +
  • Improved mobile topbar and page-action spacing around the Menu, Ticker, Contract Filter, and Filter controls.
    • +
+
+ +
+

Context

+

+ The Options route contains high-density virtualized market data. On desktop, panes have bounded heights + and table bodies scroll internally. At narrow breakpoints, the previous CSS changed those panes to + automatic height, which made the table read as an endless page rather than an isolated tape viewport. +

+
+ +
+

Important Implementation Details

+
    +
  • The fix stays CSS-only and preserves the existing virtualized row markup and row-height assumptions.
    • +
  • The pane heights use svh so mobile browser chrome is handled better than with classic viewport units.
    • +
  • The sticky first column is limited to the narrow-screen breakpoint where horizontal panning is expected.
    • +
  • No backend URL or private environment configuration was added to committed source.
    • +
+
+ +
+

Relevant Diff Snippets

+

+ Rendered with @pierre/diffs/ssr using preloadPatchDiff against the real + apps/web/app/globals.css patch. The SSR output is embedded directly below. +

+
+
apps/web/app/globals.css
-9+109
1469
1470
1471
1472
1473
1474
2489
2490
2491
2492
2493
2494
2563
2564
2565
2566
2567
2568
2569
2615
2616
2617
2618
2619
2620
2621
2622
2623
2624
2625
2638
2639
2640
2641
2642
2643
2644
2645
2646
2647
2648
2649
2650
2651
2652
2653
2654
2655
2656
2657
2658
2659
2660
2661
2662
2663
2664
2665
2666
2667
2685
2686
2687
2688
2689
2690
2716
2717
2718
2719
2720
2721
2753
2754
2755
2756
2757
2758
2770
2771
2772
2773
2774
2775
2832
2833
2834
2835
2836
2837
}

+
.data-table-wrap {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
    min-height: 0;
  }

+
  .command-deck-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
  }

+
  .terminal-content {
    padding: 16px 10px 22px;
  }

+
  .page-shell {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 12px 10px;
  }

+
  .terminal-topbar-leading {
    width: 100%;
  }

+
  .terminal-button,
  .terminal-topbar-actions,
  .terminal-topbar-controls,
  .terminal-topbar-mode {
    width: 100%;
    justify-content: flex-start;
  }

+
  .terminal-topbar-actions,
  .terminal-topbar-controls {
    flex-direction: column;
    align-items: stretch;
  }

+
  .terminal-menu-trigger {
    width: 100%;
    justify-content: center;
  }

+
  .terminal-topbar-mode .terminal-button,
  .terminal-topbar-controls > .terminal-button,
  .terminal-topbar-leading > .terminal-button,
  .page-actions > .terminal-button,
  .page-actions > .flow-filter-popover {
    width: 100%;
  }

+
  .instrument-focus-chip {
    max-width: none;
    min-height: 44px;
    justify-content: space-between;
    border-radius: 12px;
  }

+
  .terminal-pane-head,
  .terminal-pane-body {
    padding: 14px 12px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

+
  .flow-filter-popover {
    margin-inline: -12px;
    border-radius: 0;
    scroll-snap-type: x proximity;
  }

+
  .data-table {
    padding-inline: 8px;
  }

+
  .data-table-row-options,
  .data-table-row-equities {
    height: 40px;
}

+
@media (max-width: 420px) {
  .terminal-content {
    padding-inline: 8px;
  }
1469
1470
1471
1472
1473
1474
1475
2490
2491
2492
2493
2494
2495
2496
2497
2498
2499
2568
2569
2570
2571
2572
2573
2574
2620
2621
2622
2623
2624
2625
2626
2627
2628
2629
2630
2631
2632
2633
2634
2635
2636
2637
2638
2651
2652
2653
2654
2655
2656
2657
2658
2659
2660
2661
2662
2663
2664
2665
2666
2667
2668
2669
2670
2671
2672
2673
2674
2675
2676
2677
2678
2679
2680
2681
2682
2683
2684
2685
2686
2687
2688
2689
2690
2691
2692
2693
2694
2695
2696
2697
2698
2699
2700
2718
2719
2720
2721
2722
2723
2724
2725
2726
2727
2753
2754
2755
2756
2757
2758
2759
2791
2792
2793
2794
2795
2796
2797
2798
2799
2800
2801
2802
2803
2804
2805
2806
2807
2808
2809
2821
2822
2823
2824
2825
2826
2827
2828
2829
2830
2831
2832
2833
2834
2835
2836
2837
2838
2839
2840
2841
2842
2843
2844
2845
2846
2847
2848
2849
2850
2851
2852
2853
2854
2855
2856
2857
2858
2859
2916
2917
2918
2919
2920
2921
2922
2923
2924
2925
2926
2927
2928
2929
2930
2931
2932
2933
2934
2935
2936
2937
}

+
.data-table-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
    min-height: 0;
  }

+
  .page-grid-options > .terminal-pane {
    height: clamp(430px, 68svh, 720px);
  }

+
  .command-deck-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
  }

+
  .terminal-content {
    padding: 18px 10px calc(22px + env(safe-area-inset-bottom));
  }

+
  .page-shell {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 16px;
    padding: 10px 10px 12px;
  }

+
  .terminal-topbar-leading {
    width: auto;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }

+
  .terminal-button,
  .terminal-topbar-actions,
  .terminal-topbar-controls,
  .terminal-topbar-mode {
    min-width: 0;
    justify-content: flex-start;
  }

+
  .terminal-topbar-actions {
    display: contents;
  }

+
  .terminal-topbar-controls {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
  }

+
  .terminal-topbar-mode {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-content: flex-end;
  }

+
  .terminal-menu-trigger {
    width: auto;
    justify-content: center;
  }

+
  .terminal-topbar-mode .terminal-button,
  .terminal-topbar-leading > .terminal-button,
  .page-actions > .terminal-button,
  .page-actions > .flow-filter-popover {
    width: 100%;
  }

+
  .terminal-topbar-controls > .terminal-button {
    width: auto;
    min-width: 76px;
  }

+
  .instrument-focus-chip {
    grid-column: 1 / -1;
    max-width: none;
    min-height: 44px;
    justify-content: space-between;
    border-radius: 12px;
  }

+
  .page-grid-options > .terminal-pane {
    height: clamp(390px, 62svh, 620px);
  }

+
  .terminal-pane-head,
  .terminal-pane-body {
    padding: 14px 12px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 2px;
  }

+
  .flow-filter-popover {
    margin-inline: -12px;
    border-radius: 0;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

+
  .data-table-wrap::after {
    content: "";
    position: sticky;
    right: 0;
    z-index: 5;
    flex: 0 0 18px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, oklch(0.12 0.01 250 / 0.92));
  }

+
  .data-table {
    padding-inline: 8px;
  }

+
  .data-table-head .data-table-cell:first-child,
  .data-table-row .data-table-cell:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    margin-left: -8px;
    padding-left: 8px;
    background: oklch(0.13 0.01 250);
    box-shadow:
      1px 0 0 oklch(0.72 0.012 250 / 0.14),
      14px 0 18px oklch(0.06 0.01 250 / 0.42);
  }

+
  .data-table-head .data-table-cell:first-child {
    z-index: 6;
    background: oklch(0.15 0.012 250);
  }

+
  .data-table-row.is-even .data-table-cell:first-child {
    background: oklch(0.145 0.011 250);
  }

+
  .data-table-row:hover .data-table-cell:first-child,
  .data-table-row:focus-visible .data-table-cell:first-child {
    background: oklch(0.18 0.025 74);
  }

+
  .data-table-row-classified .data-table-cell:first-child {
    background:
      linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.04 + var(--classifier-intensity, 0) * 0.1)), transparent 90%),
      oklch(0.13 0.01 250);
  }

+
  .data-table-row-options,
  .data-table-row-equities {
    height: 40px;
}

+
@media (max-width: 420px) {
  .terminal-topbar {
    column-gap: 8px;
    row-gap: 14px;
    padding-inline: 8px;
  }

+
  .terminal-menu-trigger {
    min-width: 92px;
    padding-inline: 8px;
  }

+
  .terminal-topbar-mode .terminal-button {
    min-width: 82px;
    padding-inline: 8px;
  }

+
  .terminal-content {
    padding-inline: 8px;
  }
+
+
+ +
+

Expected Impact for End-Users

+

+ On phones and narrow browser windows, traders can scan the Options tape inside a stable pane instead of + losing the rest of the page to an unbounded table. Horizontal panning now keeps time context visible, + and the top controls are easier to distinguish and tap. +

+
+ +
+

Validation

+
    +
  • Passed: bun --cwd=apps/web run build.
    • +
  • Passed: Browser check at 390px wide on http://localhost:3000/options.
    • +
  • Measured a contained pane height of 523px and internal table viewport of 317px with a larger internal scroll height.
    • +
  • Confirmed no page-level horizontal overflow and confirmed live tape status showed Connected.
    • +
+
+ +
+

Issues, Limitations, and Mitigations

+
    +
  • The narrow-screen table is still a dense data table, not a separate card/list representation.
    • +
  • The sticky first column mitigates lost context without changing virtualization behavior or row heights.
    • +
  • The page remains vertically scrollable between stacked panes, but each tape now owns its internal scroll.
    • +
+
+ +
+

Follow-up Work

+

+ No required follow-up is left for islandflow-833. A future enhancement could add a dedicated compact row + layout for phone screens if the product wants less horizontal panning than the current dense terminal table. +

+
+
+ +