fix: align option chain headers

2 files changed, 58 insertions, 6 deletions

diff --git a/frontend/app/options.css b/frontend/app/options.css
index 2841932..cff0162 100644
--- a/frontend/app/options.css
+++ b/frontend/app/options.css
@@ -343,6 +343,7 @@
   border-radius: var(--r-3); overflow: hidden;
   box-shadow: var(--shadow-1);
   display: flex; flex-direction: column;
+  --opt-chain-group-row-offset: 23px;
 }
 .opt-chain-head {
   padding: var(--sp-3) var(--sp-4);
@@ -366,6 +367,7 @@
 .opt-chain th.group {
   font-family: var(--font-display); font-style: italic;
   font-size: var(--fs-14); text-transform: none; letter-spacing: 0; padding-bottom: 0;
+  text-align: center;
 }
 .opt-chain td {
   font-family: var(--font-mono); font-variant-numeric: tabular-nums;
@@ -377,18 +379,60 @@
 .opt-chain-wrap.compact .opt-chain-head { padding: var(--sp-2) var(--sp-3); }
 .opt-chain-wrap.compact .opt-chain-head h3 { font-size: var(--fs-16); }
 .opt-chain-wrap.compact .opt-chain-head .sub { font-size: 10px; }
+.opt-chain-wrap.compact { --opt-chain-group-row-offset: 21px; }
 .opt-chain td.k { text-align: center; color: var(--fg-2); font-weight: 500; }
 .opt-chain td.itm { color: var(--fg-1); }
 .opt-chain td.otm { color: var(--fg-3); }
 .opt-chain td.dim { color: var(--fg-4); font-size: var(--fs-12); }
 .opt-chain td.iv { color: var(--brass); }
+.opt-chain thead tr:first-child th {
+  box-sizing: border-box;
+  height: var(--opt-chain-group-row-offset);
+  line-height: 1;
+  padding-top: 0;
+  padding-bottom: 0;
+  top: 0;
+  z-index: 3;
+}
+.opt-chain thead tr:nth-child(2) th {
+  top: var(--opt-chain-group-row-offset);
+  z-index: 2;
+}
 .opt-chain tr { cursor: pointer; transition: background 100ms; }
 .opt-chain tr:hover { background: rgba(194,170,122,0.05); }
 .opt-chain tr.atm td { background: rgba(194,170,122,0.10); }
 .opt-chain tr.atm td.k { color: var(--brass-bright); font-weight: 600; }
 .opt-chain tr.selected td { background: rgba(194,170,122,0.22); }
 .opt-chain tr.selected td.k { color: var(--brass-bright); }
-.opt-chain-scroll { max-height: 540px; overflow: auto; }
+.opt-chain-scroll {
+  max-height: 540px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line-3) var(--ink-0);
+}
+
+.opt-chain-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.opt-chain-scroll::-webkit-scrollbar-track {
+  background: var(--ink-0);
+}
+
+.opt-chain-scroll::-webkit-scrollbar-thumb {
+  background: var(--line-3);
+  border-radius: var(--r-1);
+  border: 1px solid var(--ink-0);
+}
+
+.opt-chain-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--brass-deep);
+}
+
+.opt-chain-scroll::-webkit-scrollbar-corner {
+  background: var(--ink-0);
+}
 
 .opt-chart-card {
   background: var(--ink-1); border: 1px solid var(--line-1);
diff --git a/frontend/components/prism/options/OptionsChain.tsx b/frontend/components/prism/options/OptionsChain.tsx
index be6b518..828ec9c 100644
--- a/frontend/components/prism/options/OptionsChain.tsx
+++ b/frontend/components/prism/options/OptionsChain.tsx
@@ -66,11 +66,19 @@ export function ChainTable({ rows, atmStrike, selectedK, type, onPick, compact =
         <table className="opt-chain">
           <thead>
             <tr>
-              {!compact && <th className="group side-c" colSpan={2} style={{ textAlign: 'center' }}>— calls —</th>}
-              {compact && <th className="group side-c" colSpan={3} style={{ textAlign: 'center' }}>— calls —</th>}
-              <th className="group k" style={{ textAlign: 'center' }}>strike</th>
-              {!compact && <th className="group side-p" colSpan={2} style={{ textAlign: 'center' }}>— puts —</th>}
-              {compact && <th className="group side-p" colSpan={3} style={{ textAlign: 'center' }}>— puts —</th>}
+              {compact ? (
+                <>
+                  <th className="group side-c" colSpan={3}>calls</th>
+                  <th className="group k" colSpan={1}>strike</th>
+                  <th className="group side-p" colSpan={3}>puts</th>
+                </>
+              ) : (
+                <>
+                  <th className="group side-c" colSpan={4}>calls</th>
+                  <th className="group k" colSpan={1}>strike</th>
+                  <th className="group side-p" colSpan={4}>puts</th>
+                </>
+              )}
             </tr>
             {!compact ? (
               <tr>