From c31d59ea79bb3b6b55bede62865e8439e7b95f90 Mon Sep 17 00:00:00 2001
From: dirtydishes <dishes@dpdrm.com>
Date: Mon, 4 May 2026 04:02:41 -0400
Subject: [PATCH] Align options table scrolling

---
 apps/web/app/globals.css  | 30 +++++++++++++++++++++---------
 apps/web/app/terminal.tsx | 20 +++++++++++---------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 1dfa32d..64fe95c 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -898,28 +898,33 @@ h3 {
 }
 
 .options-table-wrap {
+  display: flex;
+  flex: 1 1 auto;
   min-height: 0;
-  overflow: auto;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .options-table {
-  min-width: 1040px;
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .options-table-head,
 .options-table-row {
   display: grid;
-  grid-template-columns: 88px 72px 76px 72px 44px 76px 130px 70px 82px 64px 56px minmax(150px, 1fr);
+  grid-template-columns: minmax(72px, 0.8fr) minmax(50px, 0.55fr) minmax(64px, 0.7fr) minmax(58px, 0.6fr) minmax(34px, 0.35fr) minmax(62px, 0.65fr) minmax(104px, 1fr) minmax(54px, 0.55fr) minmax(66px, 0.7fr) minmax(48px, 0.5fr) minmax(42px, 0.45fr) minmax(92px, 0.9fr);
   align-items: center;
-  column-gap: 10px;
+  column-gap: 8px;
 }
 
 .options-table-head {
-  position: sticky;
-  top: 0;
-  z-index: 2;
+  flex: 0 0 auto;
   height: 30px;
-  padding: 0 10px;
+  padding: 0 8px;
   border-bottom: 1px solid var(--border);
   background: rgba(8, 11, 16, 0.98);
   color: var(--muted);
@@ -928,10 +933,17 @@ h3 {
   letter-spacing: 0.08em;
 }
 
+.options-table-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .options-table-row {
   width: 100%;
   min-height: 34px;
-  padding: 0 10px;
+  padding: 0 8px;
   border: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.055);
   background:
diff --git a/apps/web/app/terminal.tsx b/apps/web/app/terminal.tsx
index d720116..1092460 100644
--- a/apps/web/app/terminal.tsx
+++ b/apps/web/app/terminal.tsx
@@ -5369,7 +5369,7 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
         />
       }
     >
-      <div className="options-table-wrap" ref={state.optionsScroll.listRef}>
+      <div className="options-table-wrap">
         {items.length === 0 ? (
           <div className="empty">
             {state.tickerSet.size > 0
@@ -5396,10 +5396,11 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
               <span>IV</span>
               <span>CLASSIFIER</span>
             </div>
-            {virtual.topSpacerHeight > 0 ? (
-              <div style={{ height: `${virtual.topSpacerHeight}px` }} aria-hidden />
-            ) : null}
-            {virtual.visibleItems.map((print) => {
+            <div className="options-table-body" ref={state.optionsScroll.listRef}>
+              {virtual.topSpacerHeight > 0 ? (
+                <div style={{ height: `${virtual.topSpacerHeight}px` }} aria-hidden />
+              ) : null}
+              {virtual.visibleItems.map((print) => {
               const contractId = normalizeContractId(print.option_contract_id);
               const parsed = parseOptionContractId(contractId);
               const contractDisplay = formatOptionContractLabel(contractId);
@@ -5462,10 +5463,11 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
                   {cells}
                 </div>
               );
-            })}
-            {virtual.bottomSpacerHeight > 0 ? (
-              <div style={{ height: `${virtual.bottomSpacerHeight}px` }} aria-hidden />
-            ) : null}
+              })}
+              {virtual.bottomSpacerHeight > 0 ? (
+                <div style={{ height: `${virtual.bottomSpacerHeight}px` }} aria-hidden />
+              ) : null}
+            </div>
           </div>
         )}
         {!limit ? <LoadOlderControl channel="options" /> : null}