css: adjust form input box sizes.

Adjust input boxes to fit the screen better on mobile, and to use
consistent sizes throughout the site (no ad-hoc overrides to make
certain input boxes a bit bigger in random places).

On desktop, this makes most input boxes a bit taller and narrower. On
mobile, it makes input boxes the full width of the screen.

This most notably affects the tag edit box, the comment and forum
post box, the wiki page edit box, and the commentary box.

app/javascript/src/javascripts/post_mode_menu.js

@@ -124,12 +124,6 @@ PostModeMenu.open_edit = function(post_id) {
   $("#quick-edit-div").slideDown("fast");
   $("#quick-edit-form").attr("data-post-id", post_id);
   $("#post_tag_string").val($post.data("tags") + " ").focus().selectEnd();
-
-  /* Set height of tag edit box to fit content. */
-  $("#post_tag_string").height(80); // min height: 80px.
-  var padding = $("#post_tag_string").innerHeight() - $("#post_tag_string").height();
-  var height = $("#post_tag_string").prop("scrollHeight") - padding;
-  $("#post_tag_string").height(height);
 }
 
 PostModeMenu.click = function(e) {

app/javascript/src/styles/common/simple_form.scss

@@ -31,12 +31,17 @@ form.simple_form {
     margin-bottom: 1em;
 
     input[type=text], input[type=file], input[type=password], input[type=email] {
-      max-width: 20em;
+      width: 100%;
+      max-width: 25em;
     }
 
     .hint {
       @extend .fineprint;
       padding-left: 1em;
+
+      @media (max-width: 660px) {
+        display: none;
+      }
     }
 
     input.validation-error {
@@ -48,10 +53,20 @@ form.simple_form {
         padding-left: 0;
         display: block;
       }
+
+      textarea {
+        width: 100%;
+        max-width: 60rem;
+        max-height: 15rem;
+
+        &.text  { height: 20vh; }
+        &.dtext { height: 40vh; }
+      }
     }
 
-    textarea {
-      width: 70%;
+    select[multiple] {
+      height: 20vh;
+      max-height: 15rem;
     }
 
     label {
@@ -80,6 +95,7 @@ form.simple_form {
 
 form.inline-form {
   display: table;
+  width: 100%;
 
   > div.input {
     display: table-row;
@@ -87,12 +103,13 @@ form.inline-form {
 
     label {
       text-align: right;
+      padding-right: 1em;
+      white-space: nowrap;
+      width: 1%;
     }
 
     label, input {
       display: table-cell;
-      padding-right: 1em;
-      white-space: nowrap;
       line-height: 1em;
     }
   }

app/javascript/src/styles/specific/posts.scss

@@ -155,10 +155,6 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
-    #edit textarea {
-      width: 100%;
-    }
-
     #favlist {
       word-wrap: break-word;
     }
@@ -188,14 +184,6 @@ div#c-posts {
       }
     }
   }
-
-  div#quick-edit-div {
-    textarea {
-      width: 70%;
-      height: 4em;
-      display: block;
-    }
-  }
 }
 
 body[data-post-current-image-size="large"] #post-options .image-view-large-link,
@@ -253,6 +241,8 @@ div#c-posts, div#c-uploads {
 
 /* Container for the tag edit <textarea>, header, and related tags buttons. */
 #tags-container {
+  max-width: 60rem;
+
   div.header {
     line-height: 1.5em;
 
@@ -277,18 +267,3 @@ div#c-posts, div#c-uploads {
     }
   }
 }
-
-#add-commentary-dialog {
-  input {
-    width: 70%;
-  }
-
-  input[type=checkbox] {
-    width: auto;
-  }
-
-  textarea {
-    font-size: 1em;
-    width: 100%;
-  }
-}