Fix mobile pending setup URL wrapping

karldns/web/styles.py

@@ -654,6 +654,7 @@ select:focus-visible {
 .copy-field .copy-value {
   flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
   overflow: hidden;
   color: var(--rp-ink);
   text-overflow: ellipsis;
@@ -672,6 +673,7 @@ select:focus-visible {
 }
 
 .copy-field input {
+  width: 100%;
   padding: 0;
 }
 
@@ -995,22 +997,57 @@ select:focus-visible {
   }
 
   .copy-pill {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
     min-height: 50px;
-    align-items: flex-start;
-    flex-wrap: wrap;
+    align-items: start;
     border-radius: 24px;
     padding: 12px 14px;
+    overflow: hidden;
+  }
+
+  .copy-pill-label {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
   }
 
   .copy-field .copy-value,
   .copy-field code {
+    display: block;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    font-size: 14px;
+    line-height: 1.55;
     white-space: normal;
     overflow-wrap: anywhere;
+    word-break: break-word;
     overflow: visible;
     text-overflow: clip;
   }
 
+  .copy-field input.copy-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .terminal-card {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .terminal-card code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .manual-code {
+    overflow-x: hidden;
+  }
+
   .copy-field .copy-button {
     width: 100%;
     min-height: 50px;