tor-browser

commit 07d0e83b406c864a3947f04a4f082f2401927cd5
parent 6d87f4649501ec6c493fea0989af3cef717b7dc3
Author: Sarah Chung <sachung@mozilla.com>
Date:   Fri, 31 Oct 2025 18:33:05 +0000

Bug 1997063 - Fix margin for password rules tooltip r=emcminn

This patch fixes the margin for the password rules tooltip so that the tooltip is aligned correctly in both the Fx Backup opt in spotlight message and the about:preferences#sync backup with encryption password component.

Differential Revision: https://phabricator.services.mozilla.com/D270889

Diffstat:
M
browser/components/backup/content/password-rules-tooltip.css
 | 
8
+++++++-
M
browser/components/backup/content/password-validation-inputs.mjs
 | 
6
++++++

2 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/browser/components/backup/content/password-rules-tooltip.css b/browser/components/backup/content/password-rules-tooltip.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 #password-rules-wrapper {
-  margin: 0 -140px;
+  margin: 0;
   position: absolute;
   padding: var(--space-large) var(--space-xlarge);
   background-color: var(--background-color-box);
@@ -92,3 +92,9 @@
 .rule-description {
   font-size: 12px;
 }
+
+:host([embedded-fx-backup-opt-in]) {
+  #password-rules-wrapper {
+    margin: 0 -140px;
+  }
+}
diff --git a/browser/components/backup/content/password-validation-inputs.mjs b/browser/components/backup/content/password-validation-inputs.mjs
@@ -29,6 +29,11 @@ export default class PasswordValidationInputs extends MozLitElement {
       reflect: true,
       attribute: "create-password-label-l10n-id",
     },
+    embeddedFxBackupOptIn: {
+      type: Boolean,
+      reflect: true,
+      attribute: "embedded-fx-backup-opt-in",
+    },
   };
 
   static get queries() {
@@ -194,6 +199,7 @@ export default class PasswordValidationInputs extends MozLitElement {
             .tooShort=${this._tooShort}
             @focus=${this.handleTooltipFocus}
             @blur=${this.handleTooltipBlur}
+            ?embedded-fx-backup-opt-in=${this.embeddedFxBackupOptIn}
           ></password-rules-tooltip>
           <label id="repeat-password-label" for="repeat-password-input">
             <span