[wesrupert]

Description

• The layout editor can now configure the sider alongside the main layout
• Add sider preview next to the layout template
• Add sider layout picker (Single/Stacked) in the sidebar

QA Instructions

• The sider appears in the layout editor
• The sidebar includes a 1/2-item layout for the sider
• Any item except "Editor Display" can be placed in the sider
• Any item (including Multichat) can be placed in the main display
• The sider shows up on the appropriate side of the layout, based on the Settings -> Appearance -> "Show the dock on the left side" setting
• The sider layout is updated in all nav items, not just "Editor"
• Website in the sider resizes as expected
• Website in the sider behaves as expected when the sider is closed -> opened again

[bundlemon]

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	renderer.(hash).js	10.8MB (+31.71KB +0.29%)	-

Unchanged files (3)

Status	Path	Size	Limits
✅	vendors~renderer.(hash).js	4.65MB	-
✅	updater.js	115.29KB	-
✅	guest-api.js	40.23KB	-

Total files change +31.71KB +0.2%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[Copilot]

🟡 Changes recommended

Changing the dock layout discards unsaved Website URL edits, and the Single/Stacked controls lack keyboard access and an accessible selected state.

2 open issues

• Make Single/Stacked layout choices keyboard-accessible · New
• Preserve Website URL draft when changing dock layout · New

What changed in this PR

Adds dock configuration to Streamlabs Desktop’s layout editor, allowing users to arrange dock content alongside the main layout.

Changes:

• Adds Single/Stacked dock choices and a preview positioned according to the left-dock setting.
• Extends drag-and-drop placement to dock slots while preventing Editor Display from entering the dock.
• Saves dock layout changes and adds translated labels.

File	Description
app/​i18n/​en-US/​customization.json	Adds Dock, Single, and Stacked labels.
app/​components-react/​pages/​layout-editor/​TopBar.tsx	Saves dock layout changes.
app/​components-react/​pages/​layout-editor/​SideBar.tsx	Adds the dock layout picker.
app/​components-react/​pages/​layout-editor/​LayoutEditor.tsx	Adds dock previews and shared placement zones.
app/​components-react/​pages/​layout-editor/​LayoutEditor.m.less	Styles dock previews and layout choices.
app/​components-react/​pages/​layout-editor/​hooks.ts	Tracks dock layout state and validates dock placement.

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

No active review issues block approval of the dock layout editor changes.

No open issues 🎉

2 resolved since last review

• Preserve Website URL draft when changing dock layout
• Make Single/Stacked layout choices keyboard-accessible

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

QA instructions omit regression checks for the shared BrowserView visibility change in the Overlay Library after resizing and the App Store after dock collapse and expansion.

1 open issue

• Add visibility regression checks for BrowserView consumers · New

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

The Website QA instructions leave expected outcomes undefined and need concrete, verifiable checks for dock behavior.

1 open issue

• Make Website QA checks specify expected results · New

1 resolved since last review

• Add visibility regression checks for BrowserView consumers

_{Review effort: Balanced}