# [Bug] Hover Misalignment on Close Button in Dictionary Sidebar/Panel #399

New Issue

2026-07-05T16:15:08Z

enjin2310 commented

2026-07-05 16:15:08 +00:00

Summary

The close button in the right sidebar (Dictionary section) does not align correctly when hovered, causing visual inconsistency in the C# Playground interface.

Issue Description

When hovering over the close button located in the rightpanel under the Plan de estudios de C# (Or any another Playground), the hover state and button position appear misaligned. The hover highlight does not match the button’s actual clickable area, resulting in a poor user experience.

Environment

Property	Value
Application	SpikerSoft Learn
Module	C# Playground
Environment	Production
Browser	Firefox
Operating System	Windows 11
Version	v2026.07.05c
Device	Desktop

Preconditions

User must be logged in and have access to the Plan de estudios de C# sidebar.

Steps to Reproduce

Log in to the SpikerSoft platform.
Navigate to Learn > C# Playground (Or Any Playground).
Open any lesson (e.g., Suma de arreglo 2D).
Hover over the close button in the right sidebar (Dictionary section).
Observe the hover alignment behavior.

Expected Result

The hover highlight and clickable area should align perfectly with the close button’s visible boundaries.

Actual Result

The hover highlight and button position are misaligned, creating a visual offset between the hover state and the button’s actual location.

Evidence

The screenshot shows the Plan de estudios de C# sidebar with the close button misaligned when hovered.
The hover area appears slightly offset from the button’s visible icon, indicating a CSS or layout positioning issue.

Impact

Reduces UI consistency and visual polish.
May confuse users attempting to close sections.
Minor usability degradation in the sidebar navigation.

Frequency

Always

Reproducibility

100%

Severity

Low

Notes

Occurs consistently across Playgrounds. Likely related to CSS hover or flex alignment properties in the sidebar component.

## Summary The close button in the right sidebar (Dictionary section) does not align correctly when hovered, causing visual inconsistency in the C# Playground interface. ## Issue Description When hovering over the close button located in the rightpanel under the **Plan de estudios de C#** (Or any another Playground), the hover state and button position appear misaligned. The hover highlight does not match the button’s actual clickable area, resulting in a poor user experience. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learn | | Module | C# Playground | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.07.05c | | Device | Desktop | ## Preconditions User must be logged in and have access to the **Plan de estudios de C#** sidebar. ## Steps to Reproduce 1. Log in to the SpikerSoft platform. 2. Navigate to **Learn > C# Playground** (Or Any Playground). 3. Open any lesson (e.g., *Suma de arreglo 2D*). 4. Hover over the close button in the right sidebar (Dictionary section). 5. Observe the hover alignment behavior. ## Expected Result The hover highlight and clickable area should align perfectly with the close button’s visible boundaries. ## Actual Result The hover highlight and button position are misaligned, creating a visual offset between the hover state and the button’s actual location. ## Evidence - The screenshot shows the **Plan de estudios de C#** sidebar with the close button misaligned when hovered. - The hover area appears slightly offset from the button’s visible icon, indicating a CSS or layout positioning issue. ## Impact - Reduces UI consistency and visual polish. - May confuse users attempting to close sections. - Minor usability degradation in the sidebar navigation. ## Frequency Always ## Reproducibility 100% ## Severity Low ## Notes Occurs consistently across Playgrounds. Likely related to CSS hover or flex alignment properties in the sidebar component.

Screenshot 2026-07-05 121135.png

259 KiB

spikerj commented

2026-07-05 19:53:46 +00:00

✅ Fixed and merged to master via spikersoft-angular#133. Root cause: .pane-close (a Material icon-button) was resized to 28px but left --mat-icon-button-state-layer-size at its 40px default, leaving 8px stale padding that pushed the glyph off-center from the hover circle — in both the curriculum pane and the dictionary/concept pane (hence "all playgrounds"). Fix drives the state-layer + touch-target tokens to 28px so the glyph, hover layer, and touch target are concentric. Theme-agnostic (light+dark); 51 tests pass (added a concept-pane spec). Thanks for the clear report, @enjin2310.

✅ Fixed and merged to master via **spikersoft-angular#133**. Root cause: `.pane-close` (a Material icon-button) was resized to 28px but left `--mat-icon-button-state-layer-size` at its 40px default, leaving 8px stale padding that pushed the glyph off-center from the hover circle — in both the curriculum pane and the dictionary/concept pane (hence "all playgrounds"). Fix drives the state-layer + touch-target tokens to 28px so the glyph, hover layer, and touch target are concentric. Theme-agnostic (light+dark); 51 tests pass (added a concept-pane spec). Thanks for the clear report, @enjin2310.

spikerj closed this issue

2026-07-05 19:53:51 +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#399