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 <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Sonnet 5 committed 2026-09-03 20:13:18 +02:00
1 parent 412d033d8d
commit 28ae0a2723
1 file changed
+23 -1
@@ -18,6 +18,7 @@ import {
import { fetchPublicBatch } from "@/lib/public-batch/api"; import { fetchPublicBatch } from "@/lib/public-batch/api";
import { HoneycombPattern } from "@/components/honeycomb-pattern"; import { HoneycombPattern } from "@/components/honeycomb-pattern";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";
function formatDate(iso: string): string { function formatDate(iso: string): string {
return new Date(iso).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" }); 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, 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 { interface InfoRowProps {
icon: LucideIcon; icon: LucideIcon;
label: string; label: string;
@@ -181,7 +196,13 @@ export default function PublicBatchPage() {
</div> </div>
{socialLinks.length > 0 ? ( {socialLinks.length > 0 ? (
<div className="flex flex-wrap gap-2 border-t border-border pt-4"> <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) => { {socialLinks.map((link) => {
const Icon = SOCIAL_LINK_ICONS[link.label] ?? Globe; const Icon = SOCIAL_LINK_ICONS[link.label] ?? Globe;
return ( return (
@@ -198,6 +219,7 @@ export default function PublicBatchPage() {
); );
})} })}
</div> </div>
</div>
) : null} ) : null}
</> </>
) : null} ) : null}