From 24ba65c8299f4ce25bc3a00e7517b08572339bf7 Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 14 Apr 2026 08:40:38 +0100
Subject: [PATCH] fix(detail): scale SATs cascade bars against full chart width

Labels were sharing a flex row with the bar, so the bar's width %
was computed against the flex remainder after the label rather than
the full chart area. A 96% bar rendered around the 75% ruler mark,
and mobile was worse. Move labels to a header row above each bar and
give the bar a full-width track, so X% now aligns with X% on the ruler.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nextjs-app/components/SatsChart.module.css | 30 ++++++++++++++-----
 nextjs-app/components/SatsChart.tsx        | 34 +++++++++++++---------
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/nextjs-app/components/SatsChart.module.css b/nextjs-app/components/SatsChart.module.css
index 07f1be6..741a088 100644
--- a/nextjs-app/components/SatsChart.module.css
+++ b/nextjs-app/components/SatsChart.module.css
@@ -75,18 +75,31 @@
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.65rem;
   padding-top: 0.9rem;
 }
 
 .barRow {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.barHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
   gap: 0.5rem;
 }
 
-.bar {
+.barTrack {
+  width: 100%;
   height: 22px;
+  position: relative;
+}
+
+.bar {
+  height: 100%;
   border-radius: 6px;
   position: relative;
   transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -101,19 +114,20 @@
 }
 
 .barLabel {
-  font-size: 0.72rem;
-  font-weight: 600;
+  font-size: 0.75rem;
+  font-weight: 700;
   color: var(--text-primary, #1a1612);
   white-space: nowrap;
-  flex-shrink: 0;
   position: relative;
   z-index: 3;
 }
 
 .barLabelSuffix {
-  font-weight: 400;
+  font-weight: 500;
   color: var(--text-muted, #6d685f);
-  font-size: 0.68rem;
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 /* ── Ruler ── */
diff --git a/nextjs-app/components/SatsChart.tsx b/nextjs-app/components/SatsChart.tsx
index fc7106a..a70badf 100644
--- a/nextjs-app/components/SatsChart.tsx
+++ b/nextjs-app/components/SatsChart.tsx
@@ -62,25 +62,31 @@ function SubjectColumn({ subject }: { subject: SubjectData }) {
         <div className={styles.barGroup}>
           {expectedPct != null && (
             <div className={styles.barRow}>
-              <div
-                ref={expectedRef}
-                className={`${styles.bar} ${styles.barExpected}`}
-                data-width={expectedPct}
-              />
-              <div className={styles.barLabel}>
-                {expectedPct.toFixed(0)}% <span className={styles.barLabelSuffix}>expected</span>
+              <div className={styles.barHeader}>
+                <span className={styles.barLabelSuffix}>Expected</span>
+                <span className={styles.barLabel}>{expectedPct.toFixed(0)}%</span>
+              </div>
+              <div className={styles.barTrack}>
+                <div
+                  ref={expectedRef}
+                  className={`${styles.bar} ${styles.barExpected}`}
+                  data-width={expectedPct}
+                />
               </div>
             </div>
           )}
           {exceedingPct != null && (
             <div className={styles.barRow}>
-              <div
-                ref={exceedingRef}
-                className={`${styles.bar} ${styles.barExceeding}`}
-                data-width={exceedingPct}
-              />
-              <div className={styles.barLabel}>
-                {exceedingPct.toFixed(0)}% <span className={styles.barLabelSuffix}>exceeding</span>
+              <div className={styles.barHeader}>
+                <span className={styles.barLabelSuffix}>Exceeding</span>
+                <span className={styles.barLabel}>{exceedingPct.toFixed(0)}%</span>
+              </div>
+              <div className={styles.barTrack}>
+                <div
+                  ref={exceedingRef}
+                  className={`${styles.bar} ${styles.barExceeding}`}
+                  data-width={exceedingPct}
+                />
               </div>
             </div>
           )}