Trust reverse proxy client IP headers

karldns/web/styles.py

@@ -618,52 +618,67 @@ select:focus-visible {
 }
 
 .copy-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  gap: 12px;
   min-width: 0;
   max-width: 100%;
 }
 
-.copy-field .input-group-text {
-  min-width: 150px;
-  border-color: var(--rp-line);
-  color: var(--rp-muted);
-  font-size: 13px;
-  background: var(--rp-surface-alt);
-}
-
-.copy-label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.copy-field .form-control {
+.copy-pill {
+  display: flex;
   min-width: 0;
-  border-color: var(--rp-line);
+  min-height: 58px;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 16px;
+  border: 1px solid var(--rp-line);
+  border-radius: 9999px;
   background: var(--rp-field);
 }
 
+.copy-field-secret .copy-pill {
+  border-color: var(--rp-danger);
+}
+
+.copy-pill-label {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: var(--rp-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 .copy-field .copy-value {
+  flex: 1 1 auto;
   min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.copy-field code.form-control {
-  width: 1%;
-  flex: 1 1 0;
   overflow: hidden;
-  white-space: nowrap;
+  color: var(--rp-ink);
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.copy-field code {
-  min-height: 42px;
+.copy-field code,
+.copy-field input {
   margin: 0;
-  color: var(--rp-ink);
+  border: 0;
+  outline: 0;
+  background: transparent;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  background: var(--rp-field);
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+.copy-field input {
+  padding: 0;
+}
+
+.copy-reveal-button {
+  flex: 0 0 auto;
+  min-height: 36px;
+  padding-inline: 14px;
 }
 
 .copy-button {
@@ -671,6 +686,9 @@ select:focus-visible {
   align-items: center;
   justify-content: center;
   gap: 6px;
+  min-width: 122px;
+  min-height: 58px;
+  font-weight: 600;
 }
 
 .copy-button .copy-icon,
@@ -973,12 +991,15 @@ select:focus-visible {
   .copy-field {
     display: grid;
     grid-template-columns: 1fr;
+    gap: 10px;
   }
 
-  .copy-field .input-group-text {
-    min-width: 0;
-    border-radius: 14px 14px 0 0;
-    white-space: normal;
+  .copy-pill {
+    min-height: 50px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    border-radius: 24px;
+    padding: 12px 14px;
   }
 
   .copy-field .copy-value,
@@ -986,23 +1007,14 @@ select:focus-visible {
     width: 100%;
     white-space: normal;
     overflow-wrap: anywhere;
-    border-radius: 0;
-  }
-
-  .copy-field code.form-control {
-    flex: 1 1 auto;
-    width: 100%;
     overflow: visible;
     text-overflow: clip;
   }
 
-  .copy-field .btn {
+  .copy-field .copy-button {
     width: 100%;
-    border-radius: 0;
-  }
-
-  .copy-field .btn:last-child {
-    border-radius: 0 0 14px 14px;
+    min-height: 50px;
+    border-radius: 9999px;
   }
 
   .card .copy-icon-button,