🐛 fix IE11 bugs and styles (#724)

closes TryGhost/Ghost#8384

- fixes image uploads on settings/general by reverting to jQuery for triggering the file dialog because IE11 doesn't support `MouseEvent` events or have the `.closest` method on native DOM elements
- gives all SVG elements an explicit `width` and `height` - if one property is set to `auto` or not specified IE11 will treat it as 100% of the container
- fixes horizontal scroll + scrollbar on the main app viewport

app/controllers/settings/general.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import Controller from 'ember-controller';
 import computed from 'ember-computed';
 import injectService from 'ember-service/inject';
@@ -102,23 +103,18 @@ export default Controller.extend({
          * @param  {MouseEvent} event - MouseEvent fired by the button click
          */
         triggerFileDialog(event) {
-            let fileInput = event.target
+            let fileInput = $(event.target)
                 .closest('.gh-setting')
-                .querySelector('input[type="file"]');
-
-            if (fileInput) {
-                let click = new MouseEvent('click', {
-                    view: window,
-                    bubbles: true,
-                    cancelable: true
-                });
+                .find('input[type="file"]');
 
+            if (fileInput.length > 0) {
                 // reset file input value before clicking so that the same image
                 // can be selected again
                 fileInput.value = '';
 
                 // simulate click to open file dialog
-                fileInput.dispatchEvent(click);
+                // using jQuery because IE11 doesn't support MouseEvent
+                $(fileInput).click();
             }
         },
 

app/styles/components/modals.css

@@ -89,14 +89,14 @@
     margin: 0;
     padding: 0;
     width: 16px;
-    height: auto;
+    height: 16px;
     border: none;
 }
 
 .modal-content .close svg {
     fill: #808284;
     width: 16px;
-    height: auto;
+    height: 16px;
 }
 
 .modal-content .close svg:hover {

app/styles/components/notifications.css

@@ -60,7 +60,7 @@
 
 .gh-notification-close svg {
     height: 7px;
-    width: auto;
+    width: 7px;
 }
 
 .gh-notification-close:hover {

app/styles/components/power-select.css

@@ -6,7 +6,7 @@
 
 .ember-power-select-trigger svg {
     height: 4px;
-    width: auto;
+    width: 4px;
     margin-left: 2px;
     vertical-align: middle;
 }

app/styles/components/publishmenu.css

@@ -9,7 +9,7 @@
 
 .gh-publishmenu-trigger svg {
     height: 8px;
-    width: auto;
+    width: 8px;
 }
 
 .gh-publishmenu-trigger svg path {
@@ -190,6 +190,7 @@
 }
 
 .gh-date-time-picker-date svg {
+    width: 14px;
     height: 14px;
     fill: color(var(--midgrey) l(+15%));
 }

app/styles/components/settings-menu.css

@@ -97,7 +97,7 @@
 
 .settings-menu-header.subview .back svg {
     height: 14px;
-    width: auto;
+    width: 14px;
 }
 
 .settings-menu-header.subview .back svg path {

app/styles/components/uploader.css

@@ -55,7 +55,7 @@
 .gh-image-uploader .image-cancel svg {
     fill: #fff;
     height: 13px;
-    width: auto;
+    width: 13px;
 }
 
 .gh-image-uploader .upload-form {

app/styles/layouts/auth.css

@@ -38,9 +38,9 @@
     border-radius: 0;
 }
 .forgotten-link span {
-    height: 24px;
+    height: 20px;
     font-size: 1.1rem;
-    line-height: 24px;
+    line-height: 20px;
     padding: 0 11px 0 12px;
 }
 

app/styles/layouts/editor.css

@@ -98,7 +98,7 @@
 .post-view-link svg {
     display: inline;
     height: 10px;
-    width: auto;
+    width: 10px;
     fill: var(--blue);
 }
 

app/styles/layouts/main.css

@@ -36,6 +36,8 @@ body > .ember-view:not(.default-liquid-destination) {
     display: flex;
     background: #fff;
     overflow-y: auto;
+    /* prevent horizontal scroll in IE11 */
+    overflow-x: hidden;
 }
 
 /*  Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */
@@ -540,6 +542,7 @@ body > .ember-view:not(.default-liquid-destination) {
 }
 
 .gh-canvas-title svg {
+    width: 0.6em;
     height: 0.6em;
     margin: 0 10px;
 }

app/styles/layouts/settings.css

@@ -161,7 +161,7 @@
 
 .gh-blognav-grab svg {
     width: 16px;
-    height: auto;
+    height: 16px;
     fill: color(var(--midgrey) l(+15%));
 }
 
@@ -188,7 +188,7 @@
 .gh-blognav-delete svg {
     fill: color(var(--midgrey) l(+15%));
     height: 14px;
-    width: auto;
+    width: 14px;
     transition: fill 0.1s linear;
 }
 

app/styles/layouts/subscribers.css

@@ -35,7 +35,7 @@
 
 .subscribers-table table .gh-btn svg {
     height: 13px;
-    width: auto;
+    width: 13px;
 }
 
 .subscribers-table table tr:hover .gh-btn {

app/styles/layouts/user.css

@@ -11,7 +11,7 @@
 
 .user-actions-cog svg {
     height: 13px;
-    width: auto;
+    width: 13px;
     fill: var(--midgrey);
     margin-right: 0;
 }

app/styles/patterns/forms.css

@@ -98,7 +98,7 @@ input {
     left: 10px;
     z-index: 2;
     height: 14px;
-    width: auto;
+    width: 14px;
     fill: color(var(--midgrey) l(+15%));
     transform: translateY(-7px);
 }
@@ -290,7 +290,7 @@ textarea {
 
 .gh-select svg {
     height: 8px;
-    width: auto;
+    width: 8px;
     position: absolute;
     top: 50%;
     right: 1.2rem;

app/styles/patterns/navlist.css

@@ -69,7 +69,7 @@
     right: 10px;
     margin-top: -0.9rem;
     height: 1.4rem;
-    width: auto;
+    width: 1.4rem;
 }
 
 .nav-list-item svg path {