sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ad display to prevent overlap with page footer

Browse Source 
Modify AdSense component to remove IntersectionObserver logic and apply isolation-isolate to footer to ensure ads do not overlap.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5bb0345a-5f8a-44c4-bba7-d5949ad9defa
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
2026-03-06 15:16:23 +00:00
parent 9db1b3c6a2
commit 3af8f8852f
3 changed files with 3 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/adsense.tsx
+2 -23
View File
@@ -124,26 +124,9 @@ export function MultiplexAd() {
export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: number }) {
const gap = 10;
const offset = contentHalfWidth + gap;
const [footerVisible, setFooterVisible] = useState(false);
useEffect(() => {
const footer = document.querySelector("footer");
if (!footer) return;
const observer = new IntersectionObserver(
([entry]) => setFooterVisible(entry.isIntersecting),
{ threshold: 0 }
);
observer.observe(footer);
return () => observer.disconnect();
}, []);
return (
<div className="relative">
<div
className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
style={{ left: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
data-testid="ad-left-sidebar"
>
<div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ left: `calc(50% - ${offset}px - 160px)` }} data-testid="ad-left-sidebar">
<div className="pointer-events-auto">
<AdSense
slot="2398082838"
@@ -152,11 +135,7 @@ export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: num
/>
</div>
</div>
<div
className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
style={{ right: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
data-testid="ad-right-sidebar"
>
<div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ right: `calc(50% - ${offset}px - 160px)` }} data-testid="ad-right-sidebar">
<div className="pointer-events-auto">
<AdSense
slot="2398082838"