Symptom

Three findings from the 2026-06-25 UX audit (surface-layout theme):

1. All seven editor screenshot scenarios showed white/light backgrounds — the chip/header section appeared dark but the form body below it was white.
2. The dashboard node-list screen title had no top inset, abutting the top edge of its scroll container without breathing room.
3. In the executor webhook editor, “Query Parameters:” and “Headers:” section labels were flush to the left screen edge, misaligned with the URL and Method fields above them (which have an 8dp visual inset from the OutlinedTextField outline border).

Root cause

1. The screenshot scenarios in Scenarios.kt called editor composables (EditFilter, EditTrigger, EditDiagram, etc.) directly inside DarkBlueGrayTheme without a Surface or background modifier at the root. The Compose Desktop headless canvas defaults to white; transparent Columns showed through to it. The node chip sections appeared dark because they explicitly use tertiaryContainer/surfaceVariant colors, but descriptive text and form areas had no explicit background and rendered white. The NodeEditorContainer’s inner scrollable Column also lacked its own background modifier, so a real app on a light-mode OS could exhibit the same fracture between the outer column’s colorScheme.background and any child composable that introduced a new drawing context.
2. NodeListScreen’s title Text only had padding(bottom = PADDING_SMALL) with no top inset. The parent ScreenContainer provides 16dp vertical padding for the scrollable content area, but the title’s own top padding was zero.
3. SectionHeading (a plain Text) has no inherent padding. OutlinedTextField’s visible label text sits ~8dp inside the outline border, so the label appears indented relative to a bare Text at the same Column start edge.

Fix

• Scenarios.kt: wrapped all seven editor scenarios in Surface(Modifier.fillMaxSize(), color = colorScheme.background) following the established pattern from connectNodesStep1. This is the simplest single-file change that normalises the background across all editor PNGs.
• DialogComponents.kt: added Modifier.background(colorScheme.background) to the inner scrollable Column in both NodeEditorContainer variants (tabless and 3-tab), so the production app always draws the correct surface behind the form body regardless of host OS theme.
• NodeListScreen.kt: added top = CommonLayout.PADDING_LARGE (16dp) to the title Text’s existing padding(bottom = PADDING_SMALL) modifier.
• EditOutboundWebHook.kt: passed Modifier.padding(start = PADDING_SMALL) (8dp) to the SectionHeading calls for “Query Parameters:” and “Headers:”, aligning their leading edge with the URL/Method fields above.

Prevention

• Any screenshot scenario that calls a composable NOT wrapped in NodeEditorContainer must include a Surface(fillMaxSize, colorScheme.background) to avoid the white-canvas default. The connectNodesStep1 scenario already demonstrated the correct pattern; new scenarios should match it.
• When adding a new SectionHeading above OutlinedTextField controls, check whether the heading needs a start inset to match the field’s visual indent.
• ScreenContainer provides vertical padding for the content area, but title composables inside the content that need additional leading space must add their own top padding explicitly.