new desigh test2 #deploy

src/features/event/components/EventFormInline.tsx

@@ -522,6 +522,32 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
     );
   };
 
+  const MobileTabButton = ({
+    tab,
+    label,
+    Icon,
+  }: {
+    tab: 'stammdaten' | 'promotion' | 'artists';
+    label: string;
+    Icon: React.ComponentType<{ className?: string }>;
+  }) => {
+    const isActive = activeTab === tab;
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className={`flex-1 h-10 justify-center gap-2 rounded-xl transition-colors ${
+          isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-primary/5 hover:text-foreground'
+        }`}
+        onClick={() => setActiveTab(tab)}
+      >
+        <Icon className="h-4 w-4" />
+        <span className="text-sm">{label}</span>
+      </Button>
+    );
+  };
+
   return (
     <div className="rounded-lg border p-4">
       <form onSubmit={handleSubmit} className="relative">
@@ -537,7 +563,18 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
           {error && <div className="text-sm text-destructive pt-1">{error}</div>}
         </div>
 
-        <div className="flex gap-4 pt-4">
+        {isMobile && (
+          <div className="sticky top-[52px] z-20 -mx-4 px-4 py-2 border-b bg-background">
+            <div className="flex gap-2">
+              <MobileTabButton tab="stammdaten" label="Event" Icon={CalendarDays} />
+              <MobileTabButton tab="promotion" label="Promotion" Icon={Megaphone} />
+              <MobileTabButton tab="artists" label="Künstler" Icon={Users} />
+            </div>
+          </div>
+        )}
+
+        <div className={isMobile ? 'pt-4' : 'flex gap-4 pt-4'}>
+          {!isMobile && (
             <aside className={`sticky top-20 self-start shrink-0 ${sidebarWidthClass} transition-[width] duration-200`}>
               <div className="rounded-2xl border bg-background p-2 shadow-sm">
                 {navExpanded && <div className="text-xs text-muted-foreground px-2 pb-2">Menü</div>}
@@ -549,8 +586,9 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
                 </div>
               </div>
             </aside>
+          )}
 
-          <div className="flex-1 min-w-0">
+          <div className={isMobile ? '' : 'flex-1 min-w-0'}>
             {activeTab === 'stammdaten' && (
               <EventStammdatenSection
                 form={form}