From 9462d89bcda03367236d522918ade5813f624bde Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Fri, 4 Sep 2026 22:04:42 +0200
Subject: [PATCH 1/5] Developer playground: Make panes resizable with wrapping
 text

---
 packages/dev-playground/package.json          |   2 +-
 .../scripts/pane-layout.test.mjs              |  64 +++++
 packages/dev-playground/src/Bindings.res      |  48 +++-
 packages/dev-playground/src/Main.res          | 267 +++++++++++++++---
 packages/dev-playground/src/PaneLayout.res    | 175 ++++++++++++
 .../dev-playground/src/SourceHighlight.res    |  42 ++-
 .../dev-playground/src/SourceHighlight.resi   |   2 +-
 packages/dev-playground/src/styles.css        | 192 ++++++++-----
 8 files changed, 670 insertions(+), 122 deletions(-)
 create mode 100644 packages/dev-playground/scripts/pane-layout.test.mjs
 create mode 100644 packages/dev-playground/src/PaneLayout.res

diff --git a/packages/dev-playground/package.json b/packages/dev-playground/package.json
index 7e93f5ffee..e9f0c2b630 100644
--- a/packages/dev-playground/package.json
+++ b/packages/dev-playground/package.json
@@ -9,7 +9,7 @@
     "prepare-pages-site": "node scripts/prepare-pages-site.mjs",
     "res:build": "rescript",
     "res:watch": "rescript -w",
-    "test": "rescript && node --test scripts/source-map-navigation.test.mjs",
+    "test": "rescript && node --test scripts/source-map-navigation.test.mjs scripts/pane-layout.test.mjs",
     "dev": "vite --host 127.0.0.1",
     "build": "rescript && vite build",
     "preview": "vite preview --host 127.0.0.1"
diff --git a/packages/dev-playground/scripts/pane-layout.test.mjs b/packages/dev-playground/scripts/pane-layout.test.mjs
new file mode 100644
index 0000000000..b486856bbf
--- /dev/null
+++ b/packages/dev-playground/scripts/pane-layout.test.mjs
@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  current,
+  finishDrag,
+  make,
+  moveDrag,
+  nudge,
+  orientationForWidth,
+  ratioForPosition,
+  setOrientation,
+  startDrag,
+} from "../src/PaneLayout.res.mjs";
+
+const closeTo = (actual, expected) =>
+  assert.ok(
+    Math.abs(actual - expected) < 0.000001,
+    `${actual} is not close to ${expected}`,
+  );
+
+test("switches to stacked panes from the container width", () => {
+  assert.equal(orientationForWidth(901), "Columns");
+  assert.equal(orientationForWidth(900), "Rows");
+});
+
+test("calculates a divider ratio and respects both pane minimums", () => {
+  closeTo(ratioForPosition(500, 1000, 360, 420), 0.5);
+  closeTo(ratioForPosition(0, 1000, 360, 420), 360 / 992);
+  closeTo(ratioForPosition(1000, 1000, 360, 420), 1 - 420 / 992);
+  closeTo(ratioForPosition(100, 300, 180, 180), 0.5);
+});
+
+test("keeps drag and ratio state isolated between layout instances", () => {
+  const first = make();
+  const second = make();
+
+  assert.notEqual(first.containerId, second.containerId);
+  startDrag(first, 7, 600, 1000, 360, 420);
+
+  assert.equal(current(first).dragging, true);
+  assert.equal(current(second).dragging, false);
+  assert.equal(current(second).columnRatio, 0.5);
+
+  const draggedRatio = current(first).columnRatio;
+  moveDrag(first, 8, 450);
+  assert.equal(current(first).columnRatio, draggedRatio);
+  finishDrag(first, 8);
+  assert.equal(current(first).dragging, true);
+  finishDrag(first, 7);
+  assert.equal(current(first).dragging, false);
+});
+
+test("stores independent ratios for columns and stacked rows", () => {
+  const layout = make();
+
+  nudge(layout, 0.025, 1000, 360, 420);
+  closeTo(current(layout).columnRatio, 0.525);
+
+  setOrientation(layout, orientationForWidth(600));
+  nudge(layout, -0.025, 800, 180, 180);
+  closeTo(current(layout).columnRatio, 0.525);
+  closeTo(current(layout).rowRatio, 0.475);
+});
diff --git a/packages/dev-playground/src/Bindings.res b/packages/dev-playground/src/Bindings.res
index b20bb78dae..3984c9607b 100644
--- a/packages/dev-playground/src/Bindings.res
+++ b/packages/dev-playground/src/Bindings.res
@@ -114,7 +114,13 @@ module Url = {
 
 module Event = {
   @get external target: Dom.event => {..} = "target"
+  @get external currentTarget: Dom.event => Dom.element = "currentTarget"
   @get external key: Dom.event => string = "key"
+  @get external button: Dom.event => int = "button"
+  @get external clientX: Dom.event => float = "clientX"
+  @get external clientY: Dom.event => float = "clientY"
+  @get external pointerId: Dom.event => int = "pointerId"
+  @get external detail: Dom.event => int = "detail"
   @send external preventDefault: Dom.event => unit = "preventDefault"
 
   let value = (event: Dom.event): string => (event->target)["value"]
@@ -129,11 +135,6 @@ module Event = {
     let scrollTop: float = (event->target)["scrollTop"]
     scrollTop->Math.round->Float.toInt
   }
-
-  let scrollLeft = (event: Dom.event): int => {
-    let scrollLeft: float = (event->target)["scrollLeft"]
-    scrollLeft->Math.round->Float.toInt
-  }
 }
 
 module EventTarget = {
@@ -160,6 +161,20 @@ type scrollIntoViewOptions = {
   inline: string,
 }
 
+type boundingRect = {
+  left: float,
+  top: float,
+  width: float,
+  height: float,
+}
+
+type classList
+
+module ClassList = {
+  @send external add: (classList, string) => unit = "add"
+  @send external remove: (classList, string) => unit = "remove"
+}
+
 module Element = {
   @send external setAttribute: (Dom.element, string, string) => unit = "setAttribute"
   @send
@@ -170,6 +185,15 @@ module Element = {
   @send external appendChild: (Dom.element, Dom.element) => unit = "appendChild"
   @send external removeChild: (Dom.element, Dom.element) => unit = "removeChild"
   @send external focus: Dom.element => unit = "focus"
+  @send external setPointerCapture: (Dom.element, int) => unit = "setPointerCapture"
+  @send external releasePointerCapture: (Dom.element, int) => unit = "releasePointerCapture"
+  @send external hasPointerCapture: (Dom.element, int) => bool = "hasPointerCapture"
+  @send external getBoundingClientRect: Dom.element => boundingRect = "getBoundingClientRect"
+  @get external classList: Dom.element => classList = "classList"
+  @send @return(nullable)
+  external querySelector: (Dom.element, string) => option<Dom.element> = "querySelector"
+  @get @return(nullable)
+  external parentElement: Dom.element => option<Dom.element> = "parentElement"
   @send
   external scrollIntoView: (Dom.element, scrollIntoViewOptions) => unit = "scrollIntoView"
   @get external style: Dom.element => CssStyle.t = "style"
@@ -181,6 +205,20 @@ module Element = {
     "__devPlaygroundScrollHandler"
 }
 
+type resizeObserver
+type resizeObserverEntry
+
+module ResizeObserverEntry = {
+  @get external contentRect: resizeObserverEntry => boundingRect = "contentRect"
+}
+
+module ResizeObserver = {
+  @val external supported: option<unknown> = "globalThis.ResizeObserver"
+  @new external make: (array<resizeObserverEntry> => unit) => resizeObserver = "ResizeObserver"
+  @send external observe: (resizeObserver, Dom.element) => unit = "observe"
+  @send external disconnect: resizeObserver => unit = "disconnect"
+}
+
 module ScriptElement = {
   @set external setSrc: (Dom.element, string) => unit = "src"
   @set external setAsync: (Dom.element, bool) => unit = "async"
diff --git a/packages/dev-playground/src/Main.res b/packages/dev-playground/src/Main.res
index d2fae2b3e3..f36ab0e5c0 100644
--- a/packages/dev-playground/src/Main.res
+++ b/packages/dev-playground/src/Main.res
@@ -108,7 +108,6 @@ let configureSourceEditor = (scrollHandler: Dom.event => unit): unit =>
     switch Document.current->Document.getElementById("source-editor") {
     | None => ()
     | Some(editor) =>
-      editor->Element.setAttribute("wrap", "off")
       switch editor->Element.getScrollHandler {
       | Some(existingHandler) if existingHandler === scrollHandler => ()
       | existingHandler =>
@@ -122,13 +121,6 @@ let configureSourceEditor = (scrollHandler: Dom.event => unit): unit =>
     }
   )
 
-let lineNumbersText = source => {
-  let lineCount = source->String.split("\n")->Array.length
-  Array.make(~length=lineCount, 0)
-  ->Array.mapWithIndex((_, index) => (index + 1)->Int.toString)
-  ->Array.join("\n")
-}
-
 let cursorPositionForOffset = (source, offset): sourcePosition => {
   let sourceLength = String.length(source)
   let boundedOffset = if offset < 0 {
@@ -164,11 +156,27 @@ let keyMovesCursor = key =>
   | _ => false
   }
 
-let editorShellStyle = (activeLine, scrollTop, scrollLeft) => {
-  let activeLineIndex = activeLine <= 1 ? 0 : activeLine - 1
-  let activeLineTop = 18 + activeLineIndex * 22 - scrollTop
-  `--active-line-top: ${activeLineTop->Int.toString}px; --editor-scroll-y: -${scrollTop->Int.toString}px; --editor-scroll-x: -${scrollLeft->Int.toString}px;`
-}
+let editorShellStyle = scrollTop => `--editor-scroll-y: -${scrollTop->Int.toString}px;`
+
+let updateActiveSourceLine = (editor, line) =>
+  Window.requestAnimationFrame(() =>
+    switch editor->Element.parentElement {
+    | Some(editorShell) => {
+        switch editorShell->Element.querySelector(".syntax-line-current") {
+        | Some(currentLine) =>
+          currentLine->Element.classList->ClassList.remove("syntax-line-current")
+        | None => ()
+        }
+        switch editorShell->Element.querySelector(
+          `.syntax-line[data-line="${line->Int.toString}"]`,
+        ) {
+        | Some(activeLine) => activeLine->Element.classList->ClassList.add("syntax-line-current")
+        | None => ()
+        }
+      }
+    | None => ()
+    }
+  )
 
 let hasFeature = (features: array<experimentalFeature>, feature: experimentalFeature) =>
   features->Array.includes(feature)
@@ -684,6 +692,124 @@ module StatusBadge = {
   }
 }
 
+module PaneSeparator = {
+  let minSourceColumn = 360.0
+  let minResultColumn = 420.0
+  let minSourceRow = 180.0
+  let minResultRow = 180.0
+
+  let metrics = (orientation, rect: boundingRect) =>
+    switch orientation {
+    | PaneLayout.Columns => (rect.width, minSourceColumn, minResultColumn)
+    | PaneLayout.Rows => (rect.height, minSourceRow, minResultRow)
+    }
+
+  let position = (orientation, event, rect: boundingRect) =>
+    switch orientation {
+    | PaneLayout.Columns => event->Event.clientX -. rect.left
+    | PaneLayout.Rows => event->Event.clientY -. rect.top
+    }
+
+  let withContainer = (event, callback) =>
+    switch event->Event.currentTarget->Element.parentElement {
+    | Some(container) => callback(event->Event.currentTarget, container)
+    | None => ()
+    }
+
+  @jsx.component
+  let make = (~layout: PaneLayout.t) => {
+    let beginDrag = event =>
+      if event->Event.button === 0 {
+        withContainer(event, (separator, container) => {
+          let rect = container->Element.getBoundingClientRect
+          let orientation = PaneLayout.orientationForWidth(rect.width)
+          let (size, minFirst, minSecond) = metrics(orientation, rect)
+          let pointerId = event->Event.pointerId
+
+          PaneLayout.setOrientation(layout, orientation)
+          separator->Element.setPointerCapture(pointerId)
+          PaneLayout.startDrag(
+            layout,
+            ~pointerId,
+            ~position=position(orientation, event, rect),
+            ~size,
+            ~minFirst,
+            ~minSecond,
+          )
+          event->Event.preventDefault
+        })
+      }
+
+    let moveDrag = event =>
+      withContainer(event, (_, container) => {
+        let rect = container->Element.getBoundingClientRect
+        let orientation = PaneLayout.current(layout).orientation
+        PaneLayout.moveDrag(
+          layout,
+          ~pointerId=event->Event.pointerId,
+          ~position=position(orientation, event, rect),
+        )
+      })
+
+    let finishDrag = event => {
+      let separator = event->Event.currentTarget
+      let pointerId = event->Event.pointerId
+      if separator->Element.hasPointerCapture(pointerId) {
+        separator->Element.releasePointerCapture(pointerId)
+      }
+      PaneLayout.finishDrag(layout, ~pointerId)
+    }
+
+    let handleKeyDown = event =>
+      withContainer(event, (_, container) => {
+        let rect = container->Element.getBoundingClientRect
+        let orientation = PaneLayout.orientationForWidth(rect.width)
+        let delta = switch (orientation, event->Event.key) {
+        | (PaneLayout.Columns, "ArrowLeft") | (PaneLayout.Rows, "ArrowUp") =>
+          Some(-.PaneLayout.keyboardStep)
+        | (PaneLayout.Columns, "ArrowRight") | (PaneLayout.Rows, "ArrowDown") =>
+          Some(PaneLayout.keyboardStep)
+        | _ => None
+        }
+
+        switch delta {
+        | Some(delta) => {
+            let (size, minFirst, minSecond) = metrics(orientation, rect)
+            PaneLayout.setOrientation(layout, orientation)
+            PaneLayout.nudge(layout, delta, ~size, ~minFirst, ~minSecond)
+            event->Event.preventDefault
+          }
+        | None => ()
+        }
+      })
+
+    <div
+      class="pane-separator"
+      role="separator"
+      tabIndex=0
+      ariaLabel="Resize source and output panes"
+      attrs={[
+        ("aria-orientation", () => PaneLayout.ariaOrientation(Signal.get(layout.state))),
+        ("aria-valuemin", () => "0"),
+        ("aria-valuemax", () => "100"),
+        ("aria-valuenow", () => PaneLayout.ariaValueNow(Signal.get(layout.state))),
+      ]}
+      onPointerDown={beginDrag}
+      onPointerMove={moveDrag}
+      onPointerUp={finishDrag}
+      onPointerCancel={finishDrag}
+      onLostPointerCapture={event =>
+        PaneLayout.finishDrag(layout, ~pointerId=event->Event.pointerId)}
+      onClick={event =>
+        if event->Event.detail === 2 {
+          PaneLayout.reset(layout)
+          event->Event.preventDefault
+        }}
+      onKeyDown={handleKeyDown}
+    />
+  }
+}
+
 module App = {
   @jsx.component
   let make = () => {
@@ -704,9 +830,10 @@ module App = {
     )
     let activeLine = Signal.make(1)
     let editorScrollTop = Signal.make(0)
-    let editorScrollLeft = Signal.make(0)
     let highlightedSource: Signal.t<array<View.node>> = Obj.magic(
-      Computed.make(() => SourceHighlight.render(Signal.get(source))),
+      Computed.make(() =>
+        SourceHighlight.render(Signal.get(source), ~activeLine=Signal.peek(activeLine))
+      ),
     )
     let timerId: ref<option<int>> = ref(None)
     let urlTimerId: ref<option<int>> = ref(None)
@@ -715,6 +842,7 @@ module App = {
     let compilerLoadSequence = ref(0)
     let compileSequence = ref(0)
     let shareToast: Signal.t<option<string>> = Signal.make(None)
+    let paneLayout = PaneLayout.make()
 
     let clearMappedPositions = () => {
       Signal.set(mappedSourcePosition, None)
@@ -726,13 +854,12 @@ module App = {
       let cursorPosition = cursorPositionForOffset(currentSource, Event.selectionStart(event))
 
       Signal.set(editorScrollTop, Event.scrollTop(event))
-      Signal.set(editorScrollLeft, Event.scrollLeft(event))
       Signal.set(activeLine, cursorPosition.line)
+      updateActiveSourceLine(event->Event.currentTarget, cursorPosition.line)
     }
 
     let syncEditorScroll = event => {
       Signal.set(editorScrollTop, Event.scrollTop(event))
-      Signal.set(editorScrollLeft, Event.scrollLeft(event))
     }
 
     let scrollToGeneratedMapping = () =>
@@ -759,14 +886,29 @@ module App = {
                   editor->TextAreaElement.setSelectionRange(offset, offset)
                   editor->Element.focus
                   Signal.set(activeLine, original.position.line)
-                  let scrollTop = Math.Int.max(
-                    0,
-                    18 +
-                    (original.position.line - 1) * 22 -
-                    editor->TextAreaElement.clientHeight / 2,
-                  )
-                  editor->TextAreaElement.setScrollTop(scrollTop)
-                  Signal.set(editorScrollTop, editor->TextAreaElement.scrollTop)
+                  updateActiveSourceLine(editor, original.position.line)
+                  switch editor->Element.parentElement {
+                  | Some(editorShell) =>
+                    switch editorShell->Element.querySelector(
+                      `.syntax-line[data-line="${original.position.line->Int.toString}"]`,
+                    ) {
+                    | Some(line) => {
+                        let editorRect = editor->Element.getBoundingClientRect
+                        let lineRect = line->Element.getBoundingClientRect
+                        let centeredScrollTop =
+                          Signal.peek(editorScrollTop)->Int.toFloat +.
+                          lineRect.top -.
+                          editorRect.top -.
+                          (editor->TextAreaElement.clientHeight->Int.toFloat -.
+                            lineRect.height) /. 2.0
+                        let scrollTop = Math.Int.max(0, centeredScrollTop->Math.round->Float.toInt)
+                        editor->TextAreaElement.setScrollTop(scrollTop)
+                        Signal.set(editorScrollTop, editor->TextAreaElement.scrollTop)
+                      }
+                    | None => ()
+                    }
+                  | None => ()
+                  }
                 }
               | None => ()
               }
@@ -882,11 +1024,10 @@ module App = {
             | Ok(formattedSource) =>
               if sequence === compileSequence.contents {
                 if Signal.peek(source) === sourceBeforeFormat {
+                  Signal.set(activeLine, 1)
                   Signal.set(source, formattedSource)
                   clearMappedPositions()
-                  Signal.set(activeLine, 1)
                   Signal.set(editorScrollTop, 0)
-                  Signal.set(editorScrollLeft, 0)
                   scheduleUrlSync()
                   Signal.set(status, Ready)
                   compileNow()
@@ -1005,11 +1146,10 @@ module App = {
     Effect.run(() => {
       let start = async () => {
         let urlState = await UrlState.init(~defaultSource)
+        Signal.set(activeLine, 1)
         Signal.set(source, urlState.source)
         Signal.set(config, urlState.config)
-        Signal.set(activeLine, 1)
         Signal.set(editorScrollTop, 0)
-        Signal.set(editorScrollLeft, 0)
         firstLoadConfig := Some(urlState.config)
         loadCompiler(urlState.config.compilerVersion, true)
       }
@@ -1023,6 +1163,50 @@ module App = {
       None
     })
 
+    Effect.run(() => {
+      let disposed = ref(false)
+      let observer: ref<option<resizeObserver>> = ref(None)
+
+      Window.requestAnimationFrame(() =>
+        if !disposed.contents {
+          switch Document.current->Document.getElementById(paneLayout.containerId) {
+          | Some(container) => {
+              let updateOrientation = width =>
+                PaneLayout.setOrientation(paneLayout, PaneLayout.orientationForWidth(width))
+
+              updateOrientation((container->Element.getBoundingClientRect).width)
+              switch ResizeObserver.supported {
+              | Some(_) => {
+                  let nextObserver = ResizeObserver.make(
+                    entries =>
+                      switch entries->Array.get(0) {
+                      | Some(entry) =>
+                        updateOrientation((entry->ResizeObserverEntry.contentRect).width)
+                      | None => ()
+                      },
+                  )
+                  observer := Some(nextObserver)
+                  nextObserver->ResizeObserver.observe(container)
+                }
+              | None => ()
+              }
+            }
+          | None => ()
+          }
+        }
+      )
+
+      Some(
+        () => {
+          disposed := true
+          switch observer.contents {
+          | Some(observer) => observer->ResizeObserver.disconnect
+          | None => ()
+          }
+        },
+      )
+    })
+
     <main class="app-shell">
       <header class="topbar">
         <div>
@@ -1030,7 +1214,11 @@ module App = {
         </div>
         <StatusBadge status />
       </header>
-      <section class="workspace">
+      <section
+        id={paneLayout.containerId}
+        class={() => PaneLayout.workspaceClass(Signal.get(paneLayout.state))}
+        style={() => PaneLayout.workspaceStyle(Signal.get(paneLayout.state))}
+      >
         <div class="source-column">
           <div class="column-header">
             <h2> {View.text("Source")} </h2>
@@ -1041,11 +1229,10 @@ module App = {
               <button
                 class="secondary-action"
                 onClick={_ => {
+                  Signal.set(activeLine, 1)
                   Signal.set(source, defaultSource)
                   clearMappedPositions()
-                  Signal.set(activeLine, 1)
                   Signal.set(editorScrollTop, 0)
-                  Signal.set(editorScrollLeft, 0)
                   scheduleUrlSync()
                   scheduleCompile()
                 }}
@@ -1063,19 +1250,9 @@ module App = {
               | Some(_) => "editor-shell source-map-source-active"
               | None => "editor-shell"
               }}
-            style={() =>
-              editorShellStyle(
-                Signal.get(activeLine),
-                Signal.get(editorScrollTop),
-                Signal.get(editorScrollLeft),
-              )}
+            style={() => editorShellStyle(Signal.get(editorScrollTop))}
           >
-            <div class="active-line" ariaHidden=true />
-            <div class="line-number-gutter" ariaHidden=true>
-              <pre class="line-numbers">
-                {View.signalText(() => lineNumbersText(Signal.get(source)))}
-              </pre>
-            </div>
+            <div class="line-number-gutter" ariaHidden=true />
             <pre class="syntax-layer" ariaHidden=true>
               {View.signalFragment(highlightedSource)}
             </pre>
@@ -1084,6 +1261,7 @@ module App = {
               class="editor"
               value={MaybeSignal.reactive(source)}
               spellcheck=false
+              attrs={[("wrap", "soft")]}
               onInput={event => {
                 Signal.set(source, Event.value(event))
                 clearMappedPositions()
@@ -1114,6 +1292,7 @@ module App = {
             />
           </div>
         </div>
+        <PaneSeparator layout={paneLayout} />
         <div class="result-column">
           <div class="tabs"> {View.signalFragment(visibleTabNodes)} </div>
           <div
diff --git a/packages/dev-playground/src/PaneLayout.res b/packages/dev-playground/src/PaneLayout.res
new file mode 100644
index 0000000000..8dd84e21a6
--- /dev/null
+++ b/packages/dev-playground/src/PaneLayout.res
@@ -0,0 +1,175 @@
+type orientation =
+  | Columns
+  | Rows
+
+type state = {
+  columnRatio: float,
+  rowRatio: float,
+  orientation: orientation,
+  dragging: bool,
+}
+
+type drag = {
+  pointerId: int,
+  orientation: orientation,
+  size: float,
+  minFirst: float,
+  minSecond: float,
+}
+
+type t = {
+  state: Signal.t<state>,
+  drag: ref<option<drag>>,
+  containerId: string,
+}
+
+let separatorSize = 8.0
+let defaultRatio = 0.5
+let keyboardStep = 0.025
+let narrowWidth = 900.0
+
+let nextInstanceId = ref(0)
+
+let nextContainerId = () => {
+  nextInstanceId := nextInstanceId.contents + 1
+  `pane-layout-${nextInstanceId.contents->Int.toString}`
+}
+
+let make = () => {
+  state: Signal.make({
+    columnRatio: defaultRatio,
+    rowRatio: defaultRatio,
+    orientation: Columns,
+    dragging: false,
+  }),
+  drag: ref(None),
+  containerId: nextContainerId(),
+}
+
+let current = layout => Signal.peek(layout.state)
+
+let orientationForWidth = width => width <= narrowWidth ? Rows : Columns
+
+let clamp = (value, minimum, maximum) =>
+  if value < minimum {
+    minimum
+  } else if value > maximum {
+    maximum
+  } else {
+    value
+  }
+
+let ratioBounds = (~size, ~minFirst, ~minSecond) => {
+  let available = size - separatorSize
+  if available <= 0.0 {
+    (defaultRatio, defaultRatio)
+  } else {
+    let minimum = minFirst /. available
+    let maximum = 1.0 -. minSecond /. available
+    minimum > maximum ? (defaultRatio, defaultRatio) : (minimum, maximum)
+  }
+}
+
+let clampRatio = (ratio, ~size, ~minFirst, ~minSecond) => {
+  let (minimum, maximum) = ratioBounds(~size, ~minFirst, ~minSecond)
+  clamp(ratio, minimum, maximum)
+}
+
+let ratioForPosition = (position, ~size, ~minFirst, ~minSecond) => {
+  let available = size - separatorSize
+  let ratio = available <= 0.0 ? defaultRatio : (position -. separatorSize /. 2.0) /. available
+  clampRatio(ratio, ~size, ~minFirst, ~minSecond)
+}
+
+let setRatio = (layout, orientation, ratio) =>
+  Signal.update(layout.state, state =>
+    switch orientation {
+    | Columns => {...state, columnRatio: ratio}
+    | Rows => {...state, rowRatio: ratio}
+    }
+  )
+
+let setOrientation = (layout, orientation) => {
+  let state = current(layout)
+  if state.orientation !== orientation {
+    layout.drag := None
+    Signal.set(layout.state, {...state, orientation, dragging: false})
+  }
+}
+
+let startDrag = (layout, ~pointerId, ~position, ~size, ~minFirst, ~minSecond) => {
+  let orientation = current(layout).orientation
+  layout.drag := Some({pointerId, orientation, size, minFirst, minSecond})
+  setRatio(layout, orientation, ratioForPosition(position, ~size, ~minFirst, ~minSecond))
+  Signal.update(layout.state, state => {...state, dragging: true})
+}
+
+let moveDrag = (layout, ~pointerId, ~position) =>
+  switch layout.drag.contents {
+  | Some(drag) if drag.pointerId === pointerId =>
+    setRatio(
+      layout,
+      drag.orientation,
+      ratioForPosition(
+        position,
+        ~size=drag.size,
+        ~minFirst=drag.minFirst,
+        ~minSecond=drag.minSecond,
+      ),
+    )
+  | Some(_) | None => ()
+  }
+
+let finishDrag = (layout, ~pointerId) =>
+  switch layout.drag.contents {
+  | Some(drag) if drag.pointerId === pointerId => {
+      layout.drag := None
+      Signal.update(layout.state, state => {...state, dragging: false})
+    }
+  | Some(_) | None => ()
+  }
+
+let reset = layout => {
+  let state = current(layout)
+  setRatio(layout, state.orientation, defaultRatio)
+}
+
+let nudge = (layout, delta, ~size, ~minFirst, ~minSecond) => {
+  let state = current(layout)
+  let ratio = switch state.orientation {
+  | Columns => state.columnRatio
+  | Rows => state.rowRatio
+  }
+  setRatio(layout, state.orientation, clampRatio(ratio +. delta, ~size, ~minFirst, ~minSecond))
+}
+
+let activeRatio = (state: state) =>
+  switch state.orientation {
+  | Columns => state.columnRatio
+  | Rows => state.rowRatio
+  }
+
+let workspaceClass = (state: state) => {
+  let orientationClass = switch state.orientation {
+  | Columns => "workspace-columns"
+  | Rows => "workspace-rows"
+  }
+  state.dragging ? `workspace ${orientationClass} is-resizing` : `workspace ${orientationClass}`
+}
+
+let workspaceStyle = (state: state) => {
+  let firstColumn = state.columnRatio->Float.toString
+  let secondColumn = (1.0 -. state.columnRatio)->Float.toString
+  let firstRow = state.rowRatio->Float.toString
+  let secondRow = (1.0 -. state.rowRatio)->Float.toString
+  `--pane-first-column: ${firstColumn}fr; --pane-second-column: ${secondColumn}fr; --pane-first-row: ${firstRow}fr; --pane-second-row: ${secondRow}fr;`
+}
+
+let ariaOrientation = (state: state) =>
+  switch state.orientation {
+  | Columns => "vertical"
+  | Rows => "horizontal"
+  }
+
+let ariaValueNow = (state: state) =>
+  (activeRatio(state) *. 100.0)->Math.round->Float.toInt->Int.toString
diff --git a/packages/dev-playground/src/SourceHighlight.res b/packages/dev-playground/src/SourceHighlight.res
index 39f38870cc..560fb22cf2 100644
--- a/packages/dev-playground/src/SourceHighlight.res
+++ b/packages/dev-playground/src/SourceHighlight.res
@@ -225,7 +225,41 @@ let tokenClass = kind =>
   | TokenOperator => "syntax-token syntax-operator"
   }
 
-let render = source =>
-  tokenize(source)->Array.map(token =>
-    <span class={tokenClass(token.kind)}> {View.text(token.text)} </span>
-  )
+let tokensByLine = tokens => {
+  let lines: array<array<token>> = [[]]
+
+  tokens->Array.forEach(token => {
+    let pieces = token.text->String.split("\n")
+    pieces->Array.forEachWithIndex((text, index) => {
+      if text !== "" {
+        switch lines->Array.get(lines->Array.length - 1) {
+        | Some(line) => line->Array.push({...token, text})
+        | None => ()
+        }
+      }
+      if index < pieces->Array.length - 1 {
+        lines->Array.push([])
+      }
+    })
+  })
+
+  lines
+}
+
+let render = (source, ~activeLine) =>
+  source
+  ->tokenize
+  ->tokensByLine
+  ->Array.mapWithIndex((tokens, index) => {
+    let line = index + 1
+    <span
+      class={activeLine === line ? "syntax-line syntax-line-current" : "syntax-line"}
+      attrs={[("data-line", line->Int.toString)]}
+    >
+      {View.fragment(
+        tokens->Array.map(token =>
+          <span class={tokenClass(token.kind)}> {View.text(token.text)} </span>
+        ),
+      )}
+    </span>
+  })
diff --git a/packages/dev-playground/src/SourceHighlight.resi b/packages/dev-playground/src/SourceHighlight.resi
index e189e8c982..c748054176 100644
--- a/packages/dev-playground/src/SourceHighlight.resi
+++ b/packages/dev-playground/src/SourceHighlight.resi
@@ -1 +1 @@
-let render: string => array<View.node>
+let render: (string, ~activeLine: int) => array<View.node>
diff --git a/packages/dev-playground/src/styles.css b/packages/dev-playground/src/styles.css
index fd04a9609b..c3b35219c9 100644
--- a/packages/dev-playground/src/styles.css
+++ b/packages/dev-playground/src/styles.css
@@ -125,7 +125,10 @@ button {
 
 .workspace {
   display: grid;
-  grid-template-columns: minmax(360px, 1fr) 8px minmax(420px, 1fr);
+  grid-template-columns:
+    minmax(360px, var(--pane-first-column, 1fr)) 8px
+    minmax(420px, var(--pane-second-column, 1fr));
+  min-width: 0;
   min-height: 0;
   overflow: hidden;
 }
@@ -146,12 +149,77 @@ button {
   grid-column: 3;
 }
 
-.workspace::before {
-  content: "";
+.pane-separator {
+  position: relative;
+  z-index: 3;
   grid-column: 2;
   grid-row: 1 / -1;
+  min-width: 8px;
+  min-height: 8px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  cursor: col-resize;
+  touch-action: none;
+  background: transparent;
+  transition: background-color 120ms ease;
+}
+
+.pane-separator::before {
+  content: "";
+  position: absolute;
+  inset: 0 3px;
   background: var(--playground-divider);
   opacity: 0.36;
+  transition:
+    background-color 120ms ease,
+    opacity 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pane-separator:hover,
+.pane-separator:focus-visible,
+.workspace.is-resizing .pane-separator {
+  background: rgba(230, 72, 79, 0.14);
+}
+
+.pane-separator:hover::before,
+.pane-separator:focus-visible::before,
+.workspace.is-resizing .pane-separator::before {
+  background: var(--fire);
+  opacity: 0.9;
+  box-shadow: 0 0 8px rgba(230, 72, 79, 0.42);
+}
+
+.workspace.is-resizing {
+  user-select: none;
+}
+
+.workspace.workspace-rows {
+  grid-template-columns: 1fr;
+  grid-template-rows:
+    minmax(180px, var(--pane-first-row, 1fr)) 8px
+    minmax(180px, var(--pane-second-row, 1fr));
+}
+
+.workspace-rows .source-column {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.workspace-rows .result-column {
+  grid-column: 1;
+  grid-row: 3;
+}
+
+.workspace-rows .pane-separator {
+  grid-column: 1;
+  grid-row: 2;
+  cursor: row-resize;
+}
+
+.workspace-rows .pane-separator::before {
+  inset: 3px 0;
 }
 
 .column-header {
@@ -213,24 +281,6 @@ button {
   background: var(--playground-panel);
 }
 
-.active-line {
-  position: absolute;
-  z-index: 0;
-  top: var(--active-line-top, 18px);
-  left: var(--gutter-width);
-  right: 0;
-  height: var(--editor-line-height);
-  background: rgba(255, 255, 255, 0.035);
-  border-top: 1px solid rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
-  pointer-events: none;
-}
-
-.source-map-source-active .active-line {
-  background: rgba(221, 140, 27, 0.12);
-  border-color: rgba(221, 140, 27, 0.24);
-}
-
 .line-number-gutter {
   grid-column: 1;
   grid-row: 1;
@@ -243,32 +293,20 @@ button {
   background: rgba(20, 22, 44, 0.42);
 }
 
-.line-numbers {
-  margin: 0;
-  padding: var(--editor-padding-y) 12px var(--editor-padding-y) 0;
-  color: var(--gray-60);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: var(--editor-line-height);
-  text-align: right;
-  user-select: none;
-  transform: translateY(var(--editor-scroll-y, 0px));
-}
-
 .syntax-layer {
   grid-column: 2;
   grid-row: 1;
   position: relative;
   align-self: start;
   z-index: 1;
-  min-width: 100%;
-  width: max-content;
+  min-width: 0;
+  width: 100%;
   height: max-content;
   min-height: max-content;
   margin: 0;
   padding: var(--editor-padding-y) var(--editor-padding-x);
   overflow: visible;
-  white-space: pre;
+  white-space: normal;
   color: var(--gray-30);
   background: transparent;
   font-family: var(--font-mono);
@@ -276,10 +314,45 @@ button {
   line-height: var(--editor-line-height);
   tab-size: 2;
   pointer-events: none;
-  transform: translate(
-    var(--editor-scroll-x, 0px),
-    var(--editor-scroll-y, 0px)
-  );
+  transform: translateY(var(--editor-scroll-y, 0px));
+}
+
+.syntax-line {
+  position: relative;
+  z-index: 0;
+  display: block;
+  min-width: 0;
+  min-height: var(--editor-line-height);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+.syntax-line::before {
+  content: attr(data-line);
+  position: absolute;
+  left: calc(0px - var(--gutter-width) - var(--editor-padding-x));
+  width: calc(var(--gutter-width) - 12px);
+  color: var(--gray-60);
+  font-size: 13px;
+  line-height: var(--editor-line-height);
+  text-align: right;
+  user-select: none;
+}
+
+.syntax-line-current::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0 calc(0px - var(--editor-padding-x));
+  background: rgba(255, 255, 255, 0.035);
+  border-top: 1px solid rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.source-map-source-active .syntax-line-current::after {
+  background: rgba(221, 140, 27, 0.12);
+  border-color: rgba(221, 140, 27, 0.24);
 }
 
 .syntax-token {
@@ -331,7 +404,8 @@ button {
   resize: none;
   border: 0;
   outline: 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: var(--editor-padding-y) var(--editor-padding-x);
   color: transparent;
   -webkit-text-fill-color: transparent;
@@ -341,8 +415,9 @@ button {
   line-height: var(--editor-line-height);
   tab-size: 2;
   caret-color: var(--orange);
-  white-space: pre;
-  overflow-wrap: normal;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal;
   scrollbar-width: thin;
   scrollbar-color: var(--playground-scrollbar-thumb)
     var(--playground-scrollbar-track);
@@ -405,7 +480,9 @@ button {
 .output,
 .problems-output {
   margin: 0;
-  white-space: pre;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal;
   font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.55;
@@ -415,7 +492,8 @@ button {
 .output-shell {
   min-width: 0;
   min-height: 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: var(--playground-panel);
   scrollbar-width: thin;
   scrollbar-color: var(--playground-scrollbar-thumb)
@@ -423,8 +501,8 @@ button {
 }
 
 .output {
-  width: max-content;
-  min-width: 100%;
+  width: 100%;
+  min-width: 0;
   min-height: 100%;
   padding: 18px;
   color: var(--playground-text-primary);
@@ -676,26 +754,6 @@ input[type="checkbox"] {
     max-width: 100%;
   }
 
-  .workspace {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(44vh, 1fr) 8px minmax(46vh, 1fr);
-  }
-
-  .source-column {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .result-column {
-    grid-column: 1;
-    grid-row: 3;
-  }
-
-  .workspace::before {
-    grid-column: 1;
-    grid-row: 2;
-  }
-
   .column-header,
   .settings-panel {
     padding-left: 18px;

From 1fe3937ab262753bcf8eded39f35b90bc29c4234 Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Fri, 4 Sep 2026 22:06:00 +0200
Subject: [PATCH 2/5] Changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3ee0d8c30..ff8673ce6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,7 +51,7 @@
 - Preserve trailing comments between the type and `=` in locally abstract value constraints (`let f: type a. t /* comment */ = value`). https://github.com/rescript-lang/rescript/pull/8575
 - Enforce function arity in interface/module inclusion and type coercion. Previously a curried implementation (e.g. `int => int => int`) could satisfy an uncurried interface (`(int, int) => int`) or be coerced to it, which could miscompile calls made through the interface type. Such mismatches are now compile errors with an explanatory hint. https://github.com/rescript-lang/rescript/pull/8559
 - Fix termination-analysis false positives for functions whose progress flows through un-annotated helpers: collecting the callees of a function binding was accidentally disabled in 2024 (the collection guard required a node shape that uncurried code never produces), so helpers calling `@progress` functions were no longer added to the function table. https://github.com/rescript-lang/rescript/pull/8568
-- Fix default values of optional parameters being computed at the wrong time for curried functions: in `(~x=default, y) => (~z=default, w) => ...`, `x`'s default was only computed when the *inner* function was applied. Each default is now computed when its own parameter group is applied. https://github.com/rescript-lang/rescript/pull/8568
+- Fix default values of optional parameters being computed at the wrong time for curried functions: in `(~x=default, y) => (~z=default, w) => ...`, `x`'s default was only computed when the _inner_ function was applied. Each default is now computed when its own parameter group is applied. https://github.com/rescript-lang/rescript/pull/8568
 - Fix bare labeled arrow types (`~x: int => string`) getting no arity: they printed identically to their parenthesized form (`(~x: int) => string`) but did not unify with it. https://github.com/rescript-lang/rescript/pull/8563
 - Fix losses of fidelity when code passes through an external PPX: the internal `@res.async` marker no longer leaks into the program, attributes on an arrow type or on an `await` expression are no longer dropped or relocated (previously this could crash the formatter), JSX elements keep their closing tag, and PPX-emitted OCaml-style `function` is desugared instead of crashing the compiler. https://github.com/rescript-lang/rescript/pull/8561
 - Preserve multibyte characters when wrapping long source lines in compiler code frames. https://github.com/rescript-lang/rescript/pull/8520
@@ -68,6 +68,7 @@
 
 #### :house: Internal
 
+- Developer playground: Make panes resizable with wrapping text. https://github.com/rescript-lang/rescript/pull/8628
 - Merge the duplicate Lam intermediate representation into Lambda, removing the conversion layer and obsolete supporting infrastructure. Lambda is now a single private, normalized representation, with generated JavaScript remaining semantically unchanged. https://github.com/rescript-lang/rescript/pull/8608
 - Add genType and source map controls and output to the developer playground. https://github.com/rescript-lang/rescript/pull/8448
 - Rework the object-type representation end to end: object rows are plain field chains carrying a per-field mutability state (no phantom setter members), object literals are typed directly and property access and assignment are first-class AST and Lambda nodes shared between the Lambda and JS pipelines, and dead class-system remnants (the field-presence lattice, the class-abbreviation memo on object types, method-send typing) are removed. https://github.com/rescript-lang/rescript/pull/8597

From a424234732a997ca07207e13aa8653902b18a4cd Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Fri, 4 Sep 2026 22:16:54 +0200
Subject: [PATCH 3/5] Review

---
 packages/dev-playground/src/Bindings.res |  2 +
 packages/dev-playground/src/Main.res     | 61 ++++++++++++++++++++++--
 packages/dev-playground/src/styles.css   |  2 +-
 3 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/packages/dev-playground/src/Bindings.res b/packages/dev-playground/src/Bindings.res
index 3984c9607b..1c4653b1fc 100644
--- a/packages/dev-playground/src/Bindings.res
+++ b/packages/dev-playground/src/Bindings.res
@@ -151,6 +151,7 @@ module EventTarget = {
 module CssStyle = {
   type t
 
+  @send external setProperty: (t, string, string) => unit = "setProperty"
   @set external setPosition: (t, string) => unit = "position"
   @set external setTop: (t, string) => unit = "top"
   @set external setLeft: (t, string) => unit = "left"
@@ -231,6 +232,7 @@ module TextAreaElement = {
   @send external select: Dom.element => unit = "select"
   @send external setSelectionRange: (Dom.element, int, int) => unit = "setSelectionRange"
   @get external clientHeight: Dom.element => int = "clientHeight"
+  @get external clientWidth: Dom.element => int = "clientWidth"
   @get external scrollTop: Dom.element => int = "scrollTop"
   @set external setScrollTop: (Dom.element, int) => unit = "scrollTop"
 }
diff --git a/packages/dev-playground/src/Main.res b/packages/dev-playground/src/Main.res
index f36ab0e5c0..f1571b6fea 100644
--- a/packages/dev-playground/src/Main.res
+++ b/packages/dev-playground/src/Main.res
@@ -103,9 +103,9 @@ let insertTabIndent = (event: Dom.event): option<string> =>
     Some(nextValue)
   }
 
-let configureSourceEditor = (scrollHandler: Dom.event => unit): unit =>
+let configureSourceEditor = (editorId, scrollHandler: Dom.event => unit): unit =>
   Window.requestAnimationFrame(() =>
-    switch Document.current->Document.getElementById("source-editor") {
+    switch Document.current->Document.getElementById(editorId) {
     | None => ()
     | Some(editor) =>
       switch editor->Element.getScrollHandler {
@@ -158,6 +158,21 @@ let keyMovesCursor = key =>
 
 let editorShellStyle = scrollTop => `--editor-scroll-y: -${scrollTop->Int.toString}px;`
 
+let syncSourceOverlayWidth = editor =>
+  switch editor->Element.parentElement {
+  | Some(editorShell) =>
+    editorShell
+    ->Element.style
+    ->CssStyle.setProperty(
+      "--editor-overlay-width",
+      `${editor->TextAreaElement.clientWidth->Int.toString}px`,
+    )
+  | None => ()
+  }
+
+let scheduleSourceOverlayWidthSync = editor =>
+  Window.requestAnimationFrame(() => syncSourceOverlayWidth(editor))
+
 let updateActiveSourceLine = (editor, line) =>
   Window.requestAnimationFrame(() =>
     switch editor->Element.parentElement {
@@ -843,6 +858,7 @@ module App = {
     let compileSequence = ref(0)
     let shareToast: Signal.t<option<string>> = Signal.make(None)
     let paneLayout = PaneLayout.make()
+    let sourceEditorId = paneLayout.containerId ++ "-source-editor"
 
     let clearMappedPositions = () => {
       Signal.set(mappedSourcePosition, None)
@@ -880,7 +896,7 @@ module App = {
             Signal.set(mappedGeneratedPosition, Some(mapping.generated))
             Signal.set(activeLine, original.position.line)
             Window.requestAnimationFrame(() =>
-              switch Document.current->Document.getElementById("source-editor") {
+              switch Document.current->Document.getElementById(sourceEditorId) {
               | Some(editor) => {
                   let offset = offsetForPosition(Signal.peek(source), original.position)
                   editor->TextAreaElement.setSelectionRange(offset, offset)
@@ -1159,10 +1175,44 @@ module App = {
     })
 
     Effect.run(() => {
-      configureSourceEditor(syncEditorScroll)
+      configureSourceEditor(sourceEditorId, syncEditorScroll)
       None
     })
 
+    Effect.run(() => {
+      let disposed = ref(false)
+      let observer: ref<option<resizeObserver>> = ref(None)
+
+      Window.requestAnimationFrame(() =>
+        if !disposed.contents {
+          switch Document.current->Document.getElementById(sourceEditorId) {
+          | Some(editor) => {
+              syncSourceOverlayWidth(editor)
+              switch ResizeObserver.supported {
+              | Some(_) => {
+                  let nextObserver = ResizeObserver.make(_ => syncSourceOverlayWidth(editor))
+                  observer := Some(nextObserver)
+                  nextObserver->ResizeObserver.observe(editor)
+                }
+              | None => ()
+              }
+            }
+          | None => ()
+          }
+        }
+      )
+
+      Some(
+        () => {
+          disposed := true
+          switch observer.contents {
+          | Some(observer) => observer->ResizeObserver.disconnect
+          | None => ()
+          }
+        },
+      )
+    })
+
     Effect.run(() => {
       let disposed = ref(false)
       let observer: ref<option<resizeObserver>> = ref(None)
@@ -1257,12 +1307,13 @@ module App = {
               {View.signalFragment(highlightedSource)}
             </pre>
             <textarea
-              id="source-editor"
+              id={sourceEditorId}
               class="editor"
               value={MaybeSignal.reactive(source)}
               spellcheck=false
               attrs={[("wrap", "soft")]}
               onInput={event => {
+                scheduleSourceOverlayWidthSync(event->Event.currentTarget)
                 Signal.set(source, Event.value(event))
                 clearMappedPositions()
                 syncEditorState(event)
diff --git a/packages/dev-playground/src/styles.css b/packages/dev-playground/src/styles.css
index c3b35219c9..aab890e238 100644
--- a/packages/dev-playground/src/styles.css
+++ b/packages/dev-playground/src/styles.css
@@ -300,7 +300,7 @@ button {
   align-self: start;
   z-index: 1;
   min-width: 0;
-  width: 100%;
+  width: var(--editor-overlay-width, 100%);
   height: max-content;
   min-height: max-content;
   margin: 0;

From 4680cbb2ac663b074609d0afe17ffb6973279a53 Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Fri, 4 Sep 2026 22:28:46 +0200
Subject: [PATCH 4/5] Min size fix

---
 packages/dev-playground/src/styles.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dev-playground/src/styles.css b/packages/dev-playground/src/styles.css
index aab890e238..03b7556adb 100644
--- a/packages/dev-playground/src/styles.css
+++ b/packages/dev-playground/src/styles.css
@@ -463,7 +463,7 @@ button {
 .output-panel {
   min-height: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) minmax(116px, 22vh);
+  grid-template-rows: auto minmax(40px, 1fr) minmax(0, max(116px, 22vh));
   overflow: hidden;
   background: var(--playground-panel);
 }
@@ -541,6 +541,7 @@ button {
   min-height: 0;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
   border-top: 1px solid var(--playground-border-soft);
   background: var(--playground-panel);
 }

From 23e370134977992863664cc22a4a7ce619b644f5 Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Fri, 4 Sep 2026 22:30:05 +0200
Subject: [PATCH 5/5] Format

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff8673ce6a..73e4623ae7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,7 +51,7 @@
 - Preserve trailing comments between the type and `=` in locally abstract value constraints (`let f: type a. t /* comment */ = value`). https://github.com/rescript-lang/rescript/pull/8575
 - Enforce function arity in interface/module inclusion and type coercion. Previously a curried implementation (e.g. `int => int => int`) could satisfy an uncurried interface (`(int, int) => int`) or be coerced to it, which could miscompile calls made through the interface type. Such mismatches are now compile errors with an explanatory hint. https://github.com/rescript-lang/rescript/pull/8559
 - Fix termination-analysis false positives for functions whose progress flows through un-annotated helpers: collecting the callees of a function binding was accidentally disabled in 2024 (the collection guard required a node shape that uncurried code never produces), so helpers calling `@progress` functions were no longer added to the function table. https://github.com/rescript-lang/rescript/pull/8568
-- Fix default values of optional parameters being computed at the wrong time for curried functions: in `(~x=default, y) => (~z=default, w) => ...`, `x`'s default was only computed when the _inner_ function was applied. Each default is now computed when its own parameter group is applied. https://github.com/rescript-lang/rescript/pull/8568
+- Fix default values of optional parameters being computed at the wrong time for curried functions: in `(~x=default, y) => (~z=default, w) => ...`, `x`'s default was only computed when the *inner* function was applied. Each default is now computed when its own parameter group is applied. https://github.com/rescript-lang/rescript/pull/8568
 - Fix bare labeled arrow types (`~x: int => string`) getting no arity: they printed identically to their parenthesized form (`(~x: int) => string`) but did not unify with it. https://github.com/rescript-lang/rescript/pull/8563
 - Fix losses of fidelity when code passes through an external PPX: the internal `@res.async` marker no longer leaks into the program, attributes on an arrow type or on an `await` expression are no longer dropped or relocated (previously this could crash the formatter), JSX elements keep their closing tag, and PPX-emitted OCaml-style `function` is desugared instead of crashing the compiler. https://github.com/rescript-lang/rescript/pull/8561
 - Preserve multibyte characters when wrapping long source lines in compiler code frames. https://github.com/rescript-lang/rescript/pull/8520