# [Bug] Misaligned Navbar Elements and Hover Text in Spanish Interface #447

New Issue

2026-07-07T14:49:36Z

enjin2310 commented

2026-07-07 14:49:36 +00:00

Summary

In the Spanish language interface, the navigation bar elements appear visually crowded and misaligned. Hover states do not properly center text within their containers, causing inconsistent alignment and poor visual presentation.

Issue Description

When Spanish is selected as the display language, the navbar items (e.g., “Aprender,” “Juegos,” “Estudio de Arte,” “Desarrollo,” “Calendario,” “Enlaces,” “Patrocinar,” “Contactos,” “Empleos,” “Blog”) are spaced too closely together. Some elements overlap or appear compressed. Additionally, when hovering over a navbar item, the hover background and text alignment are incorrect — the text is not centered within the hover container.

Environment

Property	Value
Application	SpikerSoft Learn
Module	Art Studio
Environment	Production
Browser	Firefox
Operating System	Windows 11
Version	v2026.07.07b
Device	Desktop

Preconditions

User must be logged in and have Spanish selected as the display language.

Steps to Reproduce

Log in to the SpikerSoft platform.
Navigate to Art Studio.
Observe the navbar at the top of the page.
Hover over any navbar item (e.g., “Aprender,” “Juegos,” “Desarrollo”).
Note the spacing and hover alignment behavior.

Expected Result

Navbar elements should have sufficient spacing between them, and hover text should be perfectly centered within its container.

Actual Result

Navbar elements appear visually crowded, with some overlapping or compressed spacing. Hover text is misaligned and not centered within the hover container.

Evidence

The screenshot shows the Art Studio interface with the Spanish navbar where elements are tightly packed and hover text alignment is inconsistent.
The issue is visible across multiple navbar items.

Impact

Reduces visual clarity and usability of the navigation bar.
Causes inconsistent hover feedback and poor user experience.
Affects readability and accessibility in the Spanish interface.

Frequency

Always

Reproducibility

100%

Severity

Medium

Suggested Fix

Increase the gap or margin between navbar elements to prevent overlap.
Apply text-align: center and proper vertical alignment to hover states.
Ensure consistent spacing and alignment across all language modes.

## Summary In the Spanish language interface, the navigation bar elements appear visually crowded and misaligned. Hover states do not properly center text within their containers, causing inconsistent alignment and poor visual presentation. ## Issue Description When Spanish is selected as the display language, the navbar items (e.g., “Aprender,” “Juegos,” “Estudio de Arte,” “Desarrollo,” “Calendario,” “Enlaces,” “Patrocinar,” “Contactos,” “Empleos,” “Blog”) are spaced too closely together. Some elements overlap or appear compressed. Additionally, when hovering over a navbar item, the hover background and text alignment are incorrect — the text is not centered within the hover container. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learn | | Module | Art Studio | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.07.07b | | Device | Desktop | ## Preconditions User must be logged in and have Spanish selected as the display language. ## Steps to Reproduce 1. Log in to the SpikerSoft platform. 2. Navigate to **Art Studio**. 3. Observe the navbar at the top of the page. 4. Hover over any navbar item (e.g., “Aprender,” “Juegos,” “Desarrollo”). 5. Note the spacing and hover alignment behavior. ## Expected Result Navbar elements should have sufficient spacing between them, and hover text should be perfectly centered within its container. ## Actual Result Navbar elements appear visually crowded, with some overlapping or compressed spacing. Hover text is misaligned and not centered within the hover container. ## Evidence - The screenshot shows the **Art Studio** interface with the Spanish navbar where elements are tightly packed and hover text alignment is inconsistent. - The issue is visible across multiple navbar items. ## Impact - Reduces visual clarity and usability of the navigation bar. - Causes inconsistent hover feedback and poor user experience. - Affects readability and accessibility in the Spanish interface. ## Frequency Always ## Reproducibility 100% ## Severity Medium ## Suggested Fix - Increase the `gap` or `margin` between navbar elements to prevent overlap. - Apply `text-align: center` and proper vertical alignment to hover states. - Ensure consistent spacing and alignment across all language modes.

Screenshot 2026-07-07 104436.png

152 KiB

spikerj commented

2026-07-07 15:20:56 +00:00

Resolved in spikersoft-angular PR #147 (merged to master). Widened the .nav-menu inter-item gap (0.5rem → 0.75rem) so longer translated (Spanish) labels no longer crowd/collide, and set .nav-link to min-width: auto + justify-content: center so each item sizes to its own label and the hover background stays centred on the text. #159 overflow protection preserved (the row clips rather than pushing the user-account controls off-screen). Closing.

Resolved in spikersoft-angular PR #147 (merged to `master`). Widened the `.nav-menu` inter-item gap (`0.5rem` → `0.75rem`) so longer translated (Spanish) labels no longer crowd/collide, and set `.nav-link` to `min-width: auto` + `justify-content: center` so each item sizes to its own label and the hover background stays centred on the text. #159 overflow protection preserved (the row clips rather than pushing the user-account controls off-screen). Closing.

spikerj closed this issue

2026-07-07 15:21:05 +00:00

spikerj referenced this issue

2026-07-21 21:23:10 +00:00

[Feature][Photography] Stack-aware gallery: EXIF burst auto-grouping, collapse to finished products, stack provenance + transparency panel (epic #718) #779

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#447