adjust notification bar for small/zoomed screens

src/notification/bar.css

@@ -79,3 +79,13 @@ button.link {
         background: none;
         text-decoration: underline;
     }
+
+.add-buttons {
+    width: 175px;
+}
+
+@media (min-width: 768px) {
+    .add-buttons {
+        width: 320px;
+    }
+}

src/notification/bar.html

@@ -28,7 +28,7 @@
             <tbody>
                 <tr>
                     <td class="add-text"></td>
-                    <td align="right" width="320">
+                    <td align="right" class="add-buttons">
                         <button class="never-save link"></button>
                         <button class="add-save"></button>
                     </td>

src/notification/bar.js

@@ -5,8 +5,16 @@
     // i18n
     $('#logo-link').attr('title', chrome.i18n.getMessage('appName'));
     closeButton.attr('title', chrome.i18n.getMessage('close'));
-    $('#template-add .add-save').text(chrome.i18n.getMessage('notificationAddSave'));
-    $('#template-add .never-save').text(chrome.i18n.getMessage('notificationNeverSave'));
+
+    if (window.innerWidth < 768) {
+        $('#template-add .add-save').text(chrome.i18n.getMessage('yes'));
+        $('#template-add .never-save').text(chrome.i18n.getMessage('never'));
+    }
+    else {
+        $('#template-add .add-save').text(chrome.i18n.getMessage('notificationAddSave'));
+        $('#template-add .never-save').text(chrome.i18n.getMessage('notificationNeverSave'));
+    }
+
     $('#template-add .add-text').text(chrome.i18n.getMessage('notificationAddDesc'));
 
     if (getQueryVariable('add')) {
@@ -42,6 +50,13 @@
         });
     });
 
+    chrome.runtime.sendMessage({
+        command: 'bgAdjustNotificationBar',
+        data: {
+            height: document.body.scrollHeight
+        }
+    });
+
     function getQueryVariable(variable) {
         var query = window.location.search.substring(1);
         var vars = query.split('&');