fix(ui): harden public page components

packages/ui/components/Navbar.wrn

@@ -76,6 +76,7 @@ size: string = "default"
       </div>
 
       <div class="wrn-navbar__main">
+        {#if brand.logo || brand.icon || brand.label || brand.description}
         <a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
           {#if brand.logo}
             <img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
@@ -90,6 +91,7 @@ size: string = "default"
             </span>
           {/if}
         </a>
+        {/if}
 
         <button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
           <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
@@ -509,6 +511,10 @@ size: string = "default"
     }
 
     @media (max-width: 900px) {
+    .wrn-navbar__main {
+        min-height: 3.5rem;
+        padding-block: 0.4rem;
+      }
     .wrn-navbar--width-compact .wrn-navbar__main {
         width: 100%;
       }
@@ -527,7 +533,8 @@ size: string = "default"
         background: var(--wrn-color-surface);
         border-bottom: 1px solid var(--wrn-color-border);
         box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
-        max-height: calc(100dvh - 4rem);
+        height: calc(100dvh - 3.5rem);
+        max-height: calc(100dvh - 3.5rem);
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -535,6 +542,13 @@ size: string = "default"
     .wrn-navbar__collapse.is-open {
         display: flex;
       }
+    .wrn-navbar:has(.wrn-navbar__collapse.is-open)::after {
+        position: fixed;
+        z-index: -1;
+        inset: 0;
+        background: rgb(15 23 42 / 0.42);
+        content: "";
+      }
     .wrn-navbar__menus,
       .wrn-navbar__actions {
         width: 100%;