2 files changed, 19 insertions, 1 deletions
diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js
index ca3f1caec67..c76e44a196d 100644
--- a/app/assets/javascripts/logo.js
+++ b/app/assets/javascripts/logo.js
@@ -3,3 +3,20 @@ export default function initLogoAnimation() {
     document.querySelector('.tanuki-logo')?.classList.add('animate');
   });
 }
+
+export function initPortraitLogoDetection() {
+  const image = document.querySelector('.js-portrait-logo-detection');
+
+  image?.addEventListener(
+    'load',
+    ({ currentTarget: img }) => {
+      const isPortrait = img.height > img.width;
+      if (isPortrait) {
+        // Limit the width when the logo has portrait format
+        img.classList.replace('gl-h-9', 'gl-w-10');
+      }
+      img.classList.remove('gl-visibility-hidden');
+    },
+    { once: true },
+  );
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index e4ff5e55f5c..c3914391a49 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -22,7 +22,7 @@ import { getLocationHash, visitUrl, mergeUrlParams } from './lib/utils/url_utili
 
 // everything else
 import LazyLoader from './lazy_loader';
-import initLogoAnimation from './logo';
+import initLogoAnimation, { initPortraitLogoDetection } from './logo';
 import initBreadcrumbs from './breadcrumb';
 import initPersistentUserCallouts from './persistent_user_callouts';
 import { initUserTracking, initDefaultTrackers } from './tracking';
@@ -83,6 +83,7 @@ function deferredInitialisation() {
   initBreadcrumbs();
   initPrefetchLinks('.js-prefetch-document');
   initLogoAnimation();
+  initPortraitLogoDetection();
   initUserPopovers();
   initBroadcastNotifications();
   initPersistentUserCallouts();