From 4b77ed89351ed4f58103d4edeccd42b73894f7cd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 7 Mar 2026 10:34:05 +0000
Subject: [PATCH] Adjust article layout to position side ads closer to content

Modify article page layout to reduce side ad width and remove unnecessary wrapper div.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 26960b3d-c70e-43b9-a359-aab3199ecab7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/MkhYNq3
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/article.tsx | 192 +++++++++++++++++------------------
 1 file changed, 95 insertions(+), 97 deletions(-)

diff --git a/client/src/pages/article.tsx b/client/src/pages/article.tsx
index e38e388..16daa4d 100644
--- a/client/src/pages/article.tsx
+++ b/client/src/pages/article.tsx
@@ -219,115 +219,113 @@ export default function ArticlePage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <PageSideAds />
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        <div className="max-w-4xl mx-auto">
-          <Link href="/">
-            <Button variant="ghost" size="sm" className="mb-3 gap-2" data-testid="button-back">
-              <ArrowLeft className="w-4 h-4" />
-              Zurück
-            </Button>
-          </Link>
+      <PageSideAds contentHalfWidth={480} />
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <Link href="/">
+          <Button variant="ghost" size="sm" className="mb-3 gap-2" data-testid="button-back">
+            <ArrowLeft className="w-4 h-4" />
+            Zurück
+          </Button>
+        </Link>
 
-          {article.coverImage && (
-            <div className="relative overflow-hidden rounded-md mb-5 max-h-[420px]">
-              <img
-                src={article.coverImage}
-                alt={article.title}
-                className="w-full h-full object-cover"
-                style={{ maxHeight: "420px" }}
-                data-testid="img-article-cover"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
-            </div>
-          )}
+        {article.coverImage && (
+          <div className="relative overflow-hidden rounded-md mb-5 max-h-[420px]">
+            <img
+              src={article.coverImage}
+              alt={article.title}
+              className="w-full h-full object-cover"
+              style={{ maxHeight: "420px" }}
+              data-testid="img-article-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+          </div>
+        )}
 
-          <div className="mb-5">
-            <h1
-              className="text-2xl md:text-3xl font-bold text-foreground mb-3 leading-tight"
-              data-testid="text-article-title"
-            >
-              {article.title}
-            </h1>
+        <div className="mb-5">
+          <h1
+            className="text-2xl md:text-3xl font-bold text-foreground mb-3 leading-tight"
+            data-testid="text-article-title"
+          >
+            {article.title}
+          </h1>
 
