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/components/block_editor_components.ex

@@ -233,21 +233,37 @@ defmodule BerrypodWeb.BlockEditorComponents do
               <span :if={@image.alt} class="image-field-alt">{@image.alt}</span>
             </div>
           </div>
-        <% else %>
-          <div class="image-field-empty">
-            <.icon name="hero-photo" class="size-6" />
-            <span>No image selected</span>
+          <div class="image-field-actions">
+            <button
+              type="button"
+              phx-click={"#{@event_prefix}show_image_picker"}
+              phx-value-block-id={@block_id}
+              phx-value-field={@field.key}
+              class="admin-btn admin-btn-outline admin-btn-xs"
+            >
+              Change
+            </button>
+            <button
+              type="button"
+              phx-click={"#{@event_prefix}clear_image"}
+              phx-value-block-id={@block_id}
+              phx-value-field={@field.key}
+              class="admin-btn admin-btn-ghost admin-btn-xs image-field-remove-btn"
+            >
+              Remove
+            </button>
           </div>
+        <% else %>
+          <button
+            type="button"
+            phx-click={"#{@event_prefix}show_image_picker"}
+            phx-value-block-id={@block_id}
+            phx-value-field={@field.key}
+            class="admin-btn admin-btn-outline admin-btn-sm image-field-choose-btn"
+          >
+            <.icon name="hero-photo" class="size-4" /> Choose image
+          </button>
         <% end %>
-        <input
-          type="text"
-          name={"block_settings[#{@field.key}]"}
-          id={"block-#{@block_id}-#{@field.key}"}
-          value={if(@image, do: @image.id, else: "")}
-          placeholder="Paste image ID from media library"
-          class="admin-input admin-input-sm"
-          phx-debounce="blur"
-        />
       </div>
     </div>
     """
@@ -449,4 +465,81 @@ defmodule BerrypodWeb.BlockEditorComponents do
     </div>
     """
   end
+
+  # ── Image picker ──────────────────────────────────────────────
+
+  attr :images, :list, required: true
+  attr :search, :string, required: true
+  attr :event_prefix, :string, default: ""
+
+  def image_picker(assigns) do
+    search = String.downcase(assigns.search)
+
+    filtered =
+      if search == "" do
+        assigns.images
+      else
+        Enum.filter(assigns.images, fn img ->
+          String.contains?(String.downcase(img.filename || ""), search) or
+            String.contains?(String.downcase(img.alt || ""), search)
+        end)
+      end
+
+    assigns = assign(assigns, :filtered_images, filtered)
+
+    ~H"""
+    <div class="image-picker-overlay">
+      <div class="image-picker" phx-click-away={"#{@event_prefix}hide_image_picker"}>
+        <div class="image-picker-header">
+          <h3>Choose image</h3>
+          <button
+            phx-click={"#{@event_prefix}hide_image_picker"}
+            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
+            aria-label="Close"
+          >
+            <.icon name="hero-x-mark" class="size-5" />
+          </button>
+        </div>
+
+        <input
+          type="text"
+          placeholder="Search images..."
+          value={@search}
+          phx-keyup={"#{@event_prefix}image_picker_search"}
+          phx-key=""
+          class="admin-input image-picker-search"
+          autofocus
+        />
+
+        <div class="image-picker-grid">
+          <button
+            :for={image <- @filtered_images}
+            type="button"
+            phx-click={"#{@event_prefix}pick_image"}
+            phx-value-image-id={image.id}
+            class="image-picker-item"
+          >
+            <%= if image.is_svg do %>
+              <div class="image-picker-item-svg">
+                <.icon name="hero-code-bracket" class="size-6" />
+              </div>
+            <% else %>
+              <img
+                src={"/image_cache/#{image.id}-thumb.jpg"}
+                alt={image.alt || image.filename}
+                class="image-picker-item-thumb"
+                loading="lazy"
+              />
+            <% end %>
+            <span class="image-picker-item-name">{image.filename}</span>
+          </button>
+
+          <p :if={@filtered_images == []} class="image-picker-empty">
+            No images found.
+          </p>
+        </div>
+      </div>
+    </div>
+    """
+  end
 end