From 9f1d7bef67d0c9f3730bb67eace3c50244796ffe Mon Sep 17 00:00:00 2001
From: ronload <91997734+ronload@users.noreply.github.com>
Date: Wed, 29 Apr 2026 15:25:38 +0800
Subject: [PATCH] fix: align position calculator mode switcher thumb in Chrome

Replace fieldset with div role=radiogroup so the absolutely-positioned
thumb is sized against a normal block containing box. Chrome reserves
anonymous space for legend on fieldset, which made the thumb shorter
than its frame; Safari rendered correctly. Behavior and a11y semantics
are preserved via aria-disabled and existing button disabled state.
---
 .../custom/position-calculator/mode-switcher.tsx         | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/custom/position-calculator/mode-switcher.tsx b/src/components/custom/position-calculator/mode-switcher.tsx
index 6a5a936..96039d7 100644
--- a/src/components/custom/position-calculator/mode-switcher.tsx
+++ b/src/components/custom/position-calculator/mode-switcher.tsx
@@ -31,7 +31,7 @@ export function ModeSwitcher({
     if (!disabled && next !== mode) onModeChange(next);
   };
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLFieldSetElement>) => {
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (disabled) return;
     const i = MODES.indexOf(mode);
     let next = i;
@@ -61,9 +61,10 @@ export function ModeSwitcher({
   };
 
   return (
-    <fieldset
+    <div
+      role="radiogroup"
       aria-label={t("ariaGroupLabel")}
-      disabled={disabled}
+      aria-disabled={disabled || undefined}
       onKeyDown={handleKeyDown}
       tabIndex={disabled ? -1 : 0}
       className={cn(
@@ -99,6 +100,6 @@ export function ModeSwitcher({
           {labels[option]}
         </button>
       ))}
-    </fieldset>
+    </div>
   );
 }