feat: fully functioning ALB

packages/frontend/src/index.css

@@ -188,6 +188,18 @@ button {
     border: 0;
 }
 
+.copy-value {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+}
+
+.copy-value-button {
+    flex: 0 0 auto;
+    padding: 2px;
+}
+
 #main-content:focus {
     outline: none;
 }
@@ -4321,6 +4333,77 @@ button.console-service-card {
     overflow-y: auto;
 }
 
+.create-table-modal.sg-rules-edit-modal {
+    box-sizing: border-box;
+    width: min(980px, calc(100vw - 40px));
+    max-width: none;
+    max-height: min(900px, calc(100vh - 40px));
+    overflow-x: hidden;
+    align-items: stretch;
+}
+
+.sg-rules-edit-modal .modal-section {
+    box-sizing: border-box;
+    min-width: 0;
+}
+
+.sg-edit-rule-table-wrap {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+.sg-edit-rule-table {
+    width: 100%;
+    min-width: 700px;
+    border-collapse: collapse;
+    table-layout: fixed;
+    font-size: 12px;
+}
+
+.sg-edit-rule-table th:nth-child(1) { width: 34%; }
+.sg-edit-rule-table th:nth-child(2) { width: 12%; }
+.sg-edit-rule-table th:nth-child(3) { width: 24%; }
+.sg-edit-rule-table th:nth-child(4) { width: 26%; }
+.sg-edit-rule-table th:nth-child(5) { width: 44px; }
+
+.sg-edit-rule-table td {
+    overflow: hidden;
+}
+
+.sg-edit-rule-table .sg-edit-type-cell .input,
+.sg-edit-rule-table td:nth-child(4) .input {
+    box-sizing: border-box;
+    width: 100% !important;
+    min-width: 0 !important;
+}
+
+.sg-edit-rule-table td:nth-child(3) > div {
+    gap: 8px !important;
+}
+
+.sg-edit-rule-table td:nth-child(3) .input {
+    box-sizing: border-box;
+    width: 64px !important;
+    min-width: 0 !important;
+}
+
+@media (max-width: 760px) {
+    .create-table-modal.sg-rules-edit-modal {
+        width: calc(100vw - 24px);
+        max-height: calc(100vh - 24px);
+        padding: 16px;
+        gap: 12px;
+    }
+
+    .sg-rules-edit-modal .modal-section {
+        padding: 10px;
+    }
+}
+
 .create-table-modal h3 {
     margin: 0;
     font-size: 15px;