Remove grid mode

.build.yml

@@ -1,6 +0,0 @@
-image: alpine/edge
-tasks:
-  - say-hello: |
-      echo hello
-  - say-world: |
-      echo world

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-auto bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
+      class="absolute z-10 w-40 bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
       phx-click-away={JS.hide()}
       hidden
     >

lib/wish_web/live/home_live/index.html.heex

@@ -15,13 +15,12 @@
 <div class="flex flex-col mt-4 space-y-4">
   <div
     :for={item <- @items}
-    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"
+    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"
     phx-click={JS.navigate(~p"/details/#{item}")}
   >
-    <div class="relative col-span-4 flex flex-col justify-center max-h-full h-full bg-white border border-black">
+    <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 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">
@@ -29,10 +28,16 @@
         </div>
       <% end %>
     </div>
-    <div class="col-span-7 flex flex-col">
-      <div class="text-lg font-display">
+    <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-3">
         <div class="text-sm opacity-60">
@@ -64,14 +69,4 @@
       </span>
     </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>
-    </div>
-  </div>
 </div>