feat: dps score analysis ui cleanup (#1587)

* fix: scrollbar issues

* fix: scoring modal incorrect form values

* feat: dps score analysis ui cleanup

* refactor: cleanup

* refactor: cleanup

* refactor: cleanup

* refactor: cleanup

* refactor: cleanup

Author: fribbels

public/locales/en_US/charactersTab.yaml

@@ -134,13 +134,13 @@ CharacterPreview:
       MEMO_TALENT: TALENTᴹ
       BREAKS: 'BREAKS:'
     CombatResults:
-      Header: Combat damage results
-      Primary: 'Primary ability:'
-      Character: 'Character DMG:'
-      Benchmark: 'Benchmark DMG:'
-      Baseline: 'Baseline DMG:'
-      Maximum: 'Maximum DMG:'
-      Score: 'DPS score %:'
+      Header: Benchmark Results
+      Primary: Primary Ability
+      Character: Character
+      Benchmark: Benchmark
+      Baseline: Baseline
+      Maximum: Maximum
+      Score: DPS Score
       Abilities:
         BASIC: BASIC DMG
         SKILL: SKILL DMG
@@ -159,21 +159,21 @@ CharacterPreview:
   ScoringColumn:
     Character:
       Header: 'Character build ({{score}}%)'
-      BasicStats: Character basic stats
+      BasicStats: Character <1>basic stats</1>
       CombatStats: Character <1>combat stats</1>
       Substats: Character subs (min rolls)
       Mainstats: Character main stats
       Abilities: Character ability damage
     Benchmark:
       Header: 'Benchmark build ({{score}}%)'
-      BasicStats: 100% benchmark basic stats
+      BasicStats: 100% benchmark <1>basic stats</1>
       CombatStats: 100% benchmark <1>combat stats</1>
       Substats: 100% benchmark subs (min rolls)
       Mainstats: 100% benchmark main stats
       Abilities: 100% benchmark ability damage
     Perfect:
       Header: 'Perfect build ({{score}}%)'
-      BasicStats: 200% perfect basic stats
+      BasicStats: 200% perfect <1>basic stats</1>
       CombatStats: 200% perfect <1>combat stats</1>
       Substats: 200% perfect subs (max rolls)
       Mainstats: 200% perfect main stats

src/lib/characterPreview/DPSScoreDisclaimer.module.css

@@ -2,6 +2,7 @@
   border-radius: 4px;
   overflow: hidden;
   width: 100%;
+  margin-bottom: 10px;
 }
 
 .accordion {

src/lib/characterPreview/StatRow.tsx

@@ -94,14 +94,19 @@ export const StatRow = memo(function StatRow({
   if (!finalStats) {
     return null as unknown as ReactElement
   }
+
+  const divider = <Divider style={{ margin: 'auto 10px', flexGrow: 1, width: 'unset', minWidth: 'unset' }} variant="dashed" />
+
+  const valueText = loading
+    ? '...'
+    : `${valueDisplay}${isFlat(stat) || stat === 'CV' || stat === 'simScore' ? '' : '%'}${stat === 'simScore' ? t('ThousandsSuffix') : ''}`
+
   return (
     <div title={value1000thsPrecision} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 16, filter: loading ? 'blur(2px)' : 'none' }}>
       <img src={Assets.getStatIcon(stat)} className={iconClasses.statIconSpaced} />
       {`${readableStat}${edits?.[stat] ? ' *' : ''}`}
-      <Divider style={{ margin: 'auto 10px', flexGrow: 1, width: 'unset', minWidth: 'unset' }} variant="dashed" />
-      {loading
-        ? '...'
-        : `${valueDisplay}${isFlat(stat) || stat === 'CV' || stat === 'simScore' ? '' : '%'}${stat === 'simScore' ? t('ThousandsSuffix') : ''}`}
+      {divider}
+      {valueText}
     </div>
   )
 })

src/lib/characterPreview/buildAnalysis/CharacterScoringSummary.module.css

@@ -1,19 +1,6 @@
 .setImage {
   height: 60px;
-}
-
-.partImage {
-  height: 30px;
-}
-
-.preTextRight {
-  margin: 0;
-  text-align: right;
-}
-
-.columnDivider {
-  flex-grow: 1;
-  margin: 10px 30px;
+  align-self: center;
 }
 
 .statPreviewSection {
@@ -30,41 +17,103 @@
   contain: layout style;
 }
 
-.deferredSection {
-  content-visibility: auto;
-  contain-intrinsic-size: auto 400px;
-}
-
 .mainTitle {
+  font-family: var(--font-ui);
   font-size: 28px;
-  font-weight: bold;
+  font-weight: 600;
   margin: 0;
 }
 
 .sectionTitle {
-  font-size: 22px;
-  text-decoration: underline;
+  font-family: var(--font-ui);
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
 
 .relicRaritySection {
   width: 100%;
   margin-top: 10px;
 }
 
-.relicRarityAlert {
-  margin-bottom: 20px;
-  width: 100%;
-}
-
 .combatResultsWidth {
   width: 255px;
 }
 
 .scoringColumnHeader {
-  font-size: 20px;
-  font-weight: bold;
+  font-family: var(--font-ui);
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* Typography for data rows and labels */
+.dataLabel {
+  composes: label from '../summary/summaryStyles.module.css';
+  color: var(--text-secondary);
+}
+
+.dataValue {
+  composes: value from '../summary/summaryStyles.module.css';
+}
+
+.sectionLabel {
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--text-tertiary);
+  margin: 0 auto;
+}
+
+.annotation {
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+  text-align: center;
 }
 
 .teammateIcon {
   height: 60px;
 }
+
+/* ─── Column Cards ───────────────────────────────────────────────────────── */
+
+.columnCardFilled {
+  border-radius: var(--radius-md);
+  padding: 0;
+  background: var(--layer-2);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.columnFilledHeader {
+  padding: 10px 16px;
+  background: var(--layer-3);
+  border-bottom: var(--border-subtle);
+  text-align: center;
+}
+
+.columnFilledBody {
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.columnFilledSection {
+  padding-bottom: 16px;
+  border-bottom: var(--border-subtle);
+}
+
+.columnFilledSection:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+/* Character column highlight */
+.columnHighlightFilled {
+  outline: 1px solid rgba(225, 165, 100, 0.2);
+}
+