From da72101320ce0628983682259f5474f136f8abcc Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Mon, 30 Jun 2025 16:40:33 +0530
Subject: [PATCH] fix: active tab scaling issue (#6127)

---
 .../ui/components/options-switch/index.tsx    | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/web/modules/ui/components/options-switch/index.tsx b/apps/web/modules/ui/components/options-switch/index.tsx
index 35044c708d..5d3ece3686 100644
--- a/apps/web/modules/ui/components/options-switch/index.tsx
+++ b/apps/web/modules/ui/components/options-switch/index.tsx
@@ -21,16 +21,27 @@ export const OptionsSwitch = ({
   const [highlightStyle, setHighlightStyle] = useState({});
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if (containerRef.current) {
-      const activeElement = containerRef.current.querySelector(`[data-value="${currentOption}"]`);
-      if (activeElement) {
-        const { offsetLeft, offsetWidth } = activeElement as HTMLElement;
-        setHighlightStyle({
-          left: `${offsetLeft}px`,
-          width: `${offsetWidth}px`,
-        });
+    const updateHighlight = () => {
+      if (containerRef.current) {
+        const activeElement = containerRef.current.querySelector(`[data-value="${currentOption}"]`);
+        if (activeElement) {
+          const { offsetLeft, offsetWidth } = activeElement as HTMLElement;
+          setHighlightStyle({
+            left: `${offsetLeft}px`,
+            width: `${offsetWidth}px`,
+          });
+        } else {
+          // Hide highlight if no matching element found
+          setHighlightStyle({ opacity: 0 });
+        }
       }
-    }
+    };
+    // Initial call
+    updateHighlight();
+
+    // Listen to resize
+    window.addEventListener("resize", updateHighlight);
+    return () => window.removeEventListener("resize", updateHighlight);
   }, [currentOption]);
 
   return (