From ee604abe00c85cf406ba47c4af406e1aa41cfe41 Mon Sep 17 00:00:00 2001 From: ericboucher Date: Fri, 18 Jul 2025 14:49:07 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20replace=20useSize=20wi?= =?UTF-8?q?th=20useMediaQuery=20in=20account=20settings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix buggy layout transitions on Safari mobile by using media queries instead of size detection for smoother settings panel responsive behavior. --- .../features/settings/components/SettingsDialogExtended.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx index 5afdbd99..a2a963c5 100644 --- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx @@ -16,6 +16,7 @@ import { GeneralTab } from './tabs/GeneralTab' import { AudioTab } from './tabs/AudioTab' import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver' import { useRef } from 'react' +import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery' const tabsStyle = css({ maxHeight: '40.625rem', // fixme size copied from meet settings modal @@ -51,8 +52,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => { const { t } = useTranslation('settings') const dialogEl = useRef(null) - const { width } = useSize(dialogEl) - const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel + const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel return (