Make the compose box take less vertical space.

(imported from commit ca28485d3def93e9c8b3e4a257f05ff4fb74ea18)

templates/zephyr/compose.html

@@ -38,21 +38,26 @@
               </td>
             </tr>
             <tr>
-              <td class="message_picture"></td>
+              <td id="left-of-compose">
+                <div>
+                  <input type="file" id="file_input" class="notvisible pull-left" multiple />
+                  <a class="message-control-button icon-vector-paper-clip notdisplayed"
+                     id="attach_files" href="#" title="Attach files"></a><br />
+                  <a class="message-control-button icon-vector-font"
+                     href="#markdown-help" title="Formatting" data-toggle="modal"></a>
+                </div>
+              </td>
               <td class="pointer"></td>
               <td class="messagebox">
+
                 <div class="message_content">
                   <textarea class="new_message_textarea" name="content" id="new_message_content"
                             value="" placeholder="Compose your message here..." tabindex="140" maxlength="10000"></textarea>
                   <div id="send_controls">
-                    <a class="compose_help_text" href="#markdown-help" data-toggle="modal" tabindex="160">Formatting</a>
-                    <br />
                     <input type="submit" value="Send" id="compose-send-button" class="btn btn-primary send_message" tabindex="150"/>
                   </div>
                 </div>
                 <div id="below-compose-content">
-                  <input type="file" id="file_input" class="notvisible pull-left" multiple />
-                  <a class="message-control-button icon-vector-paper-clip notdisplayed" id="attach_files" href="#" title="Attach files"></a>
                   <a id="restore-draft" onclick="compose.restore_message();">Restore last draft?</a>
                   <span id="sending-indicator">Sending...</span>
                   <label class="pull-right inline">Press Enter to send&nbsp;

zephyr/static/styles/zephyr.css

@@ -523,6 +523,10 @@ blockquote p {
     margin-right: 0px;
 }
 
+#compose-send-button {
+    height: 31px; /* Same as height of compose textarea. */
+}
+
 #below-compose-content {
     display: table-row;
     font-size: 80%;
@@ -618,7 +622,7 @@ img.inline_profile_picture {
 textarea.new_message_textarea {
     display: table-cell;
     width: 99%;
-    min-height: 3em;
+    height: 1.5em;
     max-height: 11em;
     margin-bottom: 0px;
     resize: none;
@@ -639,10 +643,15 @@ input.recipient_box {
     width: 72%;
 }
 
+#left-of-compose {
+    vertical-align: top;
+    padding-top: 3px;
+}
+
 #send_controls {
     display: table-cell;
     vertical-align: bottom;
-    padding-left: 21px;
+    padding-left: 15px;
     /* jQuery's slideDown() animation seems to compute the target height by
        drawing these elements in an (offscreen) context where they would reflow
        onto multiple lines.  We need to prevent that in order to avoid an
@@ -654,10 +663,6 @@ input.recipient_box {
     width: 1%;
 }
 
-.compose_help_text {
-    font-size: 90%;
-}
-
 #navbar-spacer {
     /* A spacer that is exactly a navbar size, so that all content
     gets pushed unerneath it */
@@ -1187,7 +1192,7 @@ li.expanded_subject {
 }
 
 #compose a.message-control-button {
-    display: inline-block;
+    display: block;
     color: #777;
     text-decoration: none;
     font-size: 14px;
@@ -1196,7 +1201,7 @@ li.expanded_subject {
     margin-right: 5px;
     border-radius: 2px;
     text-align: center;
-    float: left;
+    float: right;
 }
 
 #compose a.message-control-button:hover {