tor-browser

commit 0e7d63c4a61723b7347af1e3e87895ed67281456
parent 796c6a9abf1db427b2f4d8898b75c52798235051
Author: Harsheet <hsohaney@mozilla.com>
Date:   Fri,  7 Nov 2025 21:41:28 +0000

Bug 1998958 - Change the anchor element for the password rules tooltip in backup. r=cdupuis

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

Diffstat:
M
browser/components/backup/content/password-rules-tooltip.css
 | 
10
+++++-----
M
browser/components/backup/content/password-rules-tooltip.mjs
 | 
16
++++------------

2 files changed, 9 insertions(+), 17 deletions(-)
diff --git a/browser/components/backup/content/password-rules-tooltip.css b/browser/components/backup/content/password-rules-tooltip.css
@@ -10,8 +10,6 @@
   border-radius: var(--border-radius-small);
   overflow: visible;
 
-  margin-block-start: 0.5rem;
-
   ul {
     margin: 0;
     padding: 0;
@@ -95,8 +93,10 @@
   font-size: 12px;
 }
 
-:host([embedded-fx-backup-opt-in]) {
-  #password-rules-wrapper {
-    margin: 0 -100px;
+@media (min-width: 1200px) {
+  :host([embedded-fx-backup-opt-in]) {
+    #password-rules-wrapper {
+      margin: 0.5rem -100px;
+    }
   }
 }
diff --git a/browser/components/backup/content/password-rules-tooltip.mjs b/browser/components/backup/content/password-rules-tooltip.mjs
@@ -66,27 +66,19 @@ export default class PasswordRulesTooltip extends MozLitElement {
   }
 
   positionPopover() {
-    const host = this.getRootNode().host;
-    const anchor = host.shadowRoot.querySelector("#new-password-input");
-
-    if (!anchor) {
-      return;
-    }
-
-    const anchorRect = anchor.getBoundingClientRect();
+    const anchorRect = this.getBoundingClientRect();
     const isWideViewport = window.innerWidth >= 1200;
 
+    const leftPos = anchorRect.left;
     if (isWideViewport) {
       // Position to the right of the input
-      const leftPos = anchorRect.right + 16;
-      const topPos = anchorRect.top - (anchorRect.bottom - anchorRect.top) / 2;
+      const topPos = anchorRect.top;
 
       this.passwordRulesEl.style.left = `${leftPos}px`;
       this.passwordRulesEl.style.top = `${topPos}px`;
     } else {
       // Position below the input
-      const leftPos = anchorRect.left;
-      const topPos = anchorRect.bottom; // offset for arrow and spacing
+      const topPos = anchorRect.bottom;
 
       this.passwordRulesEl.style.left = `${leftPos}px`;
       this.passwordRulesEl.style.top = `${topPos}px`;