Scale sidebar business name to fit (@BoredManCodes)

agent/css/sidebar_brand_fix.css

@@ -0,0 +1,8 @@
+/* Custom syling for scaling the brand text (MSP name) in the sidebar */
+
+.app-sidebar .brand-text {
+    display: inline-block;
+    vertical-align: middle;
+    white-space: nowrap;
+    transform-origin: left center;
+}

agent/includes/side_nav.php

@@ -1,3 +1,7 @@
+<!-- Custom fix for scaling the brand text (MSP name) in the sidebar -->
+<link rel="stylesheet" href="css/sidebar_brand_fix.css">
+<script src="js/sidebar_brand_fix.js" defer></script>
+
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
@@ -16,7 +20,7 @@
 
     <div class="sidebar-brand">
         <a class="brand-link" href="<?= $brand_link ?>">
-            <span class="brand-text h4 mb-0"><?= escapeHtml($session_company_name) ?></span>
+            <span class="brand-text h4 mb-0" id="sidebar-brand-text"><?= escapeHtml($session_company_name) ?></span>
         </a>
     </div>
 

agent/js/sidebar_brand_fix.js

@@ -0,0 +1,19 @@
+function fitBrandText() {
+    text.style.transform = 'none';
+    // getBoundingClientRect gives real on-screen edges, unlike
+    // offsetLeft which is unreliable for inline text
+    var available = link.getBoundingClientRect().right - text.getBoundingClientRect().left - 8;
+    var natural = text.scrollWidth;
+    // Scale rather than step font-size down.
+    var scale = natural > available ? available / natural : 1;
+    text.style.transform = 'scale(' + scale.toFixed(4) + ')';
+}
+
+var text = document.getElementById('sidebar-brand-text');
+
+if (text) {
+    var link = text.closest('.brand-link');
+
+    // Fires once on observe as well as any later width change
+    new ResizeObserver(fitBrandText).observe(link);
+}