fix: add explicit width/height to navbar and marquee logo images

franklinjavier · franklinjavier · commit 544dee06a9fa · 2026-03-26T16:16:54.000Z
Without intrinsic dimensions the browser can't reserve space before
images load, causing layout shift. Add width/height attributes to
navbar logo SVGs and marquee brand logos.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -119,11 +119,15 @@ const LogoSection = ({
           <img
             src={'/images/logos/logo-black.svg'}
             alt=""
+            width={30}
+            height={30}
             className="row-start-1 col-start-1 w-full dark:opacity-0 opacity-0 group-hover:opacity-100"
           />
           <img
             src={'/images/logos/logo-white.svg'}
             alt=""
+            width={30}
+            height={30}
             className="row-start-1 col-start-1 w-full light:opacity-0 dark:block opacity-0 group-hover:opacity-100"
           />
         </div>
diff --git a/src/components/TrustedByMarquee.tsx b/src/components/TrustedByMarquee.tsx
@@ -55,7 +55,9 @@ export function TrustedByMarquee({
                 alt={brand}
                 loading="lazy"
                 decoding="async"
-                className="max-w-24 max-h-14 w-auto h-auto object-contain opacity-50 grayscale hover:opacity-100 transition-all duration-200 dark:invert dark:opacity-70 shrink-0"
+                width={96}
+                height={56}
+                className="max-w-24 max-h-14 w-24 h-14 object-contain opacity-50 grayscale hover:opacity-100 transition-all duration-200 dark:invert dark:opacity-70 shrink-0"
               />
             ) : (
               <span
