From d3a707df4beb85c3422ae6aa8ddfb3fd8cf571ee Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@classynemesis.com>
Date: Tue, 21 Oct 2025 11:19:04 -0400
Subject: [PATCH] tweak styling to better handle long value wrapping/truncating

---
 .../autofill-targeting-rules.component.html   | 130 +++++++++++++-----
 1 file changed, 99 insertions(+), 31 deletions(-)

diff --git a/apps/browser/src/autofill/popup/settings/autofill-targeting-rules.component.html b/apps/browser/src/autofill/popup/settings/autofill-targeting-rules.component.html
index 9f35b9827c2..ba134b2919d 100644
--- a/apps/browser/src/autofill/popup/settings/autofill-targeting-rules.component.html
+++ b/apps/browser/src/autofill/popup/settings/autofill-targeting-rules.component.html
@@ -21,7 +21,7 @@
     </bit-section>
     <bit-section *ngIf="!isLoading">
       <bit-section-header>
-        <h2 bitTypography="h6">{{ "domainsTitle" | i18n }}</h2>
+        <h2 bitTypography="h6">URLs</h2>
         <span bitTypography="body2" slot="end">{{
           viewTargetingRulesDomains.length + domainForms.value.length
         }}</span>
@@ -29,21 +29,52 @@
       <bit-item
         *ngFor="let domain of viewTargetingRulesDomains; let i = index; trackBy: trackByFunction"
       >
-        <bit-item-content *ngIf="i < fieldsEditThreshold">
-          <div id="uriTargetingRules{{ i }}">{{ domain }}</div>
+        <div
+          *ngIf="i < fieldsEditThreshold"
+          style="margin: 0.5rem 1rem; display: block; width: 90%"
+        >
+          <div
+            id="uriTargetingRules{{ i }}"
+            style="
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+              line-clamp: 2;
+              display: -webkit-box;
+              max-height: 2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: normal;
+              word-break: break-all;
+              font-family: monospace;
+              font-size: 0.7rem;
+            "
+            title="{{ domain }}"
+          >
+            {{ domain }}
+          </div>
           <div
             *ngIf="targetingRulesDomainsViewState[domain].username"
             title="{{ targetingRulesDomainsViewState[domain].username }}"
-            style="padding-left: 12px"
+            style="margin-left: 12px"
           >
             <div style="font-size: 0.8rem; font-weight: bold">Username:</div>
             <div
               style="
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 3;
+                line-clamp: 3;
+                display: -webkit-box;
+                border-radius: 0.35rem;
+                background-color: rgb(var(--color-background-alt));
+                padding: 4px;
+                max-height: calc(2rem + 8px);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: 0.75rem;
+                word-break: break-all;
+                font-family: monospace;
                 font-size: 0.7rem;
                 font-weight: lighter;
-                font-family: monospace;
-                text-overflow: ellipsis;
-                overflow-y: clip;
               "
             >
               {{ targetingRulesDomainsViewState[domain].username }}
@@ -52,16 +83,26 @@
           <div
             *ngIf="targetingRulesDomainsViewState[domain].password"
             title="{{ targetingRulesDomainsViewState[domain].password }}"
-            style="padding-left: 12px"
+            style="margin-left: 12px"
           >
             <div style="font-size: 0.8rem; font-weight: bold">Password:</div>
             <div
               style="
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 3;
+                line-clamp: 3;
+                display: -webkit-box;
+                border-radius: 0.35rem;
+                background-color: rgb(var(--color-background-alt));
+                padding: 4px;
+                max-height: calc(2rem + 8px);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: 0.75rem;
+                word-break: break-all;
+                font-family: monospace;
                 font-size: 0.7rem;
                 font-weight: lighter;
-                font-family: monospace;
-                text-overflow: ellipsis;
-                overflow-y: clip;
               "
             >
               {{ targetingRulesDomainsViewState[domain].password }}
@@ -70,22 +111,32 @@
           <div
             *ngIf="targetingRulesDomainsViewState[domain].totp"
             title="{{ targetingRulesDomainsViewState[domain].totp }}"
-            style="padding-left: 12px"
+            style="margin-left: 12px"
           >
             <div style="font-size: 0.8rem; font-weight: bold">TOTP:</div>
             <div
               style="
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 3;
+                line-clamp: 3;
+                display: -webkit-box;
+                border-radius: 0.35rem;
+                background-color: rgb(var(--color-background-alt));
+                padding: 4px;
+                max-height: calc(2rem + 8px);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: 0.75rem;
+                word-break: break-all;
+                font-family: monospace;
                 font-size: 0.7rem;
                 font-weight: lighter;
-                font-family: monospace;
-                text-overflow: ellipsis;
-                overflow-y: clip;
               "
             >
               {{ targetingRulesDomainsViewState[domain].totp }}
             </div>
           </div>
-        </bit-item-content>
+        </div>
         <button
           *ngIf="i < fieldsEditThreshold && domain"
           label="{{ 'remove' | i18n }}"
@@ -119,16 +170,31 @@
                 formControlName="domain"
               />
             </bit-form-field>
-            <div style="display: flex; align-content: center; flex-wrap: wrap; row-gap: 3px">
+            <div style="color: rgb(var(--color-text-muted)); font-size: 0.875rem">Fields</div>
+            <div
+              style="
+                row-gap: 4px;
+                display: flex;
+                flex-wrap: wrap;
+                align-content: center;
+                border: 1px solid rgb(var(--color-text-muted));
+                border-radius: 0.5rem;
+                background-color: rgb(var(--color-background-alt));
+                padding: 7px;
+                text-align: end;
+                font-size: 0.9rem;
+              "
+            >
               <!-- Username field -->
-              <div
-                class="field-row"
-                style="gap: 15px; display: flex; justify-content: flex-end; width: 100%"
-              >
+              <div style="gap: 5px; display: flex; justify-content: flex-end; width: 100%">
                 <label style="flex: 1 1 25%">Username: </label>
                 <input
                   style="
                     flex: 1 1 75%;
+                    border-width: 1px;
+                    border-style: solid;
+                    border-radius: 0.25rem;
+                    padding: 0 4px;
                     font-family: monospace;
                     font-size: 0.75rem;
                     font-weight: light;
@@ -141,17 +207,18 @@
               </div>
 
               <!-- Password field -->
-              <div
-                class="field-row"
-                style="gap: 15px; display: flex; justify-content: flex-end; width: 100%"
-              >
+              <div style="gap: 5px; display: flex; justify-content: flex-end; width: 100%">
                 <label style="flex: 1 1 25%">Password: </label>
                 <input
                   style="
                     flex: 1 1 75%;
+                    border-width: 1px;
+                    border-style: solid;
+                    border-radius: 0.25rem;
+                    padding: 0 4px;
+                    font-family: monospace;
                     font-size: 0.75rem;
                     font-weight: light;
-                    font-family: monospace;
                   "
                   appInputVerbatim
                   type="text"
@@ -161,17 +228,18 @@
               </div>
 
               <!-- TOTP field -->
-              <div
-                class="field-row"
-                style="gap: 15px; display: flex; justify-content: flex-end; width: 100%"
-              >
+              <div style="gap: 5px; display: flex; justify-content: flex-end; width: 100%">
                 <label style="flex: 1 1 25%">TOTP: </label>
                 <input
                   style="
                     flex: 1 1 75%;
+                    border-width: 1px;
+                    border-style: solid;
+                    border-radius: 0.25rem;
+                    padding: 0 4px;
+                    font-family: monospace;
                     font-size: 0.75rem;
                     font-weight: light;
-                    font-family: monospace;
                   "
                   appInputVerbatim
                   type="text"