Fix layout issues with banners

This commit is contained in:
varjolintu 2025-11-17 17:01:33 +02:00
parent b1b6581d50
commit 813b245d89
4 changed files with 10 additions and 4 deletions

View file

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

View file

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

View file

@ -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 {

View file

@ -8,6 +8,7 @@
height: 28px !important;
margin: .2em !important;
padding: 1px 7px 2px !important;
text-wrap: nowrap;
}
.kpxc-white-button {