Update components/GoogleAd.tsx

components/GoogleAd.tsx

@@ -1,16 +1,34 @@
-import React, { useEffect } from 'react';
+
+import React, { useEffect, useRef } from 'react';
 
 interface GoogleAdProps {
   slotId?: string;
   className?: string;
+  format?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
 }
 
-const GoogleAd: React.FC<GoogleAdProps> = ({ slotId, className }) => {
+const GoogleAd: React.FC<GoogleAdProps> = ({ 
+  slotId, 
+  className,
+  format = 'auto' 
+}) => {
+  const adRef = useRef<HTMLModElement>(null);
+  const hasRequestedAd = useRef(false);
+
   useEffect(() => {
+    // Prevent double execution in React Strict Mode
+    if (hasRequestedAd.current) return;
+
     try {
       // @ts-ignore
       const adsbygoogle = window.adsbygoogle || [];
-      adsbygoogle.push({});
+      
+      // Safety Check: Only push ad if the element is actually visible in the DOM
+      // "No slot size for availableWidth=0" error fix.
+      if (adRef.current && adRef.current.offsetWidth > 0 && adRef.current.innerHTML === "") {
+          adsbygoogle.push({});
+          hasRequestedAd.current = true;
+      }
     } catch (e) {
       console.error("AdSense error:", e);
     }
@@ -23,13 +41,16 @@ const GoogleAd: React.FC<GoogleAdProps> = ({ slotId, className }) => {
             Currently using a placeholder.
         */}
         <ins className="adsbygoogle"
+             ref={adRef}
              style={{ display: 'block', width: '100%' }}
              data-ad-client="ca-pub-8848704570658587"
              data-ad-slot={slotId || "1234567890"} 
-             data-ad-format="auto"
-             data-full-width-responsive="true"></ins>
+             data-ad-format={format}
+             // CRITICAL: Set to false to prevent the ad from expanding beyond the sidebar/panel width 
+             // and overlaying the entire application, which blocks clicks on desktop.
+             data-full-width-responsive="false"></ins>
     </div>
   );
 };
 
-export default GoogleAd;
+export default GoogleAd;