v2.5.0: align key controls and add IP limits

admin-web/static/styles.css

@@ -790,6 +790,24 @@ table {
   background: var(--panel);
 }
 
+.keys-table {
+  min-width: 1180px;
+  table-layout: fixed;
+}
+
+.keys-table th:nth-child(1),
+.keys-table td:nth-child(1) { width: 11%; }
+.keys-table th:nth-child(2),
+.keys-table td:nth-child(2) { width: 15%; }
+.keys-table th:nth-child(3),
+.keys-table td:nth-child(3) { width: 27%; }
+.keys-table th:nth-child(4),
+.keys-table td:nth-child(4) { width: 16%; }
+.keys-table th:nth-child(5),
+.keys-table td:nth-child(5) { width: 18%; }
+.keys-table th:nth-child(6),
+.keys-table td:nth-child(6) { width: 13%; }
+
 th,
 td {
   padding: 14px 16px;
@@ -845,16 +863,41 @@ td small {
   color: var(--muted);
 }
 
-.actions {
+.action-buttons {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: flex-start;
   gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.keys-table button {
+  white-space: nowrap;
+}
+
+.mini-actions {
+  justify-content: flex-start;
+  flex-wrap: nowrap;
 }
 
 .traffic-cell {
   display: grid;
-  gap: 6px;
-  min-width: 150px;
+  gap: 10px;
+  min-width: 0;
+}
+
+.traffic-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.traffic-main span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
 }
 
 .traffic-cell strong {
@@ -862,7 +905,32 @@ td small {
 }
 
 .traffic-cell .soft {
-  width: max-content;
+  flex: 0 0 auto;
+}
+
+.ip-limit-control {
+  display: grid;
+  grid-template-columns: auto minmax(54px, 72px) auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.ip-limit-control span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.ip-limit-control input {
+  width: 72px;
+  min-height: 36px;
+  padding: 0 8px;
+}
+
+.ip-limit-control button {
+  min-height: 36px;
+  padding: 7px 10px;
 }
 
 .user-traffic-panel {
@@ -944,8 +1012,16 @@ td small {
 .backup-actions {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
   gap: 8px;
+}
+
+.mini-actions {
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+
+.backup-actions {
+  justify-content: flex-end;
   flex-wrap: wrap;
 }
 
@@ -1235,6 +1311,7 @@ td small {
   }
 
   table,
+  .keys-table,
   thead,
   tbody,
   tr,
@@ -1284,16 +1361,34 @@ td small {
     white-space: nowrap;
   }
 
-  .actions {
+  .action-buttons {
     display: flex;
     justify-content: stretch;
     flex-wrap: wrap;
   }
 
-  .actions button {
+  .action-buttons button {
     flex: 1 1 140px;
   }
 
+  .traffic-main,
+  .ip-limit-control {
+    align-items: stretch;
+  }
+
+  .traffic-main {
+    flex-direction: column;
+  }
+
+  .ip-limit-control {
+    grid-template-columns: 1fr;
+  }
+
+  .ip-limit-control input,
+  .ip-limit-control button {
+    width: 100%;
+  }
+
   .backup-item,
   .backup-schedule,
   .event,
@@ -1304,11 +1399,13 @@ td small {
   }
 
   .mini-actions,
+  .action-buttons,
   .backup-actions {
     justify-content: stretch;
   }
 
   .mini-actions button,
+  .action-buttons button,
   .backup-actions button {
     flex: 1 1 130px;
   }