🐛 Fix sponsor display issue by hiding element on image error (#14097)

docs/en/docs/css/custom.css

@@ -124,11 +124,6 @@ a.announce-link:hover {
   border-radius: 20px;
 }
 
-/* Hide .sponsor-badge when .sponsor-image is display none */
-.announce-wrapper a:has(.sponsor-image[style*="display: none"]) .sponsor-badge {
-  display: none;
-}
-
 .announce-wrapper>div {
   min-height: 40px;
   display: flex;

docs/en/docs/js/custom.js

@@ -135,10 +135,28 @@ async function showRandomAnnouncement(groupId, timeInterval) {
     }
 }
 
+function hideSponsorOnImageError() {
+    const sponsorImages = document.querySelectorAll('.sponsor-image');
+    const announceRight = document.getElementById('announce-right');
+
+    function hideAnnounceRight() {
+        if (announceRight) {
+            announceRight.style.display = 'none';
+        }
+    }
+
+    sponsorImages.forEach(function(img) {
+        img.addEventListener('error', function() {
+            hideAnnounceRight();
+        });
+    });
+}
+
 async function main() {
     setupTermynal();
     showRandomAnnouncement('announce-left', 5000)
     showRandomAnnouncement('announce-right', 10000)
+    hideSponsorOnImageError();
 }
 document$.subscribe(() => {
     main()