# [Bug] Swapping Panes Breaks Layout in C# Playground Interface #1123
Assignees
spikerj (Joseph Spiker)
Clear assignees
spikerj (Joseph Spiker)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: spikerj/spikersoft-issues#1123
Reference in new issue
Block a user
Summary
Using the Swap panes option under the View > Options menu causes the entire layout of the C# Playground interface to break. After swapping, panels overlap or disappear, and the workspace fails to render correctly.
Issue Description
When the user selects Swap panes to move the curriculum and concept reference panels, the layout becomes unstable. The main content area either collapses or shifts incorrectly, leaving empty space or overlapping panels. The issue persists until the page is refreshed or the panes are manually reset.
Environment
Preconditions
User must be logged in and viewing a lesson in the C# Playground.
Steps to Reproduce
Expected Result
The curriculum and concept reference panels should swap positions smoothly without affecting the overall layout.
Actual Result
Evidence
Impact
Frequency
Always
Reproducibility
100%
Severity
High
Notes
The issue may be caused by improper DOM re-rendering or missing CSS reflow logic when swapping panel positions. It is recommended to verify the layout container’s state management and ensure proper recalculation of panel widths and positions after swapping.
Aditional Note
The issue persist all across SpikerSoft Playgrounds
Confirmed, diagnosed and fixed — and your instinct in the Notes was right: it is
the layout container, not the panes themselves.
The swap sets grid columns but not grid rows. CSS Grid's default
grid-auto-flow: rowpacks "sparsely": it keeps a cursor that only movesforward, and whenever an item's column lands before that cursor it starts a
new row. The DOM order is curriculum, splitter, main, splitter, concept, but the
swapped columns are 5, 2, 3, 4, 1 — which steps backwards twice. So the browser
builds three rows:
The panes stack vertically instead of sitting side by side, and the editor ends
up below the fold. Your three screenshots show precisely that progression:
curriculum alone at the top right, an empty middle, and then the lesson only
visible in the third shot after the page had scrolled — which is also why
the
File / View / Modemenu bar is missing there. It had scrolled off the top;it was never deleted.
Measured in a real browser, driven from the actual stylesheet:
Fixed by pinning all swapped panes to row 1. Issue
spikerj/spikersoft-angular#907, PR spikerj/spikersoft-angular#908.
Your "Additional Note" that it happens across all playgrounds was a genuinely
useful clue — the playground shell is one shared component, so a single
stylesheet explains every one of them. Please keep adding that kind of
observation.
Fixed and merged — closing.
The swap set grid columns but not grid rows, so the browser stacked the panes onto three separate rows and pushed the editor below the fold. Panes are now pinned to a single row (spikerj/spikersoft-angular#908). Your note that it happened across all playgrounds was the clue - they share one component.
The change is on
masterand deployed. Please re-test when you get a chance; if you still see it, reopen this issue rather than filing a new one so the history stays together.