diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index 2988883a5..668f26ce0 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -132,25 +132,14 @@
         }
     };
 
-    onMount(() => {
+    function updateViewport() {
         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);
-            };
+            isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
         }
-    });
+    }
 </script>
 
+<svelte:window on:resize={updateViewport} />
 <div use:melt={$menubar}>
     {#if !isSmallViewport}
         <span class="breadcrumb-separator">/</span>