From 813b245d89890443d2abdfa7941867371bbe09cf Mon Sep 17 00:00:00 2001
From: varjolintu <sami.vanttinen@varjolintu.fi>
Date: Mon, 17 Nov 2025 17:01:33 +0200
Subject: [PATCH] Fix layout issues with banners

---
 keepassxc-browser/content/banner.js               | 2 +-
 keepassxc-browser/content/custom-fields-banner.js | 4 ++--
 keepassxc-browser/css/banner.css                  | 7 ++++++-
 keepassxc-browser/css/button.css                  | 1 +
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/keepassxc-browser/content/banner.js b/keepassxc-browser/content/banner.js
index 2dc1d7c..7e968b8 100644
--- a/keepassxc-browser/content/banner.js
+++ b/keepassxc-browser/content/banner.js
@@ -65,7 +65,7 @@ kpxcBanner.create = async function(credentials = {}) {
     const className = kpxc.isFirefox ? 'kpxc-banner-icon-moz' : 'kpxc-banner-icon';
     const icon = kpxcUI.createElement('span', className, { 'alt': 'logo' });
 
-    const infoText = kpxcUI.createElement('span', '', {}, tr('rememberInfoText'));
+    const infoText = kpxcUI.createElement('span', 'banner-info-text', {}, tr('rememberInfoText'));
     const usernameText = kpxcUI.createElement('span', 'small', {}, tr('popupUsername') + ' ');
     const usernameSpan = kpxcUI.createElement('span', 'small info information-username', {}, credentials.username);
 
diff --git a/keepassxc-browser/content/custom-fields-banner.js b/keepassxc-browser/content/custom-fields-banner.js
index c1a2001..06adeb3 100644
--- a/keepassxc-browser/content/custom-fields-banner.js
+++ b/keepassxc-browser/content/custom-fields-banner.js
@@ -91,7 +91,7 @@ kpxcCustomLoginFieldsBanner.create = async function() {
 
     const iconClassName = kpxc.isFirefox ? 'kpxc-banner-icon-moz' : 'kpxc-banner-icon';
     const icon = kpxcUI.createElement('span', iconClassName);
-    const infoText = kpxcUI.createElement('span', '', {}, tr('defineChooseCustomLoginFieldText'));
+    const infoText = kpxcUI.createElement('span', 'banner-info-text', {}, tr('defineChooseCustomLoginFieldText'));
     const separator = kpxcUI.createElement('div', 'kpxc-separator');
     const secondSeparator = kpxcUI.createElement('div', 'kpxc-separator');
 
@@ -544,7 +544,7 @@ kpxcCustomLoginFieldsBanner.markFields = function() {
         if (kpxcCustomLoginFieldsBanner.dataStep !== STEP_SELECT_STRING_FIELDS) {
             field.textContent = dataStepToString();
         }
-        
+
         // Static size for the checkbox overlay
         if (i?.getLowerCaseAttribute('type') === 'checkbox') {
             field.style.width = Pixels(CHECKBOX_OVERLAY_SIZE / zoom);
diff --git a/keepassxc-browser/css/banner.css b/keepassxc-browser/css/banner.css
index 797952d..31ee590 100644
--- a/keepassxc-browser/css/banner.css
+++ b/keepassxc-browser/css/banner.css
@@ -13,7 +13,7 @@ div.kpxc-banner {
     margin: 0 auto !important;
     min-height: 2em !important;
     max-height: 4em !important;
-    overflow-x: hidden !important;
+    overflow-x: auto !important;
     padding: 4px !important;
     position: fixed !important;
     width: 100% !important;
@@ -49,6 +49,10 @@ div.kpxc-banner .banner-info > span {
     margin: 4px;
 }
 
+div.kpxc-banner .banner-info-text {
+    text-wrap: nowrap;
+}
+
 div.kpxc-banner div.banner-info, div.banner-buttons {
     display: inline-flex;
     align-items: center;
@@ -113,6 +117,7 @@ div.kpxc-banner label {
     font-size: 12px !important;
     font-weight: normal !important;
     margin: 4px !important;
+    text-wrap: nowrap;
 }
 
 div.kpxc-banner-dialog {
diff --git a/keepassxc-browser/css/button.css b/keepassxc-browser/css/button.css
index e3b75de..bab56e7 100644
--- a/keepassxc-browser/css/button.css
+++ b/keepassxc-browser/css/button.css
@@ -8,6 +8,7 @@
     height: 28px !important;
     margin: .2em !important;
     padding: 1px 7px 2px !important;
+    text-wrap: nowrap;
 }
 
 .kpxc-white-button {