Improve ad display logic and integrate ads into more pages

Refactor AdSenseAd component to use ResizeObserver for more reliable initialization and add the component to FolxStadlPage, GeschichteLiedPage, and GipfelstammtischPage.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/fmm3fpm

.replit

@@ -24,7 +24,7 @@ localPort = 35637
 externalPort = 3000
 
 [[ports]]
-localPort = 44083
+localPort = 45277
 externalPort = 3002
 
 [env]

client/src/components/adsense-ad.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 interface AdSenseAdProps {
   adSlot: string;
@@ -16,18 +16,51 @@ export default function AdSenseAd({
   className = '' 
 }: AdSenseAdProps) {
   const adRef = useRef<HTMLDivElement>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
-    try {
-      // Ensure adsbygoogle is loaded
-      if (typeof window !== 'undefined') {
-        // @ts-ignore
-        (window.adsbygoogle = window.adsbygoogle || []).push({});
+    if (isInitialized) return;
+
+    const initializeAd = () => {
+      const insElement = adRef.current?.querySelector('ins');
+      if (!insElement) return;
+
+      // Check if element has width > 0
+      const clientWidth = insElement.clientWidth;
+      if (clientWidth > 0) {
+        try {
+          // @ts-ignore
+          (window.adsbygoogle = window.adsbygoogle || []).push({});
+          setIsInitialized(true);
+        } catch (error) {
+          console.error('AdSense initialization error:', error);
+        }
       }
-    } catch (error) {
-      console.error('AdSense initialization error:', error);
+    };
+
+    // Try immediate initialization after short delay
+    const timer = setTimeout(initializeAd, 100);
+
+    // Use ResizeObserver as fallback
+    if (typeof window !== 'undefined' && window.ResizeObserver) {
+      const observer = new ResizeObserver(() => {
+        if (!isInitialized) {
+          initializeAd();
+        }
+      });
+
+      if (adRef.current) {
+        observer.observe(adRef.current);
+      }
+
+      return () => {
+        clearTimeout(timer);
+        observer.disconnect();
+      };
     }
-  }, [adSlot]);
+
+    return () => clearTimeout(timer);
+  }, [adSlot, isInitialized]);
 
   const adStyle: React.CSSProperties = {
     display: 'block',
@@ -44,7 +77,11 @@ export default function AdSenseAd({
   }
 
   return (
-    <div className={`adsense-wrapper ${className}`} ref={adRef}>
+    <div 
+      className={`adsense-wrapper w-full ${className}`} 
+      ref={adRef}
+      style={{ width: '100%', minWidth: '320px' }}
+    >
       <ins
         className="adsbygoogle"
         style={adStyle}

client/src/pages/FolxStadlPage.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
 import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
+import AdSenseAd from '@/components/adsense-ad';
 
 export default function FolxStadlPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);

client/src/pages/GeschichteLiedPage.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
 import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
+import AdSenseAd from '@/components/adsense-ad';
 
 export default function GeschichteLiedPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);

client/src/pages/GipfelstammtischPage.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
 import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
+import AdSenseAd from '@/components/adsense-ad';
 
 export default function GipfelstammtischPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);

client/src/pages/home.tsx

@@ -210,7 +210,7 @@ export default function Home() {
 
       {/* Header Banner Ad */}
       <div className="container py-4 border-b border-white/10">
-        <div className="flex justify-center">
+        <div className="w-full flex justify-center">
           <AdSenseAd 
             adSlot="1023820241"
             adFormat="auto"
@@ -227,7 +227,7 @@ export default function Home() {
           />
           
           {/* Mid-content Rectangle Ad */}
-          <div className="flex justify-center my-8 py-4">
+          <div className="w-full flex justify-center my-8 py-4">
             <AdSenseAd 
               adSlot="6088444663"
               adFormat="auto"
@@ -238,7 +238,7 @@ export default function Home() {
 
       {/* Bottom Banner Ad */}
       <div className="container py-4 border-t border-white/10">
-        <div className="flex justify-center">
+        <div className="w-full flex justify-center">
           <AdSenseAd 
             adSlot="8519166886"
             adFormat="auto"