Enhance series actions layout with improved flexbox styling and structure

atlas/templates/atlas/case_display_block.html

@@ -362,6 +362,7 @@
                     Import new uploads
                 </button>
             </div>
+            <div>
             <details class="series-actions" id="series-actions">
                 <summary>
                     <button type="button" class="btn btn-outline-secondary btn-sm" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
@@ -417,6 +418,7 @@
                     <span id="series-action-results" ></span>
                 </div>
             </details>
+        </div>
 
         </div>
     </div>
@@ -1154,7 +1156,11 @@
         margin-top: 8px;
     }
     .series-actions {
-        display: inline-block;
+        flex: 1 1 auto;
+        min-width: 0; /* allow flex children to shrink without overflow */
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
         border: 1px solid rgba(0,0,0,0.06);
         border-radius: .375rem;
         padding: .5rem;
@@ -1164,6 +1170,9 @@
     .series-actions summary { list-style: none; }
     .series-actions summary::-webkit-details-marker { display:none; }
     .series-actions .btn { vertical-align: middle; }
+    .series-actions > a, .series-actions > button { width: 100%; text-align: left; }
+    .series-actions > button.btn.btn-warning,
+    .series-actions > button.btn.btn-secondary { width: auto; align-self: flex-start; }
     @media (prefers-color-scheme: dark) {
         .series-actions { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
     }