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,52 +93,49 @@ 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"
-                >
-                  Asset Key
-                </Label>
-                <Input
-                  id={`asset-key-${index}`}
-                  value={asset.key}
-                  onChange={(e) => handleKeyChange(index, e.target.value)}
-                  placeholder="E.g., 'animal1', 'balloon', etc."
-                  className="focus:ring-2 focus:ring-primary/20"
-                />
-              </div>
+            <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}
+              >
+                <Trash2 className="h-4 w-4" />
+                <span className="sr-only">Remove</span>
+              </Button>
+            </CardHeader>
 
-              <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}
+            <CardContent className="space-y-4 px-4 pt-0 pb-4">
+              <Input
+                id={`asset-key-${index}`}
+                value={asset.key}
+                onChange={(e) => handleKeyChange(index, e.target.value)}
+                placeholder="E.g., 'animal1', 'balloon', etc."
+                className="focus:ring-2 focus:ring-primary/20"
               />
 
-              <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 className="mx-auto max-w-[600px]">
+                <ImageUploader
+                  id={`asset-url-${index}`}
+                  imageUrl={asset.url}
+                  purpose="theme-asset"
+                  onChange={(url) => handleUrlChange(index, url)}
+                  aspectRatio="square"
+                  maxWidth={300}
+                  maxHeight={300}
+                  className="w-full"
+                />
               </div>
             </CardContent>
           </Card>