From 37d72ac897bfd083b6450788a15a4bb57202fc9d Mon Sep 17 00:00:00 2001
From: Frank <franklinjalves@gmail.com>
Date: Thu, 26 Mar 2026 16:17:38 +0000
Subject: [PATCH] fix: match navbar Suspense fallback wrapper to loaded state

The fallback rendered LogoSection without a wrapper div, but the
loaded state wrapped it in a div with flex/shrink classes. This
mismatch caused a layout shift when BrandContextMenu loaded.
---
 src/components/Navbar.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 4899a387..395b5085 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -305,12 +305,14 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
           <React.Suspense
             fallback={
-              <LogoSection
-                menuButtonRef={menuButtonRef}
-                setShowMenu={setShowMenu}
-                showMenu={showMenu}
-                title={Title}
-              />
+              <div className={twMerge(`flex items-center group flex-shrink-0`)}>
+                <LogoSection
+                  menuButtonRef={menuButtonRef}
+                  setShowMenu={setShowMenu}
+                  showMenu={showMenu}
+                  title={Title}
+                />
+              </div>
             }
           >
             <LazyBrandContextMenu