# [Bug] Right Panel Items Misaligned After Resizing Across All Playgrounds #1125

New Issue

2026-08-27T23:43:42Z

enjin2310 commented

2026-08-27 23:43:42 +00:00

Summary

Resizing the right-hand panel in any Playground environment causes its internal items (buttons, labels, and input fields) to display incorrectly. The layout becomes distorted, with elements overlapping or misaligned.

Issue Description

When the user adjusts the width of the right panel (e.g., video submission, concept reference, or lesson sidebar), the contained items fail to reposition correctly. This issue occurs consistently across all playgrounds, including C#, JavaScript, and Python. The misalignment persists until the page is refreshed or the panel is reset to its default width.

Environment

Property	Value
Application	SpikerSoft Learn
Module	All Playground Modules (C#, JS, Python, etc.)
Environment	Production
Browser	Firefox
Operating System	Windows 11
Version	v2026.08.27e
Device	Desktop

Preconditions

User must be logged in and have access to any Playground environment.

Steps to Reproduce

Log in to the SpikerSoft platform.
Navigate to any Playground (e.g., Tools > C# Playground).
Resize the right panel by dragging its border.
Observe the alignment of items within the panel.

Expected Result

All items within the right panel should dynamically adjust their positions and remain properly aligned after resizing.

Actual Result

Items become misaligned or overlap.
Buttons and text fields shift outside their containers.
The layout does not recover until a manual refresh or reset.

Evidence

The screenshot shows the C# Playground interface with the right panel resized, causing visible misalignment of elements.
The issue repeats across multiple playgrounds, confirming it is not isolated to a single module.

Impact

Reduces usability and visual consistency.
Affects accessibility for users interacting with panel controls.
Requires manual refresh to restore proper layout.

Frequency

Always

Reproducibility

100%

Severity

Medium

Notes

The issue likely stems from missing responsive CSS rules or improper flex/grid recalculation after resizing. It is recommended to verify the panel container’s layout logic and ensure dynamic element repositioning is triggered on resize events.

## Summary Resizing the right-hand panel in any **Playground** environment causes its internal items (buttons, labels, and input fields) to display incorrectly. The layout becomes distorted, with elements overlapping or misaligned. ## Issue Description When the user adjusts the width of the right panel (e.g., video submission, concept reference, or lesson sidebar), the contained items fail to reposition correctly. This issue occurs consistently across all playgrounds, including **C#**, **JavaScript**, and **Python**. The misalignment persists until the page is refreshed or the panel is reset to its default width. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learn | | Module | All Playground Modules (C#, JS, Python, etc.) | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.08.27e | | Device | Desktop | ## Preconditions User must be logged in and have access to any Playground environment. ## Steps to Reproduce 1. Log in to the SpikerSoft platform. 2. Navigate to any Playground (e.g., **Tools > C# Playground**). 3. Resize the right panel by dragging its border. 4. Observe the alignment of items within the panel. ## Expected Result All items within the right panel should dynamically adjust their positions and remain properly aligned after resizing. ## Actual Result - Items become misaligned or overlap. - Buttons and text fields shift outside their containers. - The layout does not recover until a manual refresh or reset. ## Evidence - The screenshot shows the **C# Playground** interface with the right panel resized, causing visible misalignment of elements. - The issue repeats across multiple playgrounds, confirming it is not isolated to a single module. ## Impact - Reduces usability and visual consistency. - Affects accessibility for users interacting with panel controls. - Requires manual refresh to restore proper layout. ## Frequency Always ## Reproducibility 100% ## Severity Medium ## Notes The issue likely stems from missing responsive CSS rules or improper flex/grid recalculation after resizing. It is recommended to verify the panel container’s layout logic and ensure dynamic element repositioning is triggered on resize events.

Screenshot 2026-08-27 194223.png

268 KiB

spikerj commented

2026-08-31 00:03:13 +00:00

Confirmed — and it turned out to be two separate things, one of which is worse than you described.

1. The form fields really do leave the panel. The submit form's two-column row (Bloque # / Duración) uses a flex layout that cannot shrink: a flex item will not go below its min-content width, and an <input> carries a built-in width of about 20 characters that it refuses to shrink past. So the pair bottoms out around 350px and everything narrower just hangs outside the panel.

The important part: the pane defaults to 320px, so this is already broken before anyone resizes anything. Measured against the real stylesheet, in pixels past the panel edge:

pane width	overflow
220 (the narrowest you can drag it)	Bloque +6, Duración +218
320 (the default)	Duración +118
400	Duración +38
460+	none

Fixed in spikerj/spikersoft-angular#911, PR spikerj/spikersoft-angular#912 — the fields now stack when the pane is narrow instead of overflowing. Verified: no overflow at any width the splitter allows.

2. The clipped tab strip in your screenshot is a different bug — the same one behind #1120/#1121 — and it is already fixed and merged (PR #904). Resizing the pane narrower just made it more obvious.

One correction to the report worth noting: it is not really "after resizing". Resizing makes it worse, but the default panel width already overflows. That is a more serious finding than the ticket claimed, so thank you for it.

Confirmed — and it turned out to be two separate things, one of which is worse than you described. **1. The form fields really do leave the panel.** The submit form's two-column row (Bloque # / Duración) uses a flex layout that cannot shrink: a flex item will not go below its min-content width, and an `<input>` carries a built-in width of about 20 characters that it refuses to shrink past. So the pair bottoms out around 350px and everything narrower just hangs outside the panel. The important part: the pane **defaults to 320px**, so this is already broken before anyone resizes anything. Measured against the real stylesheet, in pixels past the panel edge: | pane width | overflow | | --- | --- | | 220 (the narrowest you can drag it) | Bloque +6, **Duración +218** | | 320 (**the default**) | Duración +118 | | 400 | Duración +38 | | 460+ | none | Fixed in spikerj/spikersoft-angular#911, PR spikerj/spikersoft-angular#912 — the fields now stack when the pane is narrow instead of overflowing. Verified: no overflow at any width the splitter allows. **2. The clipped tab strip in your screenshot is a different bug** — the same one behind #1120/#1121 — and it is already fixed and merged (PR #904). Resizing the pane narrower just made it more obvious. One correction to the report worth noting: it is not really "after resizing". Resizing makes it worse, but the default panel width already overflows. That is a more serious finding than the ticket claimed, so thank you for it.

spikerj commented

2026-09-06 03:38:25 +00:00

Closing — fix merged in spikerj/spikersoft-angular#912 (2026-08-31) and is on master: the submit-form flex row can now shrink instead of pushing its inputs out of a narrow pane.

spikerj closed this issue

2026-09-06 03:38:25 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1125