Improve settings dialog appearance in Firefox and Safari.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {

package.json

@@ -192,11 +192,11 @@
           </div>
         </div>
         <div class="dialog-buttons">
-          <span class="version-number">1.0.8</span>
+          <span class="version-number">1.0.9</span>
           <button id="settings-reload">Reload</button>
           <span>&bull;</span>
           <button id="settings-cancel">Cancel</button>
-          <button id="settings-ok">OK</button>
+          <button id="settings-ok">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
         </div>
       </div>
     </div>

src/index.html

@@ -21,7 +21,7 @@ import * as $ from 'jquery';
 import { domAlert, htmlEncode, popKeydownListener, pushKeydownListener } from './util';
 import { Settings } from './settings';
 import { AppService } from './app.service';
-import { isIE } from 'ks-util';
+import { isIE, isSafari } from 'ks-util';
 
 const ERROR_BACKGROUND = '#FCC';
 const WARNING_BACKGROUND = '#FFC';
@@ -133,12 +133,13 @@ export class SettingsDialog {
     });
 
     if (isIE()) {
-      const userOptions = $('.user-options');
-
-      userOptions.children().each(function() {
+      $('.user-options').children().each(function() {
         $(this).css('margin', '0 4px 4px 0');
       });
     }
+    else if (isSafari()) {
+      $('.user-options').css('grid-row-gap', '0');
+    }
   }
 
   private doSearch(): void {

src/settings-dialog.ts

@@ -226,11 +226,12 @@ body {
   display: grid;
   -ms-grid-columns: max-content auto auto;
   grid-template-columns: max-content auto auto;
-  grid-gap: 4px;
+  grid-column-gap: 4px;
+  grid-row-gap: 3px;
 
   &>* {
     -ms-grid-row-align: center;
-    align-self: baseline;
+    align-self: center;
     display: block; // Needed to make IE grid layout work
   }