Refactor bulk delete drawer for improved layout and accessibility

Web/templates/main_admin.html

@@ -27,7 +27,6 @@
     }
 
     .bulk-delete-inline-wrap {
-        position: relative;
         display: inline-flex;
     }
 
@@ -51,26 +50,26 @@
     }
 
     .bulk-delete-drawer {
-        position: absolute;
+        display: none;
-        right: 0;
+        width: 100%;
-        top: calc(100% + 10px);
+        max-width: 980px;
-        transform: translateY(-8px);
+        margin: 0 auto 18px;
-        width: min(360px, calc(100vw - 34px));
-        z-index: 35;
         border: 1px solid #dbe3ee;
         background: #ffffff;
-        border-radius: 14px;
+        border-radius: 10px;
         padding: 14px;
-        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.15);
+        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
-        transition: transform 0.2s ease, opacity 0.2s ease;
-        opacity: 0;
-        pointer-events: none;
     }
 
     .bulk-delete-drawer.open {
-        transform: translateY(0);
+        display: flex;
-        opacity: 1;
+        flex-wrap: wrap;
-        pointer-events: auto;
+        justify-content: space-between;
+        gap: 14px;
+    }
+
+    .bulk-delete-content {
+        flex: 1 1 380px;
     }
 
     .bulk-delete-drawer strong {
@@ -93,9 +92,11 @@
 
     .bulk-delete-actions {
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
         gap: 8px;
-        margin-top: 12px;
+        margin-top: 4px;
+        align-items: center;
+        flex: 0 1 auto;
     }
 
     .bulk-delete-actions button {
@@ -106,7 +107,7 @@
         background: #f8fafc;
         color: #1e293b;
         font-weight: 600;
-        text-align: left;
+        text-align: center;
     }
 
     .bulk-delete-actions button:hover {
@@ -388,9 +389,16 @@
     }
 
     @media (max-width: 768px) {
-        .bulk-delete-drawer {
+        .bulk-delete-drawer.open {
-            right: -8px;
+            flex-direction: column;
-            width: min(340px, calc(100vw - 24px));
+        }
+
+        .bulk-delete-actions {
+            width: 100%;
+        }
+
+        .bulk-delete-actions button {
+            width: 100%;
         }
     }
 
@@ -2250,20 +2258,22 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     <button type="button" id="bulk-delete-drawer-toggle" class="view-toggle-btn bulk-delete-drawer-toggle" aria-expanded="false" title="Massenlöschung" onclick="toggleBulkDeleteDrawer()">
                         <span class="drawer-icon">⚙</span>
                     </button>
-                    <div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
-                        <strong>Massenlöschung nach Kriterien</strong>
-                        <div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
-                        <small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
-                        <div class="bulk-delete-actions">
-                            <button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
-                            <button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
-                            <button type="button" id="bulk-delete-button" class="danger" onclick="deleteSelectedItems()" disabled>Auswahl löschen</button>
-                        </div>
-                    </div>
                 </div>
             </div>
         </h1>
         <div id="items-indicator" class="items-indicator">Objekte im System: 0</div>
+        <div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
+            <div class="bulk-delete-content">
+                <strong>Massenlöschung nach Kriterien</strong>
+                <div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
+                <small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
+            </div>
+            <div class="bulk-delete-actions">
+                <button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
+                <button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
+                <button type="button" id="bulk-delete-button" class="danger" onclick="deleteSelectedItems()" disabled>Auswahl löschen</button>
+            </div>
+        </div>
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
@@ -3002,6 +3012,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         if (toggle) {
             toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
             toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span>' : '<span class="drawer-icon">⚙</span>';
+            toggle.title = bulkDeleteDrawerOpen ? 'Massenlöschung schließen' : 'Massenlöschung öffnen';
         }
     }
 
@@ -3071,16 +3082,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
     });
 
-    document.addEventListener('click', function(event) {
-        if (!bulkDeleteDrawerOpen) {
-            return;
-        }
-        const wrapper = document.querySelector('.bulk-delete-inline-wrap');
-        if (wrapper && !wrapper.contains(event.target)) {
-            setBulkDeleteDrawer(false);
-        }
-    });
-
     function deleteSelectedItems() {
         const selectedIds = [...bulkDeleteSelection];
         if (selectedIds.length === 0) {