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) <noreply@anthropic.com>
This commit is contained in:
bbassieandClaude Opus 4.8 committed 2026-06-26 16:38:35 +00:00
1 parent 3fe0c85055
commit 2dedb44372
2 files changed
+10 -4

No files matched your search

@@ -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;
+7 -3
View File
@@ -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 {