-            <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-              <span className="flex items-center gap-1.5">
-                <User className="w-3.5 h-3.5" />
-                {article.author}
-              </span>
-              <span className="flex items-center gap-1.5">
-                <Calendar className="w-3.5 h-3.5" />
-                {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
-              </span>
-              <span className="flex items-center gap-1.5">
-                <Eye className="w-3.5 h-3.5" />
-                {article.views.toLocaleString()} Aufrufe
-              </span>
-            </div>
-
-            <div className="mt-3">
-              <ShareButtons
-                url={`${window.location.origin}/article/${article.slug}`}
-                title={article.title}
-                image={article.coverImage ? (article.coverImage.startsWith("http") ? article.coverImage : `${window.location.origin}${article.coverImage}`) : undefined}
-              />
-            </div>
+          <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1.5">
+              <User className="w-3.5 h-3.5" />
+              {article.author}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <Calendar className="w-3.5 h-3.5" />
+              {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <Eye className="w-3.5 h-3.5" />
+              {article.views.toLocaleString()} Aufrufe
+            </span>
           </div>
 
-          {(() => {
-            const sanitized = sanitizeContent(article.content);
-            const blocks = sanitized.split(/(?=<(?:p|h[2-4]|div)[\s>])/i).filter(Boolean);
-            const midPoint = Math.max(2, Math.floor(blocks.length / 2));
-            const firstHalf = blocks.slice(0, midPoint).join("");
-            const secondHalf = blocks.slice(midPoint).join("");
-            const proseClasses = `prose prose-base dark:prose-invert max-w-none
-              prose-headings:text-foreground prose-headings:font-semibold prose-headings:text-lg
-              prose-p:text-foreground/85 prose-p:leading-relaxed prose-p:text-[15px]
-              prose-a:text-primary prose-a:no-underline hover:prose-a:underline
-              prose-strong:text-foreground
-              prose-img:rounded-md prose-img:w-full prose-img:object-cover
-              [&_iframe]:rounded-md [&_iframe]:my-5 [&_iframe]:max-w-full
-              [&_div[style]]:flex [&_div[style]]:justify-center
-              [&_blockquote:not(.instagram-media)]:border-l-primary [&_blockquote:not(.instagram-media)]:bg-accent/50 [&_blockquote:not(.instagram-media)]:rounded-r-md [&_blockquote:not(.instagram-media)]:py-1
-              [&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto`;
-            return (
-              <div ref={(el) => {
-                if (!el) return;
-                el.querySelectorAll("a[href]").forEach((a) => {
-                  const href = a.getAttribute("href") || "";
-                  const isBunny = href.includes("mediadelivery.net") || href.includes("bunny.net") || href.includes("b-cdn.net");
-                  const isInternal = href.startsWith("/") || href.includes("folx.tv");
-                  if (!isBunny && !isInternal && href.startsWith("http")) {
-                    a.setAttribute("target", "_blank");
-                    a.setAttribute("rel", "noopener noreferrer");
-                  }
-                });
-              }}>
-                <article
-                  className={proseClasses}
-                  dangerouslySetInnerHTML={{ __html: firstHalf }}
-                  data-testid="article-content"
-                />
-                <InArticleAd />
-                <article
-                  className={proseClasses}
-                  dangerouslySetInnerHTML={{ __html: secondHalf }}
-                  data-testid="article-content-continued"
-                />
-              </div>
-            );
-          })()}
-
-          <div className="mt-6 pt-5 border-t border-border">
+          <div className="mt-3">
             <ShareButtons
               url={`${window.location.origin}/article/${article.slug}`}
               title={article.title}
               image={article.coverImage ? (article.coverImage.startsWith("http") ? article.coverImage : `${window.location.origin}${article.coverImage}`) : undefined}
             />
           </div>
-
-          <RelatedArticles currentSlug={slug || ""} />
         </div>
+
+        {(() => {
+          const sanitized = sanitizeContent(article.content);
+          const blocks = sanitized.split(/(?=<(?:p|h[2-4]|div)[\s>])/i).filter(Boolean);
+          const midPoint = Math.max(2, Math.floor(blocks.length / 2));
+          const firstHalf = blocks.slice(0, midPoint).join("");
+          const secondHalf = blocks.slice(midPoint).join("");
+          const proseClasses = `prose prose-base dark:prose-invert max-w-none
+            prose-headings:text-foreground prose-headings:font-semibold prose-headings:text-lg
+            prose-p:text-foreground/85 prose-p:leading-relaxed prose-p:text-[15px]
+            prose-a:text-primary prose-a:no-underline hover:prose-a:underline
+            prose-strong:text-foreground
+            prose-img:rounded-md prose-img:w-full prose-img:object-cover
+            [&_iframe]:rounded-md [&_iframe]:my-5 [&_iframe]:max-w-full
+            [&_div[style]]:flex [&_div[style]]:justify-center
+            [&_blockquote:not(.instagram-media)]:border-l-primary [&_blockquote:not(.instagram-media)]:bg-accent/50 [&_blockquote:not(.instagram-media)]:rounded-r-md [&_blockquote:not(.instagram-media)]:py-1
+            [&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto`;
+          return (
+            <div ref={(el) => {
+              if (!el) return;
+              el.querySelectorAll("a[href]").forEach((a) => {
+                const href = a.getAttribute("href") || "";
+                const isBunny = href.includes("mediadelivery.net") || href.includes("bunny.net") || href.includes("b-cdn.net");
+                const isInternal = href.startsWith("/") || href.includes("folx.tv");
+                if (!isBunny && !isInternal && href.startsWith("http")) {
+                  a.setAttribute("target", "_blank");
+                  a.setAttribute("rel", "noopener noreferrer");
+                }
+              });
+            }}>
+              <article
+                className={proseClasses}
+                dangerouslySetInnerHTML={{ __html: firstHalf }}
+                data-testid="article-content"
+              />
+              <InArticleAd />
+              <article
+                className={proseClasses}
+                dangerouslySetInnerHTML={{ __html: secondHalf }}
+                data-testid="article-content-continued"
+              />
+            </div>
+          );
+        })()}
+
+        <div className="mt-6 pt-5 border-t border-border">
+          <ShareButtons
+            url={`${window.location.origin}/article/${article.slug}`}
+            title={article.title}
+            image={article.coverImage ? (article.coverImage.startsWith("http") ? article.coverImage : `${window.location.origin}${article.coverImage}`) : undefined}
+          />
+        </div>
+
+        <RelatedArticles currentSlug={slug || ""} />
       </main>
       <Footer />
     </div>