add image picker to page editor and fix thumbnail layout

Wire up image field in block settings with a modal picker that
browses the media library. Fix picker thumbnails collapsing to
14px by replacing overflow:hidden with overflow:clip on grid
items (hidden sets min-height:0 in grid context). Polish media
library mobile sheet with scrim overlay and tighter spacing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/berrypod_web/live/admin/media.ex

@@ -330,6 +330,7 @@ defmodule BerrypodWeb.Admin.Media do
         </div>
 
         <%!-- detail panel --%>
+        <div :if={@selected_image} class="media-detail-scrim" phx-click="deselect_image"></div>
         <aside :if={@selected_image} class="media-detail">
           <div class="media-detail-header">
             <h3>Image details</h3>

lib/berrypod_web/live/admin/pages/editor.ex

@@ -34,7 +34,11 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
      |> assign(:show_preview, false)
      |> assign(:preview_data, preview_data)
      |> assign(:logo_image, Media.get_logo())
-     |> assign(:header_image, Media.get_header())}
+     |> assign(:header_image, Media.get_header())
+     |> assign(:image_picker_block_id, nil)
+     |> assign(:image_picker_field_key, nil)
+     |> assign(:image_picker_images, [])
+     |> assign(:image_picker_search, "")}
   end
 
   # ── Block manipulation events ────────────────────────────────────
@@ -150,6 +154,69 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
     end
   end
 
+  # ── Image picker events ──────────────────────────────────────────
+
+  def handle_event(
+        "show_image_picker",
+        %{"block-id" => block_id, "field" => field_key},
+        socket
+      ) do
+    images = Media.list_images()
+
+    {:noreply,
+     socket
+     |> assign(:image_picker_block_id, block_id)
+     |> assign(:image_picker_field_key, field_key)
+     |> assign(:image_picker_images, images)
+     |> assign(:image_picker_search, "")}
+  end
+
+  def handle_event("hide_image_picker", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:image_picker_block_id, nil)
+     |> assign(:image_picker_field_key, nil)}
+  end
+
+  def handle_event("image_picker_search", %{"value" => value}, socket) do
+    {:noreply, assign(socket, :image_picker_search, value)}
+  end
+
+  def handle_event("pick_image", %{"image-id" => image_id}, socket) do
+    block_id = socket.assigns.image_picker_block_id
+    field_key = socket.assigns.image_picker_field_key
+
+    case BlockEditor.update_settings(socket.assigns.blocks, block_id, %{field_key => image_id}) do
+      {:ok, new_blocks} ->
+        {:noreply,
+         socket
+         |> assign(:blocks, new_blocks)
+         |> assign(:dirty, true)
+         |> assign(:image_picker_block_id, nil)
+         |> assign(:image_picker_field_key, nil)}
+
+      :noop ->
+        {:noreply, socket}
+    end
+  end
+
+  def handle_event(
+        "clear_image",
+        %{"block-id" => block_id, "field" => field_key},
+        socket
+      ) do
+    case BlockEditor.update_settings(socket.assigns.blocks, block_id, %{field_key => ""}) do
+      {:ok, new_blocks} ->
+        {:noreply,
+         socket
+         |> assign(:blocks, new_blocks)
+         |> assign(:dirty, true)}
+
+      :noop ->
+        {:noreply, socket}
+    end
+  end
+
   # ── UI events ────────────────────────────────────────────────────
 
   def handle_event("toggle_expand", %{"id" => block_id}, socket) do
@@ -323,6 +390,13 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
         allowed_blocks={@allowed_blocks}
         filter={@picker_filter}
       />
+
+      <%!-- Image picker modal --%>
+      <.image_picker
+        :if={@image_picker_block_id}
+        images={@image_picker_images}
+        search={@image_picker_search}
+      />
     </div>
     """
   end