Maybe/app/views/account/transactions/bulk_edit.html.erb

<%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
  <dialog data-controller="modal"
          data-action="mousedown->modal#clickOutside"
    class="bg-white shadow-border-xs rounded-2xl max-h-[calc(100vh-32px)] h-full max-w-[480px] w-full mt-4 mr-4 ml-auto">
    <%= styled_form_with url: bulk_update_account_transactions_path, scope: "bulk_update", class: "h-full", data: { turbo_frame: "_top" } do |form| %>
      <div class="flex h-full flex-col justify-between p-4 gap-4">
        <div>
          <div class="flex h-9 items-center justify-end">
            <div data-action="mousedown->modal#close" class="cursor-pointer">
              <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
            </div>
          </div>

          <div class="flex flex-col overflow-scroll">
            <div>
              <header class="mb-4 space-y-1">
                <h3 class="text-2xl font-medium" data-bulk-select-target="bulkEditDrawerTitle">
                  Edit transactions
                </h3>
              </header>

              <div class="space-y-2">
                <details class="group space-y-2" open>
                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
                    <h4><%= t(".overview") %></h4>
                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
                  </summary>

                  <div class="pb-6 space-y-2">
                    <%= form.date_field :date, label: t(".date_label"), max: Date.current %>
                  </div>
                </details>

                <details class="group space-y-2" open>
                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
                    <h4><%= t(".details") %></h4>
                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
                  </summary>

                  <div class="space-y-2">
                    <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-subdued" } %>
                    <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-subdued" } %>
                    <%= form.text_area :notes, label: t(".note_label"), placeholder: t(".note_placeholder"), rows: 5 %>
                  </div>
                </details>
              </div>
            </div>
          </div>
        </div>

        <div class="flex justify-end items-center gap-2">
          <%= link_to t(".cancel"), transactions_path, class: "btn btn--ghost" %>

          <%= tag.button t(".save"),
                         type: "button",
                         data: { "bulk-select-scope-param": "bulk_update", action: "bulk-select#submitBulkRequest" },
                         class: "btn btn--primary" %>
        </div>
      </div>
    <% end %>
  </dialog>
<% end %>