logo fix 7

banner.js

@@ -4,6 +4,7 @@
   // incrementversion DISMISSED_KEY
   const DISMISSED_KEY = 'jf-banner-dismissed-v1';
   const BANNER_ID = 'custom-announcement-banner';
+  const SCRIPT_START = Date.now();
 
   // Edit these to change banner content:
   const BANNER_HTML = `
@@ -100,7 +101,10 @@
       offsetElements.add(el);
     });
 
-    if (offsetPx > 0 && candidates.size === 0) {
+    // Jellyfin's SPA mounts its header asynchronously after DOMContentLoaded,
+    // so an empty result in the first few seconds is expected, not a bug.
+    // Only warn once things have had time to settle.
+    if (offsetPx > 0 && candidates.size === 0 && Date.now() - SCRIPT_START > 4000) {
       console.warn('[custom-banner] No fixed top navigation elements detected to push down; banner may overlap the menu.');
     }
   }
@@ -116,20 +120,65 @@
   // filename inject-banner.sh replaces for the top-bar logo; keep these two
   // in sync if that ever changes again.
   const LOGO_IMG_MATCH = 'icon-transparent';
+  const LOGO_MAX_SIZE = '44px'; // grow the icon now that the text next to it is gone; fixed
+                                 // px instead of em, since em resolves against whatever
+                                 // (possibly tiny/zeroed) font-size the icon wrapper uses
 
   function hideLogoText() {
     const logoImg = document.querySelector('img[src*="' + LOGO_IMG_MATCH + '"]');
     if (!logoImg) return;
-    const container = logoImg.parentElement;
+
+    logoImg.style.setProperty('height', LOGO_MAX_SIZE, 'important');
+    logoImg.style.setProperty('max-height', LOGO_MAX_SIZE, 'important');
+    logoImg.style.setProperty('width', 'auto', 'important');
+    logoImg.style.setProperty('max-width', 'none', 'important');
+
+    // The image is usually wrapped in its own icon span, so the text label
+    // is a sibling of that wrapper, not of the <img> itself. Walk up to the
+    // whole clickable logo button/link and hide every child that isn't part
+    // of the branch containing the image.
+    const container = logoImg.closest('button, a, [role="button"]') || logoImg.parentElement;
     if (!container) return;
+
+    // Strip any fixed size/overflow-clipping the icon wrapper itself might
+    // impose (MUI's startIcon span is normally sized for a small icon font),
+    // which would otherwise clip the enlarged image regardless of its own size.
+    const iconWrap = logoImg.parentElement;
+    if (iconWrap && iconWrap !== container) {
+      iconWrap.style.setProperty('overflow', 'visible', 'important');
+      iconWrap.style.setProperty('height', 'auto', 'important');
+      iconWrap.style.setProperty('width', 'auto', 'important');
+      iconWrap.style.setProperty('max-height', 'none', 'important');
+      iconWrap.style.setProperty('max-width', 'none', 'important');
+      // MUI's startIcon wrapper carries baked-in negative-left/positive-right
+      // margin (compensating for icon-font glyphs with their own internal
+      // padding); left over, it shifts the image into the container's left
+      // padding and stacks extra space on the right. Zero it so the
+      // container's own symmetric padding is the only thing spacing it.
+      iconWrap.style.setProperty('margin', '0', 'important');
+    }
     Array.prototype.forEach.call(container.childNodes, function (node) {
       if (node === logoImg) return;
+      if (node.nodeType === Node.ELEMENT_NODE && node.contains(logoImg)) return;
       if (node.nodeType === Node.TEXT_NODE) {
         if (node.textContent.trim()) node.textContent = '';
       } else if (node.nodeType === Node.ELEMENT_NODE && node.style.display !== 'none') {
         node.style.display = 'none';
       }
     });
+
+    // The button was sized (min-width, padding) to fit the icon + label
+    // together; with the label gone, shrink it to fit just the icon instead
+    // of leaving the label's dead space behind. It's a flex item in the
+    // toolbar, so flex-grow/flex-basis would otherwise override the explicit
+    // width below and keep reserving the old footprint.
+    container.style.setProperty('flex', '0 0 auto', 'important');
+    container.style.setProperty('min-width', '0', 'important');
+    container.style.setProperty('width', 'fit-content', 'important');
+    // MUI buttons carry their own horizontal padding around the content
+    // (icon + label); the icon span itself now fits tightly (confirmed via
+    // devtools), so any remaining right-side gap is this padding.
+    container.style.setProperty('padding', '0 8px', 'important');
   }
 
   function isHomePage() {