Fix Details Header Deformation

app.js

@@ -4291,7 +4291,7 @@ function updateContainerDetailsActions(container) {
   if (badge) {
     badge.hidden = !state;
     badge.textContent = state || '';
-    badge.className = 'detail-badge';
+    badge.className = 'detail-badge container-details-state-badge';
     if (running) badge.classList.add('status-running');
     else if (paused) badge.classList.add('status-paused');
     else if (state === 'restarting') badge.classList.add('status-restarting');

index.html

@@ -1711,8 +1711,8 @@
             <h2 class="mb-0" id="container-details-title">
               <i class="fas fa-box"></i><span class="container-details-title-text">Container Details</span>
             </h2>
-            <span class="detail-badge" id="container-details-state-badge" hidden></span>
           </div>
+          <span class="detail-badge container-details-state-badge" id="container-details-state-badge" hidden></span>
           <div class="container-details-actions" id="container-details-actions" role="toolbar" aria-label="Container actions">
             <button type="button" class="btn btn-sm btn-outline-success" data-detail-action="start" data-min-role="operator" title="Start">
               <i class="fas fa-play"></i><span>Start</span>

ui/modern.css

@@ -872,16 +872,24 @@ body {
   min-width: 0;
   max-width: 100%;
   width: 100%;
+  align-items: center;
 }
 
 #container-details-view .container-details-header-left {
   min-width: 0;
-  max-width: 100%;
+}
+
+#container-details-view .container-details-state-badge,
+#container-details-view #container-details-state-badge {
+  align-self: center;
+  flex-shrink: 0;
 }
 
 #container-details-view .container-details-actions {
   min-width: 0;
   max-width: 100%;
+  align-items: center;
+  flex-wrap: nowrap;
 }
 
 #container-details-view .container-details-tabs {
@@ -4972,6 +4980,15 @@ option {
     gap: 0;
   }
 
+  /* Icon-only actions free enough space that badge + Remove stay on the same row */
+  .container-details-header {
+    flex-wrap: nowrap;
+  }
+
+  .container-details-header-left {
+    max-width: min(36%, 16rem);
+  }
+
   .container-details-back span {
     display: none;
   }
@@ -5015,20 +5032,31 @@ option {
 }
 
 @container container-details (max-width: 780px) {
+  /* Title on its own row; badge + actions stay one horizontally aligned toolbar */
   .container-details-header {
-    flex-direction: column;
-    align-items: stretch;
+    flex-wrap: wrap;
+    align-items: center;
+    row-gap: 8px;
   }
 
   .container-details-header-left {
+    flex: 1 1 100%;
+    max-width: 100%;
     width: 100%;
-    flex: 1 1 auto;
+  }
+
+  .container-details-state-badge,
+  #container-details-state-badge {
+    flex-shrink: 0;
+    align-self: center;
   }
 
   .container-details-actions {
-    width: 100%;
     flex: 1 1 auto;
-    justify-content: flex-start;
+    min-width: 0;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    align-items: center;
   }
 
   .container-details-action-sep,

ui/styles.css

@@ -3327,15 +3327,16 @@
     .container-details-header {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: flex-start;
       gap: 10px 12px;
       flex-shrink: 0;
       margin-bottom: 8px;
-      min-height: 0;
+      min-height: 2.25rem;
       min-width: 0;
       max-width: 100%;
       width: 100%;
-      flex-wrap: wrap;
+      /* Prefer a single toolbar row; stack as whole left/right units only when needed */
+      flex-wrap: nowrap;
     }
 
     .container-details-header-left {
@@ -3343,8 +3344,8 @@
       align-items: center;
       gap: 8px 10px;
       min-width: 0;
-      flex: 1 1 14rem;
-      max-width: 100%;
+      flex: 0 1 auto;
+      max-width: min(40%, 22rem);
     }
 
     .container-details-back {
@@ -3379,23 +3380,41 @@
       min-width: 0;
     }
 
-    #container-details-state-badge {
+    /* State badge sits between title and actions — same row, vertically centered */
+    #container-details-state-badge,
+    .container-details-state-badge {
+      display: inline-flex;
+      align-items: center;
       flex-shrink: 0;
+      align-self: center;
       max-width: 8rem;
+      margin: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      line-height: 1.2;
+    }
+
+    #container-details-state-badge[hidden],
+    .container-details-state-badge[hidden] {
+      display: none !important;
     }
 
     .container-details-actions {
       display: flex;
       align-items: center;
-      flex-wrap: wrap;
+      /* Keep Start…Remove on one line; scroll if the pane is too narrow */
+      flex-wrap: nowrap;
       gap: 6px;
-      flex: 1 1 16rem;
+      flex: 1 1 auto;
       justify-content: flex-end;
       min-width: 0;
       max-width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: thin;
+      padding-bottom: 1px; /* room for thin scrollbar without layout jump */
     }
 
     .container-details-actions .btn {
@@ -3406,6 +3425,7 @@
       font-weight: 600;
       flex: 0 0 auto;
       min-height: 1.85rem;
+      white-space: nowrap;
     }
 
     .container-details-actions .btn:disabled {
@@ -3434,6 +3454,27 @@
       }
     }
 
+    /* Narrow windows: title row, then badge + actions still one aligned toolbar */
+    @media (max-width: 720px) {
+      .container-details-header {
+        flex-wrap: wrap;
+        row-gap: 8px;
+      }
+      .container-details-header-left {
+        flex: 1 1 100%;
+        max-width: 100%;
+      }
+      #container-details-state-badge,
+      .container-details-state-badge {
+        order: 2;
+      }
+      .container-details-actions {
+        order: 3;
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+    }
+
     .container-details-tabs {
       display: flex;
       flex-shrink: 0;