From b180a0982bd987cd0b90195b2cb58c64805f7597 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <rvzelst7@gmail.com>
Date: Sat, 17 May 2025 19:50:18 +0200
Subject: [PATCH] fix(icon-info): layout shift

---
 .../components/icons/view_grid.blade.php      | 64 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/resources/views/components/icons/view_grid.blade.php b/resources/views/components/icons/view_grid.blade.php
index 15ababd..44e9da8 100644
--- a/resources/views/components/icons/view_grid.blade.php
+++ b/resources/views/components/icons/view_grid.blade.php
@@ -12,7 +12,6 @@
         Released in {{ $icon->release_year }}
     </h2>
 
-    <x-ads.common />
 
     <div class="container mx-auto mt-8">
         <div class="relative p-6 overflow-hidden border shadow-md rounded-2xl bg-stone-800/40 border-neutral-300/5">
@@ -140,6 +139,36 @@
             </div>
         </div>
 
+        <div class="ad-slot-container mx-auto my-5 w-full max-w-[970px] min-h-[250px]">
+            <div class="ad-slot-wrapper"
+                style="
+                width: 100%;
+                max-width: 970px; /* Matches AdSense typical leaderboard size */
+                min-height: 250px; /* Matches AdSense typical medium rectangle or leaderboard */
+                margin: 0 auto; /* Centered */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                overflow: hidden;
+            ">
+                <x-ads.common />
+            </div>
+
+            <div id="donation-fallback"
+                class="hidden w-full max-w-[970px] min-h-[250px] p-6 mx-auto border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl text-center flex flex-col justify-center items-center">
+                <p class="mb-4 text-lg text-neutral-100">
+                    We appreciate you using Heimerdinger.lol!
+                </p>
+                <p class="mb-6 text-neutral-200">
+                    Your support helps us keep the site running. Please consider donating.
+                </p>
+                <a href="/donate"
+                    class="inline-flex items-center px-6 py-3 text-lg font-bold text-white transition bg-orange-500 rounded-lg bg-opacity-80 hover:bg-opacity-100">
+                    Support Us
+                </a>
+            </div>
+        </div>
+
         <div class="grid grid-cols-1 gap-6 mt-8 md:grid-cols-2">
             <div class="p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
                 <h3 class="mb-4 text-xl font-bold text-orange-400">
@@ -353,4 +382,37 @@
     echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
     @endphp
     </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const adWrapper = document.querySelector('.ad-slot-wrapper');
+            const fallbackContainer = document.getElementById('donation-fallback');
+
+            setTimeout(function() {
+                const adElement = adWrapper.querySelector('ins.adsbygoogle');
+                let adIsVisible = false;
+
+                if (adElement) {
+                    // check if ad is marked as unfilled
+                    const adStatus = adElement.getAttribute('data-ad-status');
+                    if (adStatus === 'unfilled') {
+                        adIsVisible = false;
+                    } else {
+                        const adRect = adElement.getBoundingClientRect();
+                        if (adRect.width > 1 && adRect.height > 1 && getComputedStyle(adElement).display !==
+                            'none') {
+                            adIsVisible = true;
+                        }
+                    }
+                }
+
+                if (!adIsVisible) {
+                    if (adWrapper) adWrapper.style.display = 'none';
+                    if (fallbackContainer) fallbackContainer.classList.remove('hidden');
+                } else {
+                    if (adWrapper) adWrapper.style.display = 'flex';
+                    if (fallbackContainer) fallbackContainer.classList.add('hidden');
+                }
+            }, 2575);
+        });
+    </script>
 @endpush