From f5b41a09d6b396c7058ff7a05b52993c355b7797 Mon Sep 17 00:00:00 2001
From: Timothy Allen <tim@treehouse.org.za>
Date: Sat, 26 Sep 2026 09:15:48 +0200
Subject: [PATCH] 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 | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

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;
+  }
+}