diff --git a/src/webapp/components/navigation/appLayout/AppLayout.tsx b/src/webapp/components/navigation/appLayout/AppLayout.tsx
index ad665b1e..a6a8beab 100644
--- a/src/webapp/components/navigation/appLayout/AppLayout.tsx
+++ b/src/webapp/components/navigation/appLayout/AppLayout.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 export default function AppLayout(props: Props) {
   const { mobileOpened, desktopOpened } = useNavbarContext();
-  const isMobile = useMediaQuery('(max-width: 48em)'); // "sm" breakpoint
+  const isMobile = useMediaQuery('(max-width: 48em)', true); // "sm" breakpoint
   const pathname = usePathname();
 
   const ROUTES_WITH_ASIDE = ['/url'];
diff --git a/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx b/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
index 209c2d43..3e18f696 100644
--- a/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
+++ b/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
@@ -7,7 +7,7 @@ import { useNavbarContext } from '@/providers/navbar';
 
 export default function ComposerDrawer() {
   const { mobileOpened, desktopOpened } = useNavbarContext();
-  const isDesktop = useMediaQuery('(min-width: 36em)'); // "sm" breakpoint
+  const isDesktop = useMediaQuery('(min-width: 36em)', false); // "sm" breakpoint
   const isNavOpen = isDesktop ? desktopOpened : mobileOpened;
   const shouldShowFab = !isNavOpen;
   const [opened, setOpened] = useState(false);