From 88489869538ff595b20efe95d06c5d0a2949c1b5 Mon Sep 17 00:00:00 2001
From: Schuwi <schuwi4@gmail.com>
Date: Wed, 17 Sep 2025 17:31:07 +0200
Subject: [PATCH] fix(elixir): component list image size

---
 lib/components_elixir_web/live/components_live.ex | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/components_elixir_web/live/components_live.ex b/lib/components_elixir_web/live/components_live.ex
index 2ce8949..b230e1f 100644
--- a/lib/components_elixir_web/live/components_live.ex
+++ b/lib/components_elixir_web/live/components_live.ex
@@ -675,17 +675,17 @@ defmodule ComponentsElixirWeb.ComponentsLive do
         <div class="bg-base-100 shadow overflow-hidden sm:rounded-md">
           <ul class="divide-y divide-base-300" id="components-list" phx-update="replace">
             <%= for component <- @components do %>
-              <li id={"component-#{component.id}"} class="px-6 py-4 hover:bg-base-200">
-                <div class="flex items-center justify-between">
+              <li id={"component-#{component.id}"} class="px-6 py-6 hover:bg-base-200 min-h-[6rem]">
+                <div class="flex items-start justify-between min-h-[5rem]">
                   <!-- Component Image -->
-                  <div class="flex-shrink-0 mr-4">
+                  <div class="flex-shrink-0 mr-6 h-20 w-20 grid place-items-center">
                     <%= if component.image_filename do %>
-                      <button phx-click="show_image" phx-value-url={"/uploads/images/#{component.image_filename}"} class="hover:opacity-75 transition-opacity">
-                        <img src={"/uploads/images/#{component.image_filename}"} alt={component.name} class="h-12 w-12 rounded-lg object-cover cursor-pointer" />
+                      <button phx-click="show_image" phx-value-url={"/user_generated/uploads/images/#{component.image_filename}"} class="hover:opacity-75 transition-opacity block">
+                        <img src={"/user_generated/uploads/images/#{component.image_filename}"} alt={component.name} class="max-h-20 max-w-20 rounded-md object-contain cursor-pointer block" />
                       </button>
                     <% else %>
-                      <div class="h-12 w-12 rounded-lg bg-base-200 flex items-center justify-center">
-                        <.icon name="hero-cube-transparent" class="h-6 w-6 text-base-content/50" />
+                      <div class="h-20 w-20 rounded-md bg-base-200 flex items-center justify-center">
+                        <.icon name="hero-cube-transparent" class="h-10 w-10 text-base-content/50" />
                       </div>
                     <% end %>
                   </div>