From 3ed643e07247fa4d810aa49a4983257a5a219a6a Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Fri, 28 Aug 2026 22:15:53 +0200
Subject: [PATCH] style(settings): tidy the General panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per review: the panel-wide 'saved instantly' hint goes; the date-format picker
loses its embedded sample line (kept as the buttons' tooltip) so the row is one
line tall; the IARU region moves up under the date format, before the themes;
and the parentheticals after Distances-in-miles, Check-updates and the
telemetry opt-out go. The telemetry and ClubLog explanations survive as
tooltips — an opt-out about data leaving the machine, and an option changing
how entities resolve, should still say what they do somewhere.
---
 frontend/src/components/SettingsModal.tsx | 56 ++++++++++-------------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 4a4816b..1b7f4c3 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -690,8 +690,7 @@ function TelemetryToggle() {
     <label className="flex items-center gap-2 text-sm cursor-pointer">
       <Checkbox checked={on} disabled={!loaded}
         onCheckedChange={(c) => { const v = !!c; setOn(v); SetTelemetryEnabled(v).catch(() => {}); }} />
-      {t('settings.telemetry')}
-      <span className="text-xs text-muted-foreground">({t('settings.telemetryHint')})</span>
+      <span title={t('settings.telemetryHint')}>{t('settings.telemetry')}</span>
     </label>
   );
 }
@@ -7149,7 +7148,7 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
     const { lang, setLang, t } = useI18n();
     return (
       <>
-        <SectionHeader title={t('sec.general')} hint={t('gen.hint')} />
+        <SectionHeader title={t('sec.general')} />
         <div className="space-y-3 max-w-3xl">
           <div className="flex items-center gap-3">
             <Label className="text-sm w-40">{t('settings.language')}</Label>
@@ -7177,15 +7176,33 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
                  ['us', t('gen.dateUS'), '07-30-2026 14:25']] as [DateFormat, string, string][]).map(([code, label, sample]) => (
                 <button key={code} type="button" title={sample}
                   onClick={() => { setDateFormat(code); setDateFmtSel(code); }}
-                  className={cn('flex flex-col items-start px-3 py-1 text-sm font-medium border-l border-border first:border-l-0',
+                  className={cn('px-3 py-1.5 text-sm font-medium border-l border-border first:border-l-0',
                     dateFmtSel === code ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
                   {label}
-                  <span className="text-[10px] font-mono opacity-70">{sample}</span>
                 </button>
               ))}
             </div>
           </div>
 
+          <div className="flex items-center gap-2 text-sm">
+            {/* The IARU region drives the band edges and mode segments the band
+                maps draw — Region 2's 40 m runs to 7300, Region 1's stops at
+                7200 — and nothing else: spots and logging are region-blind. */}
+            <Label className="text-sm w-40 shrink-0">{t('gen.iaruRegion')}</Label>
+            <Select value={String(region)} onValueChange={(v) => {
+              const r = (v === '2' ? 2 : v === '3' ? 3 : 1) as IaruRegion;
+              setRegion(r); setIaruRegion(r);
+            }}>
+              <SelectTrigger className="h-8 w-72"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">{t('gen.iaruR1')}</SelectItem>
+                <SelectItem value="2">{t('gen.iaruR2')}</SelectItem>
+                <SelectItem value="3">{t('gen.iaruR3')}</SelectItem>
+              </SelectContent>
+            </Select>
+            <span className="text-xs text-muted-foreground">{t('gen.iaruHint')}</span>
+          </div>
+
           <ThemeSelector />
 
           <label className="flex items-center gap-2 text-sm cursor-pointer">
@@ -7241,34 +7258,16 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
             <Checkbox checked={groupDigital} onCheckedChange={(c) => { const v = !!c; setGroupDigital(v); writeUiPref('opslog.groupDigitalSlots', v ? '1' : '0'); }} />
             {t('gen.groupDigital')} <span className="text-xs text-muted-foreground">{t('gen.groupDigitalHint')}</span>
           </label>
-          <div className="flex items-center gap-2 text-sm">
-            {/* The IARU region drives the band edges and mode segments the band
-                maps draw — Region 2's 40 m runs to 7300, Region 1's stops at
-                7200 — and nothing else: spots and logging are region-blind. */}
-            <span>{t('gen.iaruRegion')}</span>
-            <Select value={String(region)} onValueChange={(v) => {
-              const r = (v === '2' ? 2 : v === '3' ? 3 : 1) as IaruRegion;
-              setRegion(r); setIaruRegion(r);
-            }}>
-              <SelectTrigger className="h-8 w-64"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1">{t('gen.iaruR1')}</SelectItem>
-                <SelectItem value="2">{t('gen.iaruR2')}</SelectItem>
-                <SelectItem value="3">{t('gen.iaruR3')}</SelectItem>
-              </SelectContent>
-            </Select>
-            <span className="text-xs text-muted-foreground">{t('gen.iaruHint')}</span>
-          </div>
           <label className="flex items-center gap-2 text-sm cursor-pointer">
             {/* Distances are computed in km everywhere and converted at display
                 time — see lib/units. Changing this repaints the columns that
                 already carry a distance; nothing stored moves. */}
             <Checkbox checked={milesUnit} onCheckedChange={(c) => { const v = !!c; setMilesUnit(v); setUseMiles(v); }} />
-            {t('gen.miles')} <span className="text-xs text-muted-foreground">{t('gen.milesHint')}</span>
+            {t('gen.miles')}
           </label>
           <label className="flex items-center gap-2 text-sm cursor-pointer">
             <Checkbox checked={checkUpdates} onCheckedChange={(c) => { const v = !!c; setCheckUpdates(v); writeUiPref('opslog.checkUpdates', v ? '1' : '0'); }} />
-            {t('gen.checkUpdates')} <span className="text-xs text-muted-foreground">{t('gen.checkUpdatesHint')}</span>
+            {t('gen.checkUpdates')}
           </label>
           <TelemetryToggle />
 
@@ -7331,12 +7330,7 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
                 }}
                 className="mt-0.5"
               />
-              <span>
-                {t('gen.clubUse')}
-                <span className="block text-xs text-muted-foreground mt-0.5">
-                  {t('gen.clubDesc')}
-                </span>
-              </span>
+              <span title={t('gen.clubDesc')}>{t('gen.clubUse')}</span>
             </label>
             <div className="flex items-center gap-3 pl-6">
               <Button variant="outline" size="sm" className="h-8" disabled={clubBusy}