containers/libreportal/frontend/css/style.css

@@ -727,44 +727,31 @@ html[data-theme="nebula"]::after {
   to   { opacity: 1; transform: translateY(0); }
 }
 
-/* "Dependency required" card — e.g. "Enable Whitelist — Traefik needs
-   to be installed" on the Features tab. Two-row grid so the action
-   button always lives in its own full-width footer row, regardless of
-   how narrow the card column is. The old single-row flex layout broke
-   in 3-column grids: the body squashed into a 30-char column and the
-   button stretched vertically as the only flex item with breathing
-   room. Grid keeps icon + body on one row and the button on the next,
-   so the visual reads top-to-bottom: who is this for → what's missing
-   → fix it. */
 .dep-required-card {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto;
-  gap: 10px 12px;
-  padding: 14px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 14px;
   background: rgba(245, 158, 11, 0.08);
   border: 1px solid rgba(245, 158, 11, 0.30);
   border-radius: 10px;
   margin-bottom: 10px;
 }
 .dep-required-icon {
-  grid-row: 1;
-  grid-column: 1;
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: contain;
   background: rgba(var(--text-rgb), 0.04);
   padding: 4px;
+  flex-shrink: 0;
 }
 .dep-required-body {
-  grid-row: 1;
-  grid-column: 2;
+  flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
-  align-self: center;
 }
 .dep-required-title {
   font-size: 14px;
@@ -777,14 +764,20 @@ html[data-theme="nebula"]::after {
   line-height: 1.4;
 }
 .dep-required-action {
-  grid-row: 2;
-  grid-column: 1 / -1;
-  width: 100%;
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 6px;
-  margin-top: 2px;
+  white-space: nowrap;
+}
+@media (max-width: 560px) {
+  .dep-required-card {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+  }
+  .dep-required-icon { align-self: center; }
+  .dep-required-action { justify-content: center; }
 }
 
 .nav-button {