fix: align option chain headers

1 files changed, 13 insertions, 5 deletions

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>