Skip to content

Investigate calc(100% + 1px) workaround in PlaygroundEditor #218

@johnleider

Description

@johnleider

Context

apps/playground/src/components/playground/editor/PlaygroundEditor.vue:97 carries a workaround:

```css
.playground-repl :deep(.editor-container) {
height: calc(100% + 1px) !important;
width: 100% !important;
}
```

The +1px was the originating trigger of the infinite-vertical-growth bug fixed in dd7fed8 / #217 — without overflow: hidden (or min-height: 0) on SplitterPanel, that 1px overflow forces the flex implied minimum size up, ResizeObservers feed back, and the workspace grows indefinitely.

The panel-side fix in #217 closes the loop, so this CSS is no longer load-bearing for the bug — but the +1px itself is still suspicious. It looks like a workaround for a Monaco scrollbar/border artifact that may no longer exist.

Tasks

  • Reproduce the original Monaco rendering issue this was hiding (likely a 1px gap between editor content and a border, or a phantom scrollbar at exact-fit heights)
  • Check current Monaco version's behavior — width: 100% !important is also suspect (Monaco usually self-sizes its container)
  • If the artifact no longer reproduces, drop the entire .editor-container :deep() block
  • If it does, document the why in a one-line comment so it can't be cleaned up reflexively next time

Why now

#217 makes SplitterPanel tolerant of overflow without clipping, so future consumers won't trip over the same loop. But this particular workaround predates the splitter fix and has no comment explaining its origin. Either remove it or annotate it — leaving it bare is technical debt that already cost us one production breakage.

Files

  • apps/playground/src/components/playground/editor/PlaygroundEditor.vue:96-99

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions