fix: constrain OS icon sizing and remove background when image loads

- Add overflow:hidden to .vf-os-card and .vf-os-icon
- Constrain .vf-os-icon img with max-width/max-height:100%
- Only apply brand color background as fallback when image fails to load
- No background color when image is present (clean transparent display)
- Apply same logic to both category headers and template cards
- Update both module.js (rebuild panel) and hooks.php (checkout page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/servers/VirtFusionDirect/hooks.php

@@ -187,14 +187,14 @@ add_hook('ClientAreaFooterOutput', 1, function ($vars) {
 
                 var catIcon = document.createElement('span');
                 catIcon.className = 'vf-os-category-icon';
-                catIcon.style.background = catColor;
                 if (cat.icon && osGalleryData.baseUrl) {
                     var catImg = document.createElement('img');
                     catImg.src = osGalleryData.baseUrl + '/img/logo/' + encodeURIComponent(cat.icon);
                     catImg.alt = '';
-                    catImg.onerror = function() { this.parentNode.textContent = (cat.name || '?')[0].toUpperCase(); };
+                    catImg.onerror = function() { this.parentNode.style.background = catColor; this.parentNode.textContent = (cat.name || '?')[0].toUpperCase(); };
                     catIcon.appendChild(catImg);
                 } else {
+                    catIcon.style.background = catColor;
                     catIcon.textContent = (cat.name || '?')[0].toUpperCase();
                 }
 
@@ -235,14 +235,14 @@ add_hook('ClientAreaFooterOutput', 1, function ($vars) {
 
                     var iconDiv = document.createElement('div');
                     iconDiv.className = 'vf-os-icon';
-                    iconDiv.style.background = catColor;
                     if (tpl.icon && osGalleryData.baseUrl) {
                         var tplImg = document.createElement('img');
                         tplImg.src = osGalleryData.baseUrl + '/img/logo/' + encodeURIComponent(tpl.icon);
                         tplImg.alt = '';
-                        tplImg.onerror = function() { this.parentNode.textContent = ''; var s = document.createElement('span'); s.textContent = (tpl.name || '?')[0].toUpperCase(); this.parentNode.appendChild(s); };
+                        tplImg.onerror = function() { this.parentNode.style.background = catColor; this.parentNode.textContent = ''; var s = document.createElement('span'); s.textContent = (tpl.name || '?')[0].toUpperCase(); this.parentNode.appendChild(s); };
                         iconDiv.appendChild(tplImg);
                     } else {
+                        iconDiv.style.background = catColor;
                         var sp = document.createElement('span');
                         sp.textContent = (tpl.name || '?')[0].toUpperCase();
                         iconDiv.appendChild(sp);

modules/servers/VirtFusionDirect/templates/css/module.css

@@ -302,6 +302,7 @@
     padding: 10px 8px;
     text-align: center;
     cursor: pointer;
+    overflow: hidden;
     transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
 }
 .vf-os-card:hover {
@@ -326,8 +327,12 @@
     color: #fff;
     font-weight: 700;
     font-size: 1.1rem;
+    overflow: hidden;
+    flex-shrink: 0;
 }
 .vf-os-icon img {
+    max-width: 100%;
+    max-height: 100%;
     width: 24px;
     height: 24px;
     object-fit: contain;

modules/servers/VirtFusionDirect/templates/js/module.js

@@ -336,13 +336,16 @@ function vfRenderOsGallery(container, data, hiddenInput) {
 
         // Accordion header
         var header = $('<div class="vf-os-category-header"></div>');
-        var iconSpan = $('<span class="vf-os-category-icon"></span>').css("background", brandColor);
+        var iconSpan = $('<span class="vf-os-category-icon"></span>');
         if (category.icon && baseUrl) {
             var catImg = $('<img alt="">').attr("src", baseUrl + "/img/logo/" + encodeURIComponent(category.icon));
-            catImg.on("error", function () { $(this).replaceWith($('<span></span>').text((category.name || "?")[0].toUpperCase())); });
+            catImg.on("error", function () {
+                $(this).parent().css("background", brandColor);
+                $(this).replaceWith($('<span></span>').text((category.name || "?")[0].toUpperCase()));
+            });
             iconSpan.append(catImg);
         } else {
-            iconSpan.text((category.name || "?")[0].toUpperCase());
+            iconSpan.css("background", brandColor).text((category.name || "?")[0].toUpperCase());
         }
         var titleSpan = $('<span></span>').text(category.name + " (" + category.templates.length + ")");
         var arrow = $('<span class="vf-os-category-arrow">' + (ci === 0 ? '&#9660;' : '&#9654;') + '</span>');
@@ -372,12 +375,16 @@ function vfRenderOsGallery(container, data, hiddenInput) {
                 .attr("data-search", label.toLowerCase());
             if (tpl.eol) card.addClass("vf-os-card-eol");
 
-            var iconDiv = $('<div class="vf-os-icon"></div>').css("background", brandColor);
+            var iconDiv = $('<div class="vf-os-icon"></div>');
             if (tpl.icon && baseUrl) {
                 var tplImg = $('<img alt="">').attr("src", baseUrl + "/img/logo/" + encodeURIComponent(tpl.icon));
-                tplImg.on("error", function () { $(this).replaceWith($('<span></span>').text((tpl.name || "?")[0].toUpperCase())); });
+                tplImg.on("error", function () {
+                    $(this).parent().css("background", brandColor);
+                    $(this).replaceWith($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
+                });
                 iconDiv.append(tplImg);
             } else {
+                iconDiv.css("background", brandColor);
                 iconDiv.append($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
             }