diff --git a/publish/style.css b/publish/style.css
index 8500dcf..cb19f69 100644
--- a/publish/style.css
+++ b/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;
-    min-height: 200px;
-  }
-  #main .grid #uploadparent {
-    min-height: 200px;
+    max-width: none;
+    height: 393px;
   }
   #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;
+  }
+}