Merge pull request #44 from BrambleXu/master

solve issue #43 for long selected text and delete button margin

app/server/static/css/annotation.css

@@ -150,6 +150,11 @@ body {
   white-space: pre-wrap;
 }
 
+.content .tagged-text {
+  white-space: unset;
+  height: auto;
+}
+
 :focus {
   outline: 0;
 }

app/server/static/css/forum.css

@@ -447,12 +447,9 @@ p {
   padding-bottom: 0.75rem;
 }
 
-.mrrem025 {
-  margin-right: 0.25rem;
-}
-
-.mlrem-0375 {
-  margin-left:-.375rem;
+.tweaked-margin {
+  margin-left: -0.4rem !important;
+  margin-right: 0.3rem !important;
 }
 
 /* Margin Auto */

app/server/static/js/sequence_labeling.js

@@ -8,7 +8,8 @@ Vue.use(require('vue-shortkey'), {
 
 Vue.component('annotator', {
   template: '<div @click="setSelectedRange">\
-                    <span v-for="r in chunks"\
+                    <span class="tagged-text"\
+                         v-for="r in chunks"\
                          v-if="id2label[r.label]"\
                          v-bind:class="{tag: id2label[r.label].text_color}"\
                          v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"\

app/server/templates/admin/label.html

@@ -21,7 +21,7 @@
         <div class="control" v-for="label in labels">
           <div class="tags has-addons">
             <span class="tag is-medium" v-bind:style="{ color: label.text_color, 'background-color': label.background_color }">
-              <button class="delete is-small mrrem025 mlrem-0375" @click="removeLabel(label)"></button>
+              <button class="delete is-small tweaked-margin" @click="removeLabel(label)"></button>
               [[ label.text ]]
             </span>
             <span class="tag is-medium">[[ label.shortcut ]]</span>