From 2dedb443725e019ddbd0ddcfc76f3cdc2692b6f8 Mon Sep 17 00:00:00 2001 From: bbassie <17990055+bbassie@users.noreply.github.com> Date: Fri, 26 Jun 2026 16:38:35 +0000 Subject: [PATCH] Fix being unable to shrink the console after enlarging it The resize observer measured offsetHeight, which on the content-box console includes the pin-to-bottom padding-top. Feeding that back into the height (and thus the padding) meant the padding inflated the measured height, so the console could be enlarged but never dragged smaller again. Make the console border-box so its height already includes the padding and offsetHeight matches the dragged height, breaking the feedback. The default height is bumped to 600 so the rendered size stays the same as the previous content-box height + padding. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/web_ui/src/components/LogConsole.tsx | 4 +++- packages/web_ui/src/style.css | 10 +++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/web_ui/src/components/LogConsole.tsx b/packages/web_ui/src/components/LogConsole.tsx index 13332bc7..b6fad009 100644 --- a/packages/web_ui/src/components/LogConsole.tsx +++ b/packages/web_ui/src/components/LogConsole.tsx @@ -10,7 +10,9 @@ import ControlContext from "./ControlContext"; const { Paragraph } = Typography; const consoleHeightKey = "instance-console-height"; -const defaultConsoleHeight = 300; +// With border-box the height includes the pin-to-bottom padding, so this is the +// full rendered height (matching the previous content-box default of 300 + 300). +const defaultConsoleHeight = 600; type Parsed = { format: string; diff --git a/packages/web_ui/src/style.css b/packages/web_ui/src/style.css index d04ca110..6144066b 100644 --- a/packages/web_ui/src/style.css +++ b/packages/web_ui/src/style.css @@ -173,8 +173,12 @@ body { border-color: #252525; /* Height is driven by --console-height (set from the persisted user choice) so the console can be drag-resized; the resize handle needs a non-visible - overflow, which overflow-y: scroll provides. */ - height: var(--console-height, 300px); + overflow, which overflow-y: scroll provides. border-box keeps padding-top + inside the height so the resize-observer measurement (offsetHeight) does + not include it; otherwise the padding inflates the measured height and the + console can no longer be dragged smaller. */ + box-sizing: border-box; + height: var(--console-height, 600px); min-height: 100px; resize: vertical; overflow-y: scroll; @@ -183,7 +187,7 @@ body { /* Make sure there's at least one pixel of scroll space, this */ /* is necessary for the view to stick on the scroll anchor. Tracks the */ /* height so the pin-to-bottom keeps working at any size. */ - padding-top: var(--console-height, 300px); + padding-top: var(--console-height, 600px); } .instance-console .factorio-time {