Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

app/assets/javascripts/items/item_header.js

@@ -1,21 +1,12 @@
-const userListSections = document.querySelectorAll(
-	".item-header .user-lists-section");
-for (const section of userListSections) {
+const headers = document.querySelectorAll(".item-header");
+for (const header of headers) {
 	try {
-		const dialog = section.querySelector("dialog");
-		const opener = section.querySelector(".dialog-opener");
-		const closer = section.querySelector(".dialog-closer");
-		if (dialog.showModal) { // check browser support
+		const form = header.querySelector(".user-lists-form");
+		const opener = header.querySelector(".user-lists-form-opener");
 		opener.addEventListener("click", (event) => {
-				dialog.show();
+			form.toggleAttribute("hidden");
 			event.preventDefault();
 		});
-			document.body.addEventListener("click", (event) => {
-				if (dialog.open && !section.contains(event.target)) {
-					dialog.close();
-				}
-			});
-		}
 	} catch (error) {
 		console.error(`Error applying dialog behavior to item header:`, error);
 	}

app/assets/stylesheets/partials/_item_header.sass

@@ -59,16 +59,16 @@
           background: #E2E8F0
           color: #1A202C
 
-    .user-lists-section
+    .user-lists-info
       grid-area: lists
       font-size: 85%
       text-align: left
 
-      .dialog-opener
+      .user-lists-form-opener
         &::after
           content: " ›"
 
-      dialog
+  .user-lists-form
     background: $background-color
     border: 1px solid $module-border-color
     border-radius: .5em
@@ -77,12 +77,14 @@
     text-align: center
     z-index: 2
     margin-top: .5em
-        box-shadow: 0px 1px 4px #666
+    margin-inline: auto
+    margin-bottom: 1.5em
+    font-size: 85%
 
     h3
       font-size: 150%
       font-weight: bold
-          margin-bottom: .25em
+      margin-bottom: .75em
     
     .closet-hangers-ownership-groups
       +clearfix

app/views/items/_item_header.haml

@@ -31,16 +31,16 @@
         = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
 
     - if user_signed_in?
-      .user-lists-section
+      .user-lists-info
         = link_to t('items.show.closet_hangers.button'),
           user_closet_hangers_path(current_user),
-          class: 'dialog-opener'
-        %dialog
+          class: 'user-lists-form-opener'
+
+  = form_tag update_quantities_user_item_closet_hangers_path(user_id: current_user, item_id: item), method: :put, class: 'user-lists-form', hidden: true do
     %h3
       = t 'items.show.closet_hangers.header_html',
         user_items_link: link_to(t('your_items'),
         user_closet_hangers_path(current_user))
-          = form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => item), :method => :put do
     .closet-hangers-ownership-groups
       - [true, false].each do |owned|
         - lists = current_user_lists[owned]