only collapse empty comment box

app/assets/stylesheets/comments.css.scss

@@ -38,5 +38,5 @@
     width: 95%;
   }
   .comment_box { width: 95%; }
-  .comment_box:focus { min-height: 100px; }
+  .comment_box:focus, .comment_box:valid { min-height: 100px; }
 }

app/assets/stylesheets/new_styles/_forms.scss

@@ -87,11 +87,16 @@ form.block-form {
 }
 
 textarea, input[type=text], input[type=password], input[type=search] {
-  &:focus, &:invalid:focus {
+  &:focus, 
+  &:invalid,
+  &:invalid:focus,
+  &:invalid:required,
+  &:invalid:required:focus {
     border: 1px solid $border-dark-grey;
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
+    color : $text-dark-grey;
   }
 }
 

app/assets/templates/comment-stream_tpl.jst.hbs

@@ -20,7 +20,7 @@
 
     <div class="bd">
       <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
-        <textarea class="comment_box" id="comment_text_on_{{id}}" name="text" rows="2" placeholder="{{t "stream.comment"}}" />
+        <textarea class="comment_box" id="comment_text_on_{{id}}" name="text" rows="2" required placeholder="{{t "stream.comment"}}" />
         <div class="submit_button">
           <input class="button creation" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
         </div>