From ac111b8877dcd35088c690487988b684d33764a2 Mon Sep 17 00:00:00 2001
From: Daniel Patterson <me@danielpatterson.dev>
Date: Fri, 5 Jan 2024 19:56:02 +0000
Subject: [PATCH] Adjustments

---
 lib/wish_web/live/home_live/index.ex        |  4 +-
 lib/wish_web/live/home_live/index.html.heex | 81 +++++++++++----------
 2 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/lib/wish_web/live/home_live/index.ex b/lib/wish_web/live/home_live/index.ex
index 0a9072d..51733c8 100644
--- a/lib/wish_web/live/home_live/index.ex
+++ b/lib/wish_web/live/home_live/index.ex
@@ -5,7 +5,7 @@ defmodule WishWeb.HomeLive.Index do
   use Phoenix.Component
 
   @impl true
-  def mount(_params, session, socket) do
+  def mount(_params, _session, socket) do
     items =
       if socket.assigns.current_user do
         Wishlist.list_visible_items()
@@ -51,7 +51,7 @@ defmodule WishWeb.HomeLive.Index do
     ~H"""
     <div
       id={"dropdown-#{@item.id}"}
-      class="absolute z-10 w-40 bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
+      class="absolute z-10 w-auto bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
       phx-click-away={JS.hide()}
       hidden
     >
diff --git a/lib/wish_web/live/home_live/index.html.heex b/lib/wish_web/live/home_live/index.html.heex
index 70240a3..988ec94 100644
--- a/lib/wish_web/live/home_live/index.html.heex
+++ b/lib/wish_web/live/home_live/index.html.heex
@@ -15,12 +15,13 @@
 <div class="flex flex-col mt-4 space-y-4">
   <div
     :for={item <- @items}
-    class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
-            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
-            cursor-pointer"
+    class="grid grid-cols-12 gap-3 p-3 bg-purple-200
+      hover:bg-purple-300 active:bg-purple-400 border-2 border-black
+      hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5
+      transition cursor-pointer"
     phx-click={JS.navigate(~p"/details/#{item}")}
   >
-    <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
+    <div class="relative col-span-4 flex flex-col justify-center max-h-full h-full bg-white border border-black">
       <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
       <%= if item.received && !@current_user do %>
         <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
@@ -28,45 +29,49 @@
         </div>
       <% end %>
     </div>
-    <div class="col-span-3 text-lg font-display">
-      <%= item.title %>
-    </div>
-    <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-      <.icon
-        name="hero-ellipsis-vertical"
-        class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
-      />
-      <.dropdown item={item} />
-    </div>
-    <%= if item.price do %>
+    <div class="col-span-7 flex flex-col">
+      <div class="text-lg font-display">
+        <%= item.title %>
+      </div>
+      <%= if item.price do %>
+        <div class="col-span-3">
+          <div class="text-sm opacity-60">
+            Price:
+          </div>
+          <div class="text-sm">
+            ~£<%= item.price %>
+          </div>
+        </div>
+      <% end %>
+      <%= if item.description do %>
+        <div class="col-span-3 w-full">
+          <div class="text-sm opacity-60">
+            Description:
+          </div>
+          <div>
+            <%= item.description %>
+          </div>
+        </div>
+      <% end %>
       <div class="col-span-3">
         <div class="text-sm opacity-60">
-          Price:
-        </div>
-        <div class="text-sm">
-          ~£<%= item.price %>
+          Priority:
         </div>
+        <span>
+          <%= for _ <- 1..item.desire do %>
+            <.icon name="hero-star" class="bg-red-500 text-red-500" />
+          <% end %>
+        </span>
       </div>
-    <% end %>
-    <%= if item.description do %>
-      <div class="col-span-3 w-full">
-        <div class="text-sm opacity-60">
-          Description:
-        </div>
-        <div>
-          <%= item.description %>
-        </div>
+    </div>
+    <div class="col-span-1">
+      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative float-right mt-1">
+        <.icon
+          name="hero-ellipsis-vertical"
+          class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
+        />
+        <.dropdown item={item} />
       </div>
-    <% end %>
-    <div class="col-span-3">
-      <div class="text-sm opacity-60">
-        Priority:
-      </div>
-      <span>
-        <%= for _ <- 1..item.desire do %>
-          <.icon name="hero-star" class="bg-red-500 text-red-500" />
-        <% end %>
-      </span>
     </div>
   </div>
 </div>