mobile test8

#deploy

src/features/event/components/PromotionTemplatesSection.tsx

@@ -3,6 +3,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 type Props = {
   mediaUrl: string;
@@ -28,6 +30,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
   onFileSelected,
   mediaPreview,
 }) => {
+  const isMobile = useIsMobile();
   const templates: PromotionTemplate[] = useMemo(
     () => [
       {
@@ -96,10 +99,68 @@ const PromotionTemplatesSection: React.FC<Props> = ({
     onValueChange: (next: string) => void;
     selected: PromotionTemplate | null;
   }) => {
+    const [open, setOpen] = useState(false);
+
     return (
       <div className="space-y-2">
         <Label>{label}</Label>
         <div className="grid gap-3 md:grid-cols-[1fr,280px] items-start">
+          {isMobile ? (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-between"
+                onClick={() => setOpen(true)}
+              >
+                <span className="truncate">{selected?.name || 'Template wählen'}</span>
+                <span className="text-muted-foreground">Auswählen</span>
+              </Button>
+
+              <Sheet open={open} onOpenChange={setOpen}>
+                <SheetContent side="bottom" className="p-0">
+                  <div className="p-4">
+                    <SheetHeader>
+                      <SheetTitle>{label}</SheetTitle>
+                    </SheetHeader>
+                  </div>
+                  <div className="max-h-[70vh] overflow-y-auto px-4 pb-4">
+                    <div className="space-y-2">
+                      {templates.map((tpl) => {
+                        const isActive = tpl.id === value;
+                        return (
+                          <button
+                            key={tpl.id}
+                            type="button"
+                            className={`w-full rounded-md border p-3 text-left transition-colors ${
+                              isActive ? 'bg-primary/10 border-primary/30' : 'hover:bg-muted/40'
+                            }`}
+                            onClick={() => {
+                              onValueChange(tpl.id);
+                              setOpen(false);
+                            }}
+                          >
+                            <div className="flex items-center gap-3">
+                              <div className="h-12 w-12 rounded border bg-muted/40 overflow-hidden flex items-center justify-center shrink-0">
+                                {tpl.previewUrl ? (
+                                  <img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
+                                ) : (
+                                  <div className="h-full w-full" />
+                                )}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
+                              </div>
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </SheetContent>
+              </Sheet>
+            </>
+          ) : (
             <Select value={value} onValueChange={onValueChange}>
               <SelectTrigger>
                 <SelectValue placeholder="Template wählen" />
@@ -123,6 +184,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
                 ))}
               </SelectContent>
             </Select>
+          )}
 
           <div className="rounded-md border bg-background p-3">
             <div className="text-xs text-muted-foreground">Vorschau</div>
@@ -213,7 +275,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
       </div>
 
       <div className="flex items-center justify-between gap-3 rounded-md border p-3">
-        <div className="text-sm font-medium">Templates verwalten</div>
+        {/* <div className="text-sm font-medium">Templates verwalten</div> */}
         <div className="flex items-center gap-2">
           <input
             ref={importZipInputRef}