use textarea instead, improve width for better readability

Author: Ian Redpath

public/project/components/libraries/library.view.html

@@ -66,7 +66,7 @@ <h5 class="profile-header"><a [routerLink]='["/User", { user: comment.userId }]'
             <h6 class="timestamp">{{getCommentDate(comment.date)}} {{comment.edited ? '(edited)' : ''}}</h6>
 
             <div *ngIf="isEditingComment(comment._id)">
-              <input type="text" [(ngModel)]="editCommentText">
+              <textarea [(ngModel)]="editCommentText" class="comment-input"></textarea>
               <span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
               <button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
             </div>
@@ -78,7 +78,7 @@ <h6 class="timestamp">{{getCommentDate(comment.date)}} {{comment.edited ? '(edit
       </table>
     </div>
     <div *ngIf="userService.getActiveUser()" class="new-comment">
-      <input type="text" class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()">
+      <textarea class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()"></textarea>
       <button class="btn" (click)="addComment()">Comment!</button>
     </div>
   </div>

public/project/components/movies/movie.view.html

@@ -80,7 +80,7 @@ <h3 class="h4-margins">Comments</h3>
             <h5 class="profile-header"><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></h5>
             <h6 class="timestamp">{{getCommentDate(comment.date)}} {{comment.edited ? '(edited)' : ''}}</h6>
             <div *ngIf="isEditingComment(comment._id)">
-              <input type="text" [(ngModel)]="editCommentText">
+              <textarea [(ngModel)]="editCommentText" class="comment-input"></textarea>
               <span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
               <button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
             </div>
@@ -92,7 +92,7 @@ <h6 class="timestamp">{{getCommentDate(comment.date)}} {{comment.edited ? '(edit
       </table>
     </div>
     <div *ngIf="userService.getActiveUser()" class="new-comment">
-      <input type="text" class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()">
+      <textarea class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()"></textarea>
       <button class="btn" (click)="addComment()">Comment!</button>
     </div>
   </div>

public/project/css/style.css

@@ -202,4 +202,7 @@
 .comments-row > td {
 	padding-bottom: .5em;
 	padding-top: .5em;
+}
+.comment-input {
+	width:50%;
 }