Ensure ads always display a background pattern, preventing blank spaces

Remove the `hidden` attribute from ad components and the `lg:block` condition from `ArtistPatternBg` to ensure a background pattern is always visible, even when ads fail to load.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3c78d37e-f103-4480-8bdf-e7de89079bb0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/V5dWXpq
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-05 12:14:28 +00:00
parent 7203a47502
commit b69a3bdc0a
2 changed files with 11 additions and 19 deletions

View File

@ -82,48 +82,40 @@ let adSeedCounter = 1;
export function ArticleCardAd() {
const seed = useMemo(() => adSeedCounter++, []);
const [filled, setFilled] = useState(false);
return (
<div className={filled ? "" : "hidden"}>
<ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}>
<AdSense
slot="3854634730"
format="fluid"
layoutKey="-6r+cy-10+8a-3"
style={{ display: "block" }}
onAdStatus={(f) => setFilled(f)}
/>
</ArtistPatternBg>
</div>
<ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}>
<AdSense
slot="3854634730"
format="fluid"
layoutKey="-6r+cy-10+8a-3"
style={{ display: "block" }}
/>
</ArtistPatternBg>
);
}
export function InArticleAd() {
const [filled, setFilled] = useState(false);
return (
<div className={filled ? "my-8 py-4 border-y border-border/30" : "hidden"}>
<div className="my-8 py-4 border-y border-border/30">
<div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
<AdSense
slot="4154017639"
format="fluid"
layout="in-article"
style={{ display: "block", textAlign: "center" }}
onAdStatus={(f) => setFilled(f)}
/>
</div>
);
}
export function MultiplexAd() {
const [filled, setFilled] = useState(false);
return (
<div className={filled ? "bg-card rounded-md border border-card-border overflow-hidden" : "hidden"}>
<div className="bg-card rounded-md border border-card-border overflow-hidden">
<AdSense
slot="4593001335"
format="autorelaxed"
style={{ display: "block" }}
className="w-full min-h-[250px]"
onAdStatus={(f) => setFilled(f)}
/>
</div>
);

View File

@ -53,7 +53,7 @@ export default function ArtistPatternBg({ children, className = "", seed = 42 }:
return (
<div className={`relative overflow-hidden ${className}`}>
<div className="absolute inset-0 pointer-events-none select-none hidden lg:block" aria-hidden="true">
<div className="absolute inset-0 pointer-events-none select-none" aria-hidden="true">
{items.map((item, i) => (
<span
key={i}