diff --git a/src/notification/bar.js b/src/notification/bar.js index b4d658577e..ce504b6e23 100644 --- a/src/notification/bar.js +++ b/src/notification/bar.js @@ -3,7 +3,7 @@ require('./bar.scss'); document.addEventListener('DOMContentLoaded', () => { var i18n = {}; var lang = window.navigator.language; - + i18n.appName = chrome.i18n.getMessage('appName'); i18n.close = chrome.i18n.getMessage('close'); i18n.yes = chrome.i18n.getMessage('yes'); @@ -100,12 +100,8 @@ document.addEventListener('DOMContentLoaded', () => { }); }); - sendPlatformMessage({ - command: 'bgAdjustNotificationBar', - data: { - height: body.scrollHeight - } - }); + window.addEventListener("resize", adjustHeight); + adjustHeight(); } function getQueryVariable(variable) { @@ -145,4 +141,13 @@ document.addEventListener('DOMContentLoaded', () => { select.appendChild(new Option(folder.name, folder.id || '', false)); }); } + + function adjustHeight() { + sendPlatformMessage({ + command: 'bgAdjustNotificationBar', + data: { + height: document.querySelector('body').scrollHeight + } + }); + } }); diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 3d1e9bdb16..6982a3a91f 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -13,29 +13,19 @@ padding: 0 10px; border-bottom: 2px solid #175ddc; display: grid; - grid-template-columns: 1fr auto 1fr; - column-gap: 10px; + grid-template-columns: 24px auto 55px; grid-column-gap: 10px; box-sizing: border-box; - height: 42px; -} - -.outer-wrapper > * { - align-self: center; + min-height: 42px; } .inner-wrapper { display: grid; - grid-template-columns: 2fr 1fr; - column-gap: 10px; - grid-column-gap: 10px; + grid-template-columns: auto max-content; } -#content .change-buttons { - justify-self: end; -} -.wrapper > *, .inner-wrapper > * { +.outer-wrapper > *, .inner-wrapper > * { align-self: center; } @@ -87,17 +77,6 @@ button.neutral { } } -body[class*='lang-en'] .add-buttons { - width: 175px; - text-align: right; -} - -@media (min-width: 768px) { - body[class*='lang-en'] .add-buttons { - width: 420px; - } -} - @media (print) { body { display: none;