Fix: navbar brand anchor size + Safari position jitter (#13810)

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -4,27 +4,29 @@
     (click)="closeMobileSearch(); toggleMenuCollapsed()">
     <i-bs width="1.5em" height="1.5em" name="list"></i-bs>
   </button>
-  <a class="navbar-brand d-flex align-items-center me-0 ps-md-3 py-0 order-sm-0"
+  <div class="navbar-brand-container order-sm-0">
+    <a class="navbar-brand d-flex align-items-center me-0 ps-md-3 py-0"
     [ngClass]="{ 'slim': slimSidebarEnabled, '' : !slimSidebarEnabled }"
     routerLink="/dashboard"
     tourAnchor="tour.intro">
-    @if (!hasCustomBranding) {
-      <pngx-logo extra_classes="navbar-official-logo px-1" height="2.4rem"></pngx-logo>
-      <pngx-brand-mark class="brand-mark brand-mark-slim d-none"></pngx-brand-mark>
-    } @else {
-      @if (customAppLogo) {
-        <img class="brand-logo" [src]="customAppLogo" alt="" />
+      @if (!hasCustomBranding) {
+        <pngx-logo extra_classes="navbar-official-logo px-1" height="2.4rem"></pngx-logo>
+        <pngx-brand-mark class="brand-mark brand-mark-slim d-none"></pngx-brand-mark>
       } @else {
-        <pngx-brand-mark class="brand-mark"></pngx-brand-mark>
-      }
-      <div class="brand-copy ms-2 text-truncate" [class.d-md-none]="slimSidebarEnabled">
-        <span class="brand-title text-truncate">{{ appTitle }}</span>
-        @if (customAppTitle) {
-          <span class="byline text-uppercase font-monospace" i18n>by Paperless-ngx</span>
+        @if (customAppLogo) {
+          <img class="brand-logo" [src]="customAppLogo" alt="" />
+        } @else {
+          <pngx-brand-mark class="brand-mark"></pngx-brand-mark>
         }
-      </div>
-    }
-  </a>
+        <div class="brand-copy ms-2 text-truncate" [class.d-md-none]="slimSidebarEnabled">
+          <span class="brand-title text-truncate">{{ appTitle }}</span>
+          @if (customAppTitle) {
+            <span class="byline text-uppercase font-monospace" i18n>by Paperless-ngx</span>
+          }
+        </div>
+      }
+    </a>
+  </div>
   <div class="search-container flex-grow-1 py-2 pb-3 pb-sm-2 me-sm-auto order-3 order-sm-1"
     [class.mobile-hidden]="mobileSearchHidden()">
     <div class="col-12 header-search mx-auto">

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -362,6 +362,7 @@ main {
   }
 
   ::ng-deep .navbar-official-logo {
+    will-change: filter; // Safari repaints the whole navbar on filter change without this
     filter: drop-shadow(0 1px 2px rgba(var(--pngx-navbar-brand-shadow-rgb), .3));
     transition: filter .15s ease-in-out;
 
@@ -438,8 +439,9 @@ main {
 
 // true center the search with equal flex widths
 @media (min-width: 768px) {
-  .navbar-brand,
+  .navbar-brand-container,
   .navbar > ul {
+    display: flex; // so the brand link stays as wide as its contents
     flex: 1 1 0;
   }
 
@@ -488,6 +490,7 @@ main {
     text-align: left;
   }
 
+  .navbar-brand-container,
   .navbar-brand {
     grid-area: brand;
     min-width: 0;