Make the Bitcrusher and Delay plates shorter (#399, #393)

Both devices were 280 tall, but their knobs end well above that. The
gap between the lamps or levers and the knobs was wide, and below the
knobs about 70 units stayed empty.

- The Bitcrusher is 680x220. Its knobs sit 14 higher, closer to the
  row of bit lamps.
- The Delay is 680x224. Its knob groups start 16 higher, closer to the
  two levers.
- The screen's frame is now worked out from the plate's bottom edge.
  It stays as far from the bottom as from the side, so the screen
  shrinks with the plate (116 and 120 tall).

Tests:
- crusher-view and delay-view: 30 tests green
- e2e 34 on melektaus-atx: ALL PASSED, 144 checks
- gate on melektaus-atx: 293 files, 4495 tests

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/soundfx/crusherView.ts

@@ -48,8 +48,8 @@ export const CRUSH_KNOBS: Record<CrushKey, CrushKnob> = {
 
 // --- The plate. ---
 
-/** The plate: as the Flanger's (#398), the panel never takes another size. */
+/** The plate: as the Flanger's (#398), the panel never takes another size – no taller than its knobs need (#399). */
-export const CRUSHER_PANEL = { w: 680, h: 280 };
+export const CRUSHER_PANEL = { w: 680, h: 220 };
 
 /** The extra the strip of text under the screen takes. */
 export const TEXT_ROW = 14;
@@ -72,11 +72,12 @@ export interface CrusherLayout {
 }
 
 function crusherLayout(): CrusherLayout {
-  const { w } = CRUSHER_PANEL;
+  const { w, h } = CRUSHER_PANEL;
-  const screen = { x: 34, y: 60, w: 280, h: 176 };
+  // The screen as tall as the plate leaves, its frame as far from the bottom as from the side.
-  const bezel = { x: 24, y: 44, w: screen.w + 20, h: screen.h + 16 + TEXT_ROW + 6 };
+  const bezel = { x: 24, y: 44, w: 300, h: h - 24 - 44 };
+  const screen = { x: 34, y: 60, w: bezel.w - 20, h: bezel.h - 16 - TEXT_ROW - 6 };
   // The bits and the rate big, the two edges of a pixel on the screen; the wet small after them.
-  const dialY = 160;
+  const dialY = 146;
   const bits = { x: bezel.x + bezel.w + 20 + BIG_DIAL / 2, y: dialY, size: BIG_DIAL };
   const rate = { x: bits.x + BIG_DIAL + 20, y: dialY, size: BIG_DIAL };
   const mix = { x: rate.x + BIG_DIAL / 2 + 20 + 30, y: dialY, size: SMALL_DIAL };

src/editor/soundfx/delayView.ts

@@ -115,8 +115,8 @@ export const DELAY_KNOBS: Record<DelayKey, DelayKnob> = {
 
 // --- The plate. ---
 
-/** The plate: as the Compressor's (#379), the panel never takes another size. */
+/** The plate: as the Compressor's (#379), the panel never takes another size – no taller than its knobs need. */
-export const DELAY_PANEL = { w: 680, h: 280 };
+export const DELAY_PANEL = { w: 680, h: 224 };
 
 const KNOB_SLOT = 64;
 const GROUP_GAP = 16;
@@ -143,15 +143,16 @@ export interface DelayLayout {
 }
 
 function delayLayout(): DelayLayout {
-  const { w } = DELAY_PANEL;
+  const { w, h } = DELAY_PANEL;
-  const screen = { x: 34, y: 60, w: 300, h: 176 };
+  // The screen as tall as the plate leaves, its frame as far from the bottom as from the side.
-  const bezel = { x: 24, y: 44, w: screen.w + 20, h: screen.h + 16 + TEXT_ROW + 6 };
+  const bezel = { x: 24, y: 44, w: 320, h: h - 24 - 44 };
+  const screen = { x: 34, y: 60, w: bezel.w - 20, h: bezel.h - 16 - TEXT_ROW - 6 };
   // The right of the plate: the two levers on top, the knobs below.
   const left = bezel.x + bezel.w + 24;
   const right = w - 24;
   const sync = { x: left, y: 52, ...LEVER };
   const pingPong = { x: right - LEVER.w, y: 52, ...LEVER };
-  const groupTop = 130;
+  const groupTop = 114;
   const dialY = groupTop + GROUP_LINE + KNOB_CAPTION + SMALL_DIAL / 2;
   const groups: { label: string; box: Box }[] = [];
   const knobs = {} as Record<DelayKey, KnobSpot>;

tools/e2e/34-sound.mjs

@@ -1413,7 +1413,7 @@ export async function sound(t) {
   check(
     'a Delay node is a device with its echoes on a screen and a running light; ping-pong, sync and the time knob are one undo step each',
     dlShown.size.w === 680 &&
-      dlShown.size.h === 280 &&
+      dlShown.size.h === 224 &&
       Object.values(dlShown.inputs).length === 5 &&
       Object.values(dlShown.inputs).every((p) => p.x < dlShown.rect.x) &&
       Object.values(dlShown.outputs).every((p) => p.x > dlShown.rect.x + dlShown.rect.w) &&
@@ -1659,7 +1659,7 @@ export async function sound(t) {
   check(
     'a Bitcrusher node is a device whose screen draws a sine in the cells of its bits and its rate; both knobs are one undo step each',
     bcShown.size.w === 680 &&
-      bcShown.size.h === 280 &&
+      bcShown.size.h === 220 &&
       Object.values(bcShown.inputs).length === 4 &&
       Object.values(bcShown.inputs).every((p) => p.x < bcShown.rect.x) &&
       Object.values(bcShown.outputs).every((p) => p.x > bcShown.rect.x + bcShown.rect.w) &&