From 077e1c5836e54b63c893bf3062d00c450ffc5ec3 Mon Sep 17 00:00:00 2001
From: moh <mf@planetmutlu.com>
Date: Sun, 20 Sep 2026 17:30:44 +0200
Subject: [PATCH] STYLED - Flatten media picker and use a two-column media
 layout

Fix the deeply nested cards in the project form (screenshot: Cover Media >
Cover > preview card, with duplicate labels):

- MediaFieldPicker no longer wraps itself in AppCards. It renders one flat
  bordered box laid out in two columns (preview | controls), dropping two
  nested card layers and the duplicate title.
- Cover Media and Assets now sit side by side in a two-column grid instead
  of stacked with a separator.

All 375 tests pass; tsc and eslint clean.
---
 components/admin/media-field-picker.tsx     | 68 ++++++++++-----------
 components/admin/portfolio-project-form.tsx | 11 ++--
 2 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/components/admin/media-field-picker.tsx b/components/admin/media-field-picker.tsx
index 2c67ea3..3f8dc13 100644
--- a/components/admin/media-field-picker.tsx
+++ b/components/admin/media-field-picker.tsx
@@ -6,7 +6,6 @@ import type { MediaKind } from "@/lib/db/enums";
 import { Check, ImageIcon, Search, Trash2 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -17,7 +16,6 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import type { MediaOption } from "@/lib/media";
 import { cn } from "@/lib/utils";
 
@@ -89,29 +87,45 @@ export function MediaFieldPicker({
   }, [serializedValue]);
 
   return (
-    <AppCard level={2} padding="sm" contentClassName="space-y-4">
+    <div className="space-y-2">
       <input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
 
-      <div className="flex items-start justify-between gap-4">
-        <div className="space-y-1">
-          <Label className="text-sm font-semibold text-foreground">{title}</Label>
-          <p className="text-sm text-muted-foreground">
-            Media must be selected from the
-            {" "}
-            Media Library
-            .
-          </p>
+      <div className="flex flex-col gap-3 rounded-nested border border-border/70 bg-background p-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex min-w-0 items-center gap-3">
+          {selectedOption ? (
+            <>
+              <img
+                src={selectedOption.url}
+                alt={selectedOption.label}
+                className="h-14 w-14 shrink-0 rounded-nested border border-border/60 object-cover"
+              />
+              <div className="min-w-0">
+                <p className="truncate text-sm font-medium text-foreground">{selectedOption.label}</p>
+                <p className="truncate text-xs text-muted-foreground">{selectedOption.source}</p>
+              </div>
+            </>
+          ) : (
+            <div className="flex items-center gap-3 text-muted-foreground">
+              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-nested border border-dashed border-border/70">
+                <ImageIcon className="h-5 w-5" />
+              </div>
+              <span className="text-sm">Kein Medium ausgewählt</span>
+            </div>
+          )}
         </div>
-        <div className="flex gap-2">
-          <Button type="button" variant="outline" onClick={() => setOpen(true)}>
+
+        <div className="flex shrink-0 gap-2">
+          <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
             <ImageIcon className="h-4 w-4" />
-            Select from Media
+            {selectedOption ? "Ändern" : "Auswählen"}
           </Button>
           {canClear ? (
             <Button
               type="button"
               variant="ghost"
+              size="sm"
               className="text-destructive hover:text-destructive"
+              title={clearLabel}
               onClick={() =>
                 onChange({
                   ...value,
@@ -124,32 +138,12 @@ export function MediaFieldPicker({
               }
             >
               <Trash2 className="h-4 w-4" />
-              {clearLabel}
+              <span className="sr-only">{clearLabel}</span>
             </Button>
           ) : null}
         </div>
       </div>
 
-      <AppCard layer="single" padding="sm" className="rounded-nested border-border/70">
-        {selectedOption ? (
-          <div className="flex items-center gap-4">
-            <img
-              src={selectedOption.url}
-              alt={selectedOption.label}
-              className="h-16 w-16 rounded-nested object-cover"
-            />
-            <div className="min-w-0">
-              <p className="truncate text-sm font-medium text-foreground">{selectedOption.label}</p>
-              <p className="truncate text-xs text-muted-foreground">{selectedOption.source}</p>
-            </div>
-          </div>
-        ) : (
-          <div className="rounded-nested border border-dashed border-border/70 px-4 py-6 text-sm text-muted-foreground">
-            No media selected.
-          </div>
-        )}
-      </AppCard>
-
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-4xl">
           <DialogHeader>
@@ -215,6 +209,6 @@ export function MediaFieldPicker({
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </AppCard>
+    </div>
   );
 }
diff --git a/components/admin/portfolio-project-form.tsx b/components/admin/portfolio-project-form.tsx
index 98b0fd4..5218648 100644
--- a/components/admin/portfolio-project-form.tsx
+++ b/components/admin/portfolio-project-form.tsx
@@ -36,7 +36,6 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
 import {
   Select,
   SelectContent,
@@ -1072,7 +1071,8 @@ export function PortfolioProjectForm({
 
         <div>
           <AppCard level={3} padding="md">
-            <section className="space-y-5">
+            <div className="grid gap-6 lg:grid-cols-2">
+              <section className="space-y-4">
               <SectionHeader
                 title="Cover Media"
                 description="Wähle das Titelbild, das das Projekt in Listen repräsentiert."
@@ -1090,9 +1090,9 @@ export function PortfolioProjectForm({
                 clearLabel="Remove Cover"
                 emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
               />
+              </section>
 
-              <Separator />
-
+              <section className="space-y-4">
               <SectionHeader
                 title="Assets"
                 description="Optional — Galeriebilder mit lokalisiertem Alt-Text."
@@ -1221,7 +1221,8 @@ export function PortfolioProjectForm({
                   })}
                 </Accordion>
               )}
-            </section>
+              </section>
+            </div>
           </AppCard>
         </div>
       </div>