mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-11 17:19:33 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

fix: active tab scaling issue (#6127)

Browse Source
This commit is contained in:
Dhruwang Jariwala
2025-06-30 16:40:33 +05:30
committed by GitHub
parent 5f02ad49c1
commit da72101320
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/web/modules/ui/components/options-switch/index.tsx
View File

@@ -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 (