From fd7a53b9543e7dd40ba2e36dadebb826ff47311d Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Thu, 25 Jun 2026 09:50:43 +0200
Subject: [PATCH] fix: resolve dialog scrolling overlap by transition to flex
 layout and native overflow-y-auto

---
 shop/components/admin/create-product-dialog.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/shop/components/admin/create-product-dialog.tsx b/shop/components/admin/create-product-dialog.tsx
index f08a87d..78a99c0 100644
--- a/shop/components/admin/create-product-dialog.tsx
+++ b/shop/components/admin/create-product-dialog.tsx
@@ -135,9 +135,8 @@ export function CreateProductDialog({ children, categories, product }: { childre
         </DialogHeader>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex flex-col">
-            <ScrollArea className="pr-4" style={{ maxHeight: 'calc(90vh - 220px)' }}>
-              <div className="space-y-6 py-4">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 overflow-hidden flex-1 min-h-0">
+            <div className="flex-1 overflow-y-auto pr-4 space-y-6 py-4 min-h-0">
                 <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={form.control}
@@ -472,8 +471,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                     </div>
                   )}
                 </div>
-              </div>
-            </ScrollArea>
+            </div>
 
             <DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10">
               <Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">Abbrechen</Button>