Improve UI, fix issues with the table

customize.dist/src/cryptpad.less

@@ -359,7 +359,7 @@ tbody {
     cursor: pointer !important;
 }
 
-form.realtime {
+form.realtime, div.realtime {
     > input {
         &[type="text"] {
 
@@ -375,13 +375,13 @@ form.realtime {
 
     table {
         border-collapse: collapse;
-        width: calc(100% - 1px);
+        width: ~"calc(100% - 1px)";
         tr {
             td:first-child {
                 position:absolute;
                 left: 29px;
                 top: auto;
-                width: 400px;
+                width: ~"calc(30% - 50px)";
             }
             td {
                 padding: 0px;
@@ -390,9 +390,7 @@ form.realtime {
                 div.text-cell {
                     padding: 0px;
                     margin: 0px;
-                        height: 100%;
-
-                    width: 400px;
+                    height: 100%;
 
                     input {
                         width: 80%;
@@ -473,17 +471,57 @@ form.realtime {
         input {
             &[type="text"] {
                 height: 100%;
-                width: 70%;
-                border: 3px solid @base;
+                border: 1px solid @base;
+                width: 80%;
+            }
+        }
+        thead {
+            td {
+                padding: 0px 5px;
+                background: @less-light-base;
+                border-radius: 20px 20px 0 0;
+                input {
+                    &[type="text"] {
+                        width: 100%;
+                        box-sizing: border-box;
+                        &[disabled] {
+                            color: white;
+                            padding: 1px 5px;
+                        }
+                    }
+                }
+            }
+        }
+
+        tbody {
+            .text-cell {
+                background: @less-light-base;
+                //border-radius: 20px 0 0 20px;
+                input[type="text"] {
+                    width: ~"calc(100% - 50px)";
+                }
+                .edit {
+                    float:right;
+                    margin: 0 10px 0 0;
+                }
+                .remove {
+                    float: left;
+                    margin: 0 0 0 10px;
+                }
             }
         }
         .edit {
             color: @cp-green;
             cursor: pointer;
-            width: 10%;
-            font-size: 20px;
-            &:after { content: '✐'; }
-            &.editable { display: none; }
+            float: left;
+            margin-left: 10px;
+            /*&:after { content: '✐'; }*/
+            /*&.editable { display: none; }*/
+        }
+
+        .remove {
+            float: right;
+            margin-right: 10px
         }
 
         thead {

customize.dist/src/variables.less

@@ -1,5 +1,6 @@
 @base: #302B28;
 @light-base: lighten(@base, 20%);
+@less-light-base: lighten(@base, 10%);
 @fore: #fafafa;
 
 @cp-green: #46E981;