Keep the space of the line-break note under the image box.

An invisible copy of the note sits under the image box, so the page
does not jump when the tabs change.

publish/style.css

@@ -146,8 +146,10 @@ div.note {
  * that the box keeps its size when the tabs change: at most 450px wide,
  * and 337px high. That is the 300px writing area, the 35px toolbar (26px
  * buttons, 1px margins, 3px padding and a 1px line) and the 2px border.
+ * An invisible copy of the note under the editor takes the same space
+ * under the box.
  */
-#uploadparent {
+#uploadparent > .upload {
   box-sizing: border-box;
   width: 100%;
   max-width: 450px;
@@ -155,11 +157,13 @@ div.note {
   overflow: auto;
   border: 1px solid #b8c9be;
   border-radius: 8px;
-  margin-bottom: 10px;
 }
-#uploadparent>div {
+#uploadparent > .upload > div {
   padding: 10px;
 }
+#uploadparent > .spacer {
+  visibility: hidden;
+}
 
 .yes {
   font-weight: bold;
@@ -336,7 +340,7 @@ ul.error-box li {
   }
   /* On a phone the editor toolbar wraps onto two lines of 42px (40px
      buttons and 1px margins), so the editor is 393px high */
-  #uploadparent {
+  #uploadparent > .upload {
     max-width: none;
     height: 393px;
   }
@@ -396,7 +400,7 @@ ul.error-box li {
  * (300px), so it wraps onto three lines and the editor is 435px high.
  */
 @media (max-width: 345px) {
-  #uploadparent {
+  #uploadparent > .upload {
     height: 435px;
   }
 }

publish/write.inc.php

@@ -50,14 +50,16 @@ if (count($validate) !== 0) {
   <span id="uploadtab" class="tab<?= isset($validate['upload']) ? ' red' : '' ?>" onclick="showHide('upload');">Image:</span>
   <span id="wordcounter" class="counter" style="display: none;">0 words</span>
 </div>
+<?php $line_break_note = '(To get line-breaks&mdash;as in poetry&mdash;instead of paragraph breaks, hit shift-enter instead of enter.)'; ?>
 <div class="textarea rightcolumn">
   <div id="textparent">
     <textarea name="story" id="story" rows="20" cols="50"><?php 
 echo (isset($story) ? form_value($story) : '')
   ?></textarea>
-    <div class="note">(To get line-breaks&mdash;as in poetry&mdash;instead of paragraph breaks, hit shift-enter instead of enter.)</div>
+    <div class="note"><?= $line_break_note ?></div>
   </div>
-  <div class="upload" id="uploadparent" style="display: none;"><div>
+  <div id="uploadparent" style="display: none;">
+  <div class="upload"><div>
 <?php 
 if (isset($file_src) || isset($img)) {
   if (isset($file_src)) {
@@ -85,6 +87,9 @@ if (isset($file_src) || isset($img)) {
 }
 ?>
   </div></div>
+  <!-- An invisible copy of the note under the story keeps the page height -->
+  <div class="note spacer" aria-hidden="true"><?= $line_break_note ?></div>
+  </div>
 </div>
 
 <?php  if ($is_admin) { ?>