Merge pull request #948 from biigle/fix-long-lt-description

Fix overflowing long labeltree description

resources/assets/js/projects/components/labelTreeListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="list-group-item" @mouseenter="emitEnter">
+    <li class="list-group-item limit-text" @mouseenter="emitEnter">
         <h4 class="list-group-item-heading">
             <button v-if="editable" v-show="editing" type="button" class="btn btn-default btn-sm pull-right" title="Detach this label tree" @click="emitRemove"><i class="fa fa-trash"></i></button>
             <a :href="url" v-text="tree.name"></a>

resources/assets/sass/_search.scss

@@ -15,6 +15,7 @@
 .search-results {
     list-style: none;
     padding: 0;
+    word-wrap: break-word;
 
     > li {
         padding: 1.5em 0;

resources/assets/sass/bootstrap/_labels.scss

@@ -56,3 +56,7 @@ h3, .h3 {
     font-size: 65%;
   }
 }
+
+.limit-text{
+  word-wrap: break-word;
+}

resources/views/label-trees/show/title.blade.php

@@ -48,15 +48,15 @@
                 <input class="hidden" type="submit" name="submit">
             </div>
         </form>
-        <h2 v-else>
+        <h2 v-else class="limit-text">
             <span v-text="name">{{$tree->name}}</span>
             <small class="label label-default label-hollow" @if(!$private) v-cloak @endif title="This label tree is private" v-if="isPrivate">Private</small>
             <span v-if="hasDescription" @if(!$tree->description) v-cloak @endif>
                 <br><small v-text="description">{{$tree->description}}</small>
             </span>
         </h2>
     @else
-        <h2>
+        <h2 class="limit-text">
             {{$tree->name}}
             @if ($private)
                 <small class="label label-default label-hollow" title="This label tree is private">Private</small>