Refactor asset uploader layout and improve UI components

Updated the layout to use a responsive grid for displaying assets and separated CardHeader for better organization. Simplified the asset input and image uploader components while improving responsiveness and styling consistency. Removed redundant code and added enhancements for a cleaner and more user-friendly UI.

frontend/src/components/event-themes/event-theme-assets-uploader.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ImageUploader } from "@/components/ui/image-uploader";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 interface AssetImage {
   key: string;
@@ -93,20 +93,30 @@ export function EventThemeAssetsUploader({
         </Button>
       </div>
 
-      <div className="space-y-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {assets.map((asset, index) => (
           <Card
             key={index}
             className="overflow-hidden hover:shadow-md transition-shadow"
           >
-            <CardContent className="grid grid-cols-1 md:grid-cols-[1fr,2fr,auto] gap-4 items-start p-4 pt-4">
-              <div>
-                <Label
-                  htmlFor={`asset-key-${index}`}
-                  className="mb-2 block text-sm font-medium text-gray-700"
+            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between">
+              {/*<Label className="text-sm font-medium text-gray-700">*/}
+              {/*  Asset Name*/}
+              {/*</Label>*/}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => handleRemoveAsset(index)}
+                className="h-8 px-2 text-destructive hover:bg-destructive/10"
+                disabled={assets.length <= 0}
               >
-                  Asset Key
-                </Label>
+                <Trash2 className="h-4 w-4" />
+                <span className="sr-only">Remove</span>
+              </Button>
+            </CardHeader>
+
+            <CardContent className="space-y-4 px-4 pt-0 pb-4">
               <Input
                 id={`asset-key-${index}`}
                 value={asset.key}
@@ -114,31 +124,18 @@ export function EventThemeAssetsUploader({
                 placeholder="E.g., 'animal1', 'balloon', etc."
                 className="focus:ring-2 focus:ring-primary/20"
               />
-              </div>
 
+              <div className="mx-auto max-w-[600px]">
                 <ImageUploader
                   id={`asset-url-${index}`}
-                label="Asset Image"
                   imageUrl={asset.url}
                   purpose="theme-asset"
                   onChange={(url) => handleUrlChange(index, url)}
                   aspectRatio="square"
-                maxWidth={400}
-                maxHeight={400}
+                  maxWidth={300}
+                  maxHeight={300}
+                  className="w-full"
                 />
-
-              <div className="flex items-end h-full pb-2">
-                <Button
-                  type="button"
-                  variant="destructive"
-                  size="icon"
-                  onClick={() => handleRemoveAsset(index)}
-                  disabled={assets.length === 1}
-                  title="Remove Asset"
-                  className="hover:bg-red-600/90 transition-colors"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
               </div>
             </CardContent>
           </Card>