Merge pull request #2101 from bitwarden/responsive-notificationbar

Fully responsive notificationBar

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

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;