Removed weird chromium hack and used a flex

static/css/style.css

@@ -137,6 +137,7 @@ body {
     border-color: var(--border-color);
     border-width: 0px;
     border-top-width: 1px;
+    display: flex;
 }
 
 .bottomBar button {
@@ -157,7 +158,10 @@ body {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 55%;
-    transform: translateY(-5px);
+}
+
+.bottomBar .textManipulator {
+    margin-left: auto;
 }
 
 .bottomBar button:hover {
@@ -178,6 +182,7 @@ body {
 
     background-color: var(--bar);
 
+
     border: solid;
     border-color: var(--border-color);
     border-width: 1px;
@@ -646,12 +651,3 @@ body {
 .links a:hover {
     text-decoration: dashed;
 }
-
-@supports (-webkit-appearance: none) {
-  .bottomBar .removeButton {
-      transform: translateY(0px);
-  }
-  .bottomBar .wordCounter {
-      transform: translateY(-9px);
-  }
-}

templates/app.html

@@ -18,10 +18,12 @@
 
     <div class="bottomBar">
         <button id="removeBox" class="removeButton"></button>
-        <button id="wordCountBox" class="wordCounter">0 words</button>
+        <button id="wordCountBox">0 words</button>
-        <button id="textMinusBox" class="right">-</button>
+        <div class="textManipulator">
-        <button id="textSizeBox" class="right">16px</button>
+            <button id="textMinusBox">-</button>
-        <button id="textPlusBox" class="right">+</button>
+            <button id="textSizeBox">16px</button>
+            <button id="textPlusBox">+</button>
+        </div>
     </div>
 
     <div id="notesBar" class="notesBar">