Make it run better in IE11

client/src/css/style.css

@@ -198,6 +198,7 @@ i[class*=' icon-']:before {
 .connect {
   display: flex;
   justify-content: center;
+  align-items: center;
   position: absolute;
   top: 0;
   width: 100%;
@@ -357,6 +358,10 @@ i[class*=' icon-']:before {
   line-height: 50px;
 }
 
+.chat-server .chat-title {
+  padding-right: 1px;
+}
+
 .chat-topic-wrap {
   flex: 1;
   position: relative;
@@ -573,6 +578,7 @@ i[class*=' icon-']:before {
 
 .settings {
   text-align: center;
+  overflow: auto;
 }
 
 .settings p {

client/src/js/components/ui/Editable.js

@@ -33,7 +33,8 @@ export default class Editable extends PureComponent {
       const padding =
         parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
       // Make sure the width is atleast 1px so the caret always shows
-      const width = stringWidth(value, style.font) || 1;
+      const width =
+        stringWidth(value, `${style.fontSize} ${style.fontFamily}`) || 1;
       return padding + width;
     }
   }
@@ -69,6 +70,12 @@ export default class Editable extends PureComponent {
     }
   };
 
+  handleFocus = e => {
+    const val = e.target.value;
+    e.target.value = '';
+    e.target.value = val;
+  };
+
   inputRef = el => {
     this.input = el;
   };
@@ -90,6 +97,7 @@ export default class Editable extends PureComponent {
         onBlur={this.handleBlur}
         onChange={this.handleChange}
         onKeyDown={this.handleKey}
+        onFocus={this.handleFocus}
         style={style}
         spellCheck={false}
       />

client/src/js/index.js

@@ -1,4 +1,5 @@
 import 'es6-promise/auto';
+import 'utils/ie11';
 import React from 'react';
 import { render } from 'react-dom';
 

client/src/js/utils/ie11.js

@@ -0,0 +1,12 @@
+if (Object.keys) {
+  try {
+    Object.keys('');
+  } catch (e) {
+    Object.keys = function(o, k, r) {
+      r = [];
+      // eslint-disable-next-line
+      for (k in o) r.hasOwnProperty.call(o, k) && r.push(k);
+      return r;
+    };
+  }
+}