logo fix 7

banner.js

@@ -120,14 +120,18 @@
   // 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 = '2em'; // grow the icon now that the text next to it is gone
+  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;
 
+    logoImg.style.setProperty('height', LOGO_MAX_SIZE, 'important');
     logoImg.style.setProperty('max-height', LOGO_MAX_SIZE, 'important');
-    logoImg.style.setProperty('max-width', 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
@@ -135,6 +139,24 @@
     // 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;
@@ -144,6 +166,19 @@
         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() {