Fix layout issues with banners

Author: varjolintu

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);
 

keepassxc-browser/content/custom-fields-banner.js

@@ -95,7 +95,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');
 
@@ -594,7 +594,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);

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 {

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 {