diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index b0ebe9fc2..6e65e025b 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -133,9 +133,7 @@
     };
 
     function updateViewport() {
-        if (window) {
-            isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
-        }
+        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
     }
 </script>
 
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index dc2620ff9..d146055ae 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -47,23 +47,9 @@
         showAccountMenu: boolean;
     };
 
-    onMount(() => {
-        if (window) {
-            const mediaQuery = window.matchMedia('(max-width: 768px)');
-            const updateViewport = () => (isSmallViewport = mediaQuery.matches);
-
-            // Initial check
-            updateViewport();
-
-            // Listen for changes
-            mediaQuery.addEventListener('change', updateViewport);
-
-            return () => {
-                // Cleanup listener
-                mediaQuery.removeEventListener('change', updateViewport);
-            };
-        }
-    });
+    function updateViewport() {
+        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
+    }
 
     function updateTheme(theme: 'light' | 'dark' | 'system') {
         const themeInUse =
@@ -95,6 +81,7 @@
     export let showAccountMenu = false;
 </script>
 
+<svelte:window on:resize={updateViewport} />
 <Navbar.Base {...$$props}>
     <div slot="left" class="left">
         <div class="only-mobile">