Merge claude/2

containers/libreportal/frontend/css/style.css

@@ -727,31 +727,44 @@ 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: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 12px 14px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  gap: 10px 12px;
+  padding: 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 {
-  flex: 1;
+  grid-row: 1;
+  grid-column: 2;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  align-self: center;
 }
 .dep-required-title {
   font-size: 14px;
@@ -764,20 +777,14 @@ html[data-theme="nebula"]::after {
   line-height: 1.4;
 }
 .dep-required-action {
-  flex-shrink: 0;
+  grid-row: 2;
+  grid-column: 1 / -1;
+  width: 100%;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  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; }
+  margin-top: 2px;
 }
 
 .nav-button {