bugfixing

main.js

@@ -80,6 +80,6 @@ function paint() {
 
 function adjustButtons(width) {
     paintButton.setPosition(width / 4 - Button.width, 25);
-    settings.setPosition(width / 2 - Button.width, 25);
-    clear.setPosition(width * 0.75 - Button.width, 25);
+    settings.setPosition(width / 2 - Button.width / 2, 25);
+    clear.setPosition(width * 0.75, 25);
 }

style.css

@@ -88,15 +88,15 @@ button:hover {
     width: 100%;
     outline: none;
     color: #555555;
-    -webkit-box-shadow: inset 0px -1px 0 #555555;
-    -moz-box-shadow: inset 0px -1px 0 #555555;
-    box-shadow: inset 0px -1px 0 #555555;
+    -webkit-box-shadow: inset 0px 0px 0 #555555;
+    -moz-box-shadow: inset 0px 0px 0 #555555;
+    box-shadow: inset 0px 0px 0 #555555;
     
-    -webkit-transition: box-shadow 0.2s;
-    -moz-transition: box-shadow 0.2s;
-    -ms-transition: box-shadow 0.2s;
-    -o-transition: box-shadow 0.2s;
-    transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s ease-in-out;
+    -moz-transition: box-shadow 0.2s ease-in-out;
+    -ms-transition: box-shadow 0.2s ease-in-out;
+    -o-transition: box-shadow 0.2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
 }
 
 .numericBox:focus {
@@ -111,7 +111,9 @@ button:hover {
     padding: 10px;
 }
 
-.form > div {
+.form > table {
+    table-layout: fixed;
+    border-spacing: 0;
     overflow: hidden;
     width: 100%;
     -webkit-transition: height 0.2s ease-in-out;
@@ -121,21 +123,18 @@ button:hover {
     transition: height 0.2s ease-in-out;
 }
 
-.form > div:not(:last-child) {
+.form > table:not(:last-child) {
     margin-bottom: 10px;
 }
 
-.form > div > div {
-    overflow: hidden;
-    height: 100%;
-    float: left;
+.form > table td {
+    vertical-align: center;
 }
 
-.form > div > div:nth-child(1) {
+.form > table td:nth-child(1) {
     width: 60%
 }
 
-.form > div > div:nth-child(2) {
+.form > table  td:nth-child(2) {
     width: 40%;
-    text-align: right;
 }

ui/editors/form.js

@@ -9,16 +9,17 @@ class Form extends UI {
         this._linesById = Object.create(null);
     }
     addLine(id, label, editor) {
-        let line = document.createElement("div");
-        let labelCell = document.createElement("div");
-        let editorCell = document.createElement("div");
+        let line = document.createElement("table");
+        let row = document.createElement("tr");
+        let labelCell = document.createElement("td");
+        let editorCell = document.createElement("td");
 
         labelCell.innerText = label;
         editorCell.appendChild(editor.element);
-        editor.element.style.float = "right";
 
-        line.appendChild(labelCell);
-        line.appendChild(editorCell);
+        row.appendChild(labelCell);
+        row.appendChild(editorCell);
+        line.appendChild(row);
 
         let obj = {
             id: id,

ui/editors/switchBox.js

@@ -66,7 +66,7 @@ class SwitchBox extends UI {
 
         this._iWidth = dw;
         this._iHeight = dh;
-        let circleDiameter = Math.round(dh * 0.75);
+        let circleDiameter = Math.round(dh * 0.70);
 
         this._input.style.width = dw + "px";
         this._input.style.height = dh + "px";