Give the image box the size of the story editor.

The box is 450px wide and 337px high, as the editor is. On phones it
takes the full width and the editor's height with a wrapped toolbar.

publish/style.css

@@ -41,9 +41,6 @@ input[type=checkbox] {
   padding-right: 20px;
 }
 
-#main .grid #uploadparent  {
-  min-height: 300px;
-}
 #main .grid #textparent {
   min-height: 200px;
 }
@@ -144,8 +141,18 @@ div.note {
   font-size: 11pt;
 }
 
+/*
+ * The image box has the size of the story editor (publish/editor.css), so
+ * 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.
+ */
 #uploadparent {
-  height: 200px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 450px;
+  height: 337px;
+  overflow: auto;
   border: 1px solid #b8c9be;
   border-radius: 8px;
   margin-bottom: 10px;
@@ -327,12 +334,11 @@ ul.error-box li {
   #main .grid #textparent {
     min-height: 0;
   }
+  /* On a phone the editor toolbar wraps onto two lines of 42px (40px
+     buttons and 1px margins), so the editor is 393px high */
   #uploadparent {
-    height: auto;
+    max-width: none;
-    min-height: 200px;
+    height: 393px;
-  }
-  #main .grid #uploadparent {
-    min-height: 200px;
   }
   #uploadparent input[type=file] {
     box-sizing: border-box;
@@ -384,3 +390,13 @@ ul.error-box li {
     margin: 4px 0 4px 10px;
   }
 }
+
+/*
+ * Below 346px the editor toolbar is narrower than its first three groups
+ * (300px), so it wraps onto three lines and the editor is 435px high.
+ */
+@media (max-width: 345px) {
+  #uploadparent {
+    height: 435px;
+  }
+}