Let each hover trigger decide bold vs not, share one style with default cursor

HOVER_BTN_STYLE is now a single constant (default cursor, no bold) used
directly everywhere; bold is merged in per instance instead of being
baked into per-file variants. Triggers naming a specific result value
(District N, N election(s)) stay bold; triggers introducing or
explaining a concept (Freedom-To-Vote test, the 4 recent statewide
elections) don't. The wrap fix for the one long trigger phrase moves to
its own WRAPPING_HOVER_BTN_STYLE, layered on the shared base.

Author: fangge518

app/src/app/components/EvalPanel/BasicsSection.tsx

@@ -8,7 +8,7 @@ import {useMapStore} from '@store/mapStore';
 import {DocumentEvaluation} from '@utils/api/apiHandlers/getEvaluation';
 import {useDistrictHover} from '@/app/hooks/useDistrictHover';
 import {useZoomToDistrict} from '@/app/hooks/useZoomToDistrict';
-import {HOVER_TRIGGER_BASE_STYLE} from './hoverTriggerStyle';
+import {HOVER_BTN_STYLE} from './hoverTriggerStyle';
 
 type DeviationView = 'top_to_bottom' | 'max_absolute' | 'both';
 
@@ -23,12 +23,6 @@ interface BasicsSectionProps {
   evaluation: DocumentEvaluation;
 }
 
-const HOVER_BTN_STYLE: React.CSSProperties = {
-  ...HOVER_TRIGGER_BASE_STYLE,
-  fontWeight: 'bold',
-  cursor: 'default',
-};
-
 export const BasicsSection: React.FC<BasicsSectionProps> = ({evaluation}) => {
   const mapDocument = useMapStore(state => state.mapDocument);
   const {onDistrictEnter, onDistrictLeave} = useDistrictHover();
@@ -189,7 +183,7 @@ export const BasicsSection: React.FC<BasicsSectionProps> = ({evaluation}) => {
                 Your plan&apos;s most populous district is{' '}
                 <button
                   type="button"
-                  style={HOVER_BTN_STYLE}
+                  style={{...HOVER_BTN_STYLE, fontWeight: 'bold'}}
                   onMouseEnter={() => onDistrictEnter(population_deviation.most_populous_district)}
                   onMouseLeave={onDistrictLeave}
                   onFocus={() => onDistrictEnter(population_deviation.most_populous_district)}
@@ -200,7 +194,7 @@ export const BasicsSection: React.FC<BasicsSectionProps> = ({evaluation}) => {
                 and least populous district is{' '}
                 <button
                   type="button"
-                  style={HOVER_BTN_STYLE}
+                  style={{...HOVER_BTN_STYLE, fontWeight: 'bold'}}
                   onMouseEnter={() => onDistrictEnter(population_deviation.least_populous_district)}
                   onMouseLeave={onDistrictLeave}
                   onFocus={() => onDistrictEnter(population_deviation.least_populous_district)}

app/src/app/components/EvalPanel/PartisanSection.tsx

@@ -10,7 +10,7 @@ import {NUMBER_FORMATS} from '@/app/constants/demography/format';
 import {PovSwitcher, type Pov} from '@components/Shared/PovSwitcher';
 import {getReadableTextColor} from '@/app/utils/colors';
 import {HelpTip, HELP_TIP_FAST_DELAY} from '@components/HelpTip/HelpTip';
-import {HOVER_TRIGGER_BASE_STYLE} from './hoverTriggerStyle';
+import {HOVER_BTN_STYLE} from './hoverTriggerStyle';
 
 interface PartisanSectionProps {
   evaluation: DocumentEvaluation;
@@ -39,14 +39,11 @@ const METRIC_CUTOFF = {
 
 const MAX_ALPHA = 0.6;
 
-// Used for both the FTV HelpTip trigger and the "4 recent statewide elections"
-// cross-table highlight trigger.
-const HOVER_BTN_STYLE: React.CSSProperties = {
-  ...HOVER_TRIGGER_BASE_STYLE,
-  cursor: 'help',
-  // Overrides the browser default button style (inline-block, nowrap) so a
-  // multi-word trigger like "the 4 recent statewide elections" wraps with the
-  // surrounding paragraph instead of staying on one line.
+// Overrides the browser default button style (inline-block, nowrap) so a
+// multi-word trigger like "the 4 recent statewide elections" wraps with the
+// surrounding paragraph instead of staying on one line.
+const WRAPPING_HOVER_BTN_STYLE: React.CSSProperties = {
+  ...HOVER_BTN_STYLE,
   display: 'inline',
   whiteSpace: 'normal',
 };
@@ -340,7 +337,7 @@ export const PartisanSection: React.FC<PartisanSectionProps> = ({evaluation}) =>
                     : among{' '}
                     <button
                       type="button"
-                      style={HOVER_BTN_STYLE}
+                      style={WRAPPING_HOVER_BTN_STYLE}
                       onMouseEnter={() => setFtvHover(true)}
                       onMouseLeave={() => setFtvHover(false)}
                       onFocus={() => setFtvHover(true)}
@@ -352,7 +349,7 @@ export const PartisanSection: React.FC<PartisanSectionProps> = ({evaluation}) =>
                     out of {numDistricts} seats for{' '}
                     <button
                       type="button"
-                      style={HOVER_BTN_STYLE}
+                      style={{...HOVER_BTN_STYLE, fontWeight: 'bold'}}
                       onMouseEnter={() => setFtvPassHover(true)}
                       onMouseLeave={() => setFtvPassHover(false)}
                       onFocus={() => setFtvPassHover(true)}

app/src/app/components/EvalPanel/hoverTriggerStyle.ts

@@ -1,13 +1,15 @@
 import type {CSSProperties} from 'react';
 
-/** Shared base for an inline, underlined-dotted hover trigger that reads as plain
- * text until hovered — used by BasicsSection (district-highlight triggers) and
- * PartisanSection (FTV HelpTip and table-highlight triggers). Each caller layers
- * its own `cursor`/`fontWeight`/wrap overrides on top for its own use case. */
-export const HOVER_TRIGGER_BASE_STYLE: CSSProperties = {
+/** Shared inline, underlined-dotted hover trigger style, used by BasicsSection
+ * (district-highlight triggers) and PartisanSection (FTV HelpTip and
+ * table-highlight triggers). `fontWeight`/wrap behavior are layered on top per
+ * usage — a trigger naming a specific result value reads bold, one introducing
+ * or explaining a concept doesn't. */
+export const HOVER_BTN_STYLE: CSSProperties = {
   background: 'none',
   border: 'none',
   padding: 0,
   font: 'inherit',
+  cursor: 'default',
   textDecoration: 'underline dotted',
 };