--- a/src/iconolab/templates/iconolab/detail_image.html	Wed Mar 01 15:46:18 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html	Wed Mar 01 17:18:53 2017 +0100
@@ -81,14 +81,14 @@
           action="{% url 'annotation_edit' collection_name image_guid ':annotation_guid' %}">
           {% csrf_token %}
         </annotation-form>
+        <div class="annotation-comment-box" id="form-comment">
+          <comment-form v-if="annotation"></comment-form>
+        </div>
         <div style="display: none;" class="annotation-comment-list">
           <label class="small text-muted">Commentaires</label>
           <comment-list v-bind:annotation="annotation"
             fetch="{% url 'get_annotation_comments_json' ':annotation_guid' %}"></comment-list>
         </div>
-        <div class="annotation-comment-box" id="form-comment">
-          <comment-form v-if="annotation"></comment-form>
-        </div>
       </div>
     </div>
   </div>
@@ -242,4 +242,3 @@
 
 </script>
 {% endblock %}
-

--- a/src_js/iconolab-bundle/src/components/editor/Comment.vue	Wed Mar 01 15:46:18 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Comment.vue	Wed Mar 01 17:18:53 2017 +0100
@@ -1,16 +1,18 @@
 <template>
-    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
+    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:class="commentClass">
         <div class="comment-body">
             <strong class="comment-author">{{ username }}</strong>
             <div class="comment-content" v-html="commentFormatted"></div>
         </div>
         <div class="comment-footer">
-            <span v-show="!hover || !allowThread" class="comment-date">{{ dateFormatted }}</span>
-            <comment-form v-show="hover"
-                v-if="allowThread"
-                v-bind:annotation="annotation"
-                v-bind:reply-to="id"></comment-form>
+            <span class="comment-date">{{ dateFormatted }}</span>
         </div>
+
+        <comment-form v-show="hover"
+            v-if="allowThread"
+            v-bind:annotation="annotation"
+            v-bind:reply-to="id">
+        </comment-form>
     </div>
 </template>
 
@@ -40,6 +42,15 @@
             }
         },
         computed: {
+            commentClass: function(){
+              var c = [];
+
+              if (this.level > 0) {
+                c = [ "comment-thread" ]
+              }
+
+              return c;
+            },
             dateFormatted: function () {
 
               var date = moment(this.date); //.format("HH:mm DD/MM/YYYY");
@@ -57,9 +68,17 @@
 <style scoped>
 .comment {
     font-size: 12px;
-    padding: 5px 0;
+    padding: 10px 0;
     border-bottom: 1px solid #ccc;
 }
+
+.comment-thread {
+  border-bottom-width: 0px;
+  border-left: 3px solid #ccc;
+  padding-left: 10px;
+  margin-left: 10px;
+}
+
 .comment-author {
     float: left;
     margin-right: 4px;
@@ -68,7 +87,7 @@
 
 }
 .comment-footer {
-    margin-top: 5px;
+    margin-top: 0px;
     color: #ccc;
 }
 </style>

--- a/src_js/iconolab-bundle/src/components/editor/CommentList.vue	Wed Mar 01 15:46:18 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/CommentList.vue	Wed Mar 01 17:18:53 2017 +0100
@@ -46,8 +46,9 @@
 
 <style scoped>
 .wrapper {
-    max-height: 200px;
-    overflow-y: scroll;
+    /* max-height: 200px; */
+    height: auto;
+    overflow-y: auto;
 }
 .alert {
     padding: 10px;

--- a/src_js/iconolab-bundle/src/iconolab.scss	Wed Mar 01 15:46:18 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss	Wed Mar 01 17:18:53 2017 +0100
@@ -411,8 +411,8 @@
     .annotation-navigator-list {
         width: 20%;
         .panel {
-            max-height: 600px;
-            height: 600px;
+            max-height: 700px;
+            height: 700px;
             overflow-y: auto;
         }
         .list-group-item {
@@ -435,12 +435,17 @@
             }
         }
     }
+
     .annotation-navigator-canvas {
         width: 60%;
+        height: 700px;
         padding: 0 15px;
     }
+
     .annotation-navigator-panel {
         width: 20%;
+        height: 700px;
+
         display: flex;
         > div, .panel-body {
             display: flex;
@@ -448,22 +453,34 @@
         }
         .panel {
             margin-bottom: 0;
+            overflow-y: auto;
         }
         .panel-body {
             flex-direction: column;
-            justify-content: space-between;
+            // justify-content: space-between;
 
             > * {
-                flex: 1 1 auto;
+                // flex: 1 1 auto;
             }
+
+            .wrapper {
+              // border: 1px solid red;
+            }
+
             > *:last-child {
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
+                // display: flex;
+                // flex-direction: column;
+                // justify-content: flex-end;
             }
+
             .annotation-comment-box {
-                padding-top: 15px;
+                // padding-top: 15px;
+                // padding-bottom: 15px;
             }
+
+          .comment-form {
+              padding: 10px 0;
+          }
         }
     }
 }