client/css: improve comment edit form background

If text area was bigger than the post, switching to preview mode
showed gray space under the text. Now the preview pane's background
should fill the whole edit box size.

3 files changed, 21 insertions, 20 deletions

diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl
index 4a9075c..aa12f11 100644
--- a/client/css/comment-control.styl
+++ b/client/css/comment-control.styl
@@ -13,13 +13,12 @@
             display: none
         .tabs-wrapper
             background: $active-tab-background-color
-        .tab
             padding: 0.3em
-            .comment-content-wrapper
-                background: $window-color
-                overflow: hidden
-                .comment-content
-                    margin: 1em
+        .tab-wrapper[data-tab='preview']
+            background: $window-color
+        .tab.preview
+            padding: 1em
+        .tab.edit
             textarea
                 resize: vertical
                 width: 100%
diff --git a/client/html/comment_form.tpl b/client/html/comment_form.tpl
index 5c60149..e5839ed 100644
--- a/client/html/comment_form.tpl
+++ b/client/html/comment_form.tpl
@@ -1,18 +1,18 @@
 <div class='tabs'>
     <form>
-        <div class='tabs-wrapper'><!--
-            --><div class='preview tab'><!--
-                --><div class='comment-content-wrapper'><!--
-                    --><div class='comment-content'><!--
-                        --><%= ctx.makeMarkdown(ctx.comment.text) %><!--
-                    --></div><!--
-                --></div><!--
-            --></div><!--
+        <div class='tabs-wrapper'><%
+            %><div class='tab-wrapper'><%
+                %><div class='preview tab'><%
+                    %><div class='comment-content'><%
+                        %><%= ctx.makeMarkdown(ctx.comment.text) %><%
+                    %></div><%
+                %></div><%
 
-            --><div class='edit tab'><!--
-                --><textarea required minlength=1><%- ctx.comment.text %></textarea><!--
-            --></div><!--
-        --></div>
+                %><div class='edit tab'><%
+                    %><textarea required minlength=1><%- ctx.comment.text %></textarea><%
+                %></div><%
+            %></div><%
+        %></div>
 
         <nav class='buttons'>
             <ul>
diff --git a/client/js/controls/comment_form_control.js b/client/js/controls/comment_form_control.js
index bef30ac..8a611c5 100644
--- a/client/js/controls/comment_form_control.js
+++ b/client/js/controls/comment_form_control.js
@@ -64,7 +64,7 @@ class CommentFormControl extends events.EventTarget {
 
     exitEditMode() {
         this._hostNode.classList.remove('editing');
-        this._hostNode.querySelector('.tabs-wrapper').style.minHeight = null;
+        this._hostNode.querySelector('.tab-wrapper').style.minHeight = null;
         views.clearMessages(this._hostNode);
         this.setText(this._comment.text);
     }
@@ -117,13 +117,15 @@ class CommentFormControl extends events.EventTarget {
 
     _selectTab(tabName) {
         this._freezeTabHeights();
+        const tabWrapperNode = this._hostNode.querySelector('.tab-wrapper');
+        tabWrapperNode.setAttribute('data-tab', tabName);
         for (let tab of this._hostNode.querySelectorAll('.tab, .buttons li')) {
             tab.classList.toggle('active', tab.classList.contains(tabName));
         }
     }
 
     _freezeTabHeights() {
-        const tabsNode = this._hostNode.querySelector('.tabs-wrapper');
+        const tabsNode = this._hostNode.querySelector('.tab-wrapper');
         const tabsHeight = tabsNode.getBoundingClientRect().height;
         tabsNode.style.minHeight = tabsHeight + 'px';
     }