From 8ba9526eae092220c6c61b1c489f010a5a168564 Mon Sep 17 00:00:00 2001
From: varjolintu <sami.vanttinen@protonmail.com>
Date: Tue, 16 Jul 2024 07:42:21 +0300
Subject: [PATCH] Fix breaking page layouts

---
 keepassxc-browser/content/pwgen.js          |  9 +--------
 keepassxc-browser/content/totp-field.js     | 12 +-----------
 keepassxc-browser/content/ui.js             | 21 +++++++++++++++++++++
 keepassxc-browser/content/username-field.js | 12 +-----------
 4 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/keepassxc-browser/content/pwgen.js b/keepassxc-browser/content/pwgen.js
index 2a38925..429a407 100644
--- a/keepassxc-browser/content/pwgen.js
+++ b/keepassxc-browser/content/pwgen.js
@@ -83,14 +83,7 @@ PasswordIcon.prototype.createIcon = function(field) {
 
     kpxcUI.setIconPosition(icon, field, this.rtl);
     this.icon = icon;
-
-    const styleSheet = createStylesheet('css/pwgen.css');
-    const wrapper = document.createElement('div');
-
-    this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
-    this.shadowRoot.append(styleSheet);
-    this.shadowRoot.append(icon);
-    document.body.append(wrapper);
+    this.createWrapper('css/pwgen.css');
 };
 
 
diff --git a/keepassxc-browser/content/totp-field.js b/keepassxc-browser/content/totp-field.js
index ddfcf38..d4e9a07 100644
--- a/keepassxc-browser/content/totp-field.js
+++ b/keepassxc-browser/content/totp-field.js
@@ -167,15 +167,5 @@ TOTPFieldIcon.prototype.createIcon = function(field, segmented = false) {
 
     kpxcUI.setIconPosition(icon, field, this.rtl, segmented);
     this.icon = icon;
-
-    const styleSheet = createStylesheet('css/totp.css');
-    const wrapper = document.createElement('div');
-    wrapper.style.all = 'unset';
-    wrapper.style.display = 'none';
-    styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
-
-    this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
-    this.shadowRoot.append(styleSheet);
-    this.shadowRoot.append(icon);
-    document.body.append(wrapper);
+    this.createWrapper('css/totp.css');
 };
diff --git a/keepassxc-browser/content/ui.js b/keepassxc-browser/content/ui.js
index 7da9ff2..7196da3 100644
--- a/keepassxc-browser/content/ui.js
+++ b/keepassxc-browser/content/ui.js
@@ -50,6 +50,27 @@ class Icon {
         }
     }
 
+    // Creates a wrapper div that has the icon in Shadow DOM
+    createWrapper(styleSheetFilename) {
+        const styleSheet = createStylesheet(styleSheetFilename);
+        const wrapper = document.createElement('div');
+        wrapper.style.all = 'unset';
+        wrapper.style.display = 'none';
+
+        // Make sure the wrapper is positioned correctly without CSS styles affecting to it
+        wrapper.style.position = 'absolute';
+        wrapper.style.top = Pixels(0);
+        wrapper.style.left = Pixels(0);
+
+        // Waits for stylesheet to load before displaying the element
+        styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
+
+        this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
+        this.shadowRoot.append(styleSheet);
+        this.shadowRoot.append(this.icon);
+        document.body.append(wrapper);
+    }
+
     switchIcon(state, uuid) {
         if (!this.icon) {
             return;
diff --git a/keepassxc-browser/content/username-field.js b/keepassxc-browser/content/username-field.js
index abbee66..9fe9fb7 100644
--- a/keepassxc-browser/content/username-field.js
+++ b/keepassxc-browser/content/username-field.js
@@ -105,17 +105,7 @@ UsernameFieldIcon.prototype.createIcon = function(field) {
 
     kpxcUI.setIconPosition(icon, field, this.rtl);
     this.icon = icon;
-
-    const styleSheet = createStylesheet('css/username.css');
-    const wrapper = document.createElement('div');
-    wrapper.style.all = 'unset';
-    wrapper.style.display = 'none';
-    styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
-
-    this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
-    this.shadowRoot.append(styleSheet);
-    this.shadowRoot.append(icon);
-    document.body.append(wrapper);
+    this.createWrapper('css/username.css');
 };
 
 const iconClicked = async function(field, icon) {