From 28ae0a27239be96cc115d9208c18837c0725f971 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Thu, 3 Sep 2026 20:13:18 +0200
Subject: [PATCH] fix: lay out herkunft social links in a uniform count-aware
 grid

2 links center side-by-side, 3 sit in one row, and 4 form a centered
2x2 block - previously flex-wrap could leave an uneven number stranded
awkwardly on its own line.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/herkunft/[lot]/page.tsx           | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/ApiCore-Frontend/src/app/herkunft/[lot]/page.tsx b/ApiCore-Frontend/src/app/herkunft/[lot]/page.tsx
index 0e50836..b674b91 100644
--- a/ApiCore-Frontend/src/app/herkunft/[lot]/page.tsx
+++ b/ApiCore-Frontend/src/app/herkunft/[lot]/page.tsx
@@ -18,6 +18,7 @@ import {
 import { fetchPublicBatch } from "@/lib/public-batch/api";
 import { HoneycombPattern } from "@/components/honeycomb-pattern";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 
 function formatDate(iso: string): string {
   return new Date(iso).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
@@ -37,6 +38,20 @@ const SOCIAL_LINK_ICONS: Record<string, LucideIcon> = {
   Webseite: Globe,
 };
 
+// One row for 1-3 links, a centered 2x2 block for exactly 4 - never left to
+// flex-wrap, which would break an uneven number onto a lopsided next line.
+// Written as literal classnames (not a template string) so Tailwind's JIT
+// scanner can find them.
+const SOCIAL_LINK_GRID_COLS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+};
+
+function socialLinkGridCols(count: number): string {
+  return SOCIAL_LINK_GRID_COLS[count] ?? "grid-cols-2";
+}
+
 interface InfoRowProps {
   icon: LucideIcon;
   label: string;
@@ -181,22 +196,29 @@ export default function PublicBatchPage() {
               </div>
 
               {socialLinks.length > 0 ? (
-                <div className="flex flex-wrap gap-2 border-t border-border pt-4">
-                  {socialLinks.map((link) => {
-                    const Icon = SOCIAL_LINK_ICONS[link.label] ?? Globe;
-                    return (
-                      <a
-                        key={link.label}
-                        href={link.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1.5 text-sm font-medium text-primary transition-colors hover:bg-primary/20"
-                      >
-                        <Icon className="size-4" />
-                        {link.label}
-                      </a>
-                    );
-                  })}
+                <div className="border-t border-border pt-4">
+                  <div
+                    className={cn(
+                      "mx-auto grid w-fit justify-items-center gap-2",
+                      socialLinkGridCols(socialLinks.length),
+                    )}
+                  >
+                    {socialLinks.map((link) => {
+                      const Icon = SOCIAL_LINK_ICONS[link.label] ?? Globe;
+                      return (
+                        <a
+                          key={link.label}
+                          href={link.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1.5 text-sm font-medium text-primary transition-colors hover:bg-primary/20"
+                        >
+                          <Icon className="size-4" />
+                          {link.label}
+                        </a>
+                      );
+                    })}
+                  </div>
                 </div>
               ) : null}
             </>