From 02521f9c6dacf989e8d9a9aa33561945563e08e9 Mon Sep 17 00:00:00 2001
From: Schuwi <schuwi4@gmail.com>
Date: Sun, 14 Sep 2025 20:18:00 +0200
Subject: [PATCH] feat(elixir): improve display of component loc&cnt

---
 .../live/components_live.ex                   | 61 +++++++++++--------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/lib/components_elixir_web/live/components_live.ex b/lib/components_elixir_web/live/components_live.ex
index 7f9d6b7..4c1148f 100644
--- a/lib/components_elixir_web/live/components_live.ex
+++ b/lib/components_elixir_web/live/components_live.ex
@@ -681,8 +681,9 @@ defmodule ComponentsElixirWeb.ComponentsLive do
                   </div>
 
                   <div class="flex-1 min-w-0">
-                    <div class="flex items-center justify-between">
-                      <div class="flex items-center">
+                    <!-- Top row: Name and Category -->
+                    <div class="flex items-start justify-between">
+                      <div class="flex items-center min-w-0 flex-1">
                         <p class="text-sm font-medium text-indigo-600 truncate">
                           <%= if component.datasheet_url do %>
                             <a
@@ -700,36 +701,46 @@ defmodule ComponentsElixirWeb.ComponentsLive do
                           <span class="ml-2 text-blue-500" title="Datasheet available">📄</span>
                         <% end %>
                       </div>
-                      <div class="ml-2 flex-shrink-0 flex">
-                        <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                      <div class="ml-4 flex-shrink-0">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                           {component.category.name}
-                        </p>
+                        </span>
                       </div>
                     </div>
-                    <div class="mt-2 flex justify-between">
-                      <div class="sm:flex">
-                        <p class="flex items-center text-sm text-gray-500">
-                          <%= if component.description do %>
-                            {component.description}
-                          <% end %>
+
+                    <!-- Middle row: Description -->
+                    <%= if component.description do %>
+                      <div class="mt-1">
+                        <p class="text-sm text-gray-500 line-clamp-2">
+                          {component.description}
                         </p>
                       </div>
-                      <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                        <%= if component.storage_location do %>
-                          <p class="mr-6">
-                            <span class="font-medium">Location:</span> {storage_location_display_name(component.storage_location)}
-                          </p>
-                        <% end %>
-                        <p class="mr-6">
-                          <span class="font-medium">Count:</span> {component.count}
-                        </p>
-                        <%= if @sort_criteria == "all" or @sort_criteria == "id" do %>
-                          <p class="mr-6">
-                            <span class="font-medium">ID:</span> {component.id}
-                          </p>
-                        <% end %>
+                    <% end %>
+
+                    <!-- Bottom row: Metadata -->
+                    <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-1 text-sm text-gray-500">
+                      <%= if component.storage_location do %>
+                        <div class="flex items-center min-w-0">
+                          <.icon name="hero-map-pin" class="w-4 h-4 mr-1 text-gray-400 flex-shrink-0" />
+                          <span class="font-medium">Location:</span>
+                          <span class="ml-1 truncate">{storage_location_display_name(component.storage_location)}</span>
+                        </div>
+                      <% end %>
+                      <div class="flex items-center">
+                        <.icon name="hero-cube" class="w-4 h-4 mr-1 text-gray-400" />
+                        <span class="font-medium">Count:</span>
+                        <span class="ml-1">{component.count}</span>
                       </div>
+                      <%= if @sort_criteria == "all" or @sort_criteria == "id" do %>
+                        <div class="flex items-center">
+                          <.icon name="hero-hashtag" class="w-4 h-4 mr-1 text-gray-400" />
+                          <span class="font-medium">ID:</span>
+                          <span class="ml-1">{component.id}</span>
+                        </div>
+                      <% end %>
                     </div>
+
+                    <!-- Keywords row -->
                     <%= if component.keywords do %>
                       <div class="mt-2">
                         <p class="text-xs text-gray-400">