correctly displaying add sense, translation source and explanation

res/main.less

@@ -65,6 +65,7 @@
 
     .sense {
       margin-left: 2em;
+      overflow: auto; // contain all elements, some sort of clear: both for me
 
       .sense-definition {
         //done!
@@ -114,6 +115,20 @@
             color: @maroon;
             .translation-element-margin();
           }
+          .translation-source {
+            vertical-align: super;
+            font-size: 0.7em;
+          }
+          .translation-explanation:not(:empty) {
+            font-style: italic;
+
+            &:before {
+              content: '[';
+            }
+            &:after {
+              content: ']';
+            }
+          }
 
           ._hoverable();
         }
@@ -133,10 +148,18 @@
       .example-arrow, .example-dot {
         margin-right: 1em;
       }
+
+      .example-text {
+        ._hoverable();
+      }
     }
   }
 }
 
+.add-button {
+  padding: 0 .5em;
+}
+
 // if span left of input it is just too high, this is a fix
 .span-left-of-input {
   margin-top: 0.3em;