spikerj/spikersoft-issues
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

# [Bug] “Enviar un video” Button Misaligned in Spanish Language Mode #1121

New Issue
Closed
opened 2026-08-27 23:29:21 +00:00 by enjin2310 · 2 comments
enjin2310 commented 2026-08-27 23:29:21 +00:00
Copy link
Copy source

Summary

When the platform language is set to Spanish, the Enviar un video (Submit a video) button in the C# Lesson View does not display correctly. The button appears misaligned or partially cropped within the right-hand sidebar, affecting visibility and usability.

Issue Description

In the C# Curriculum lesson interface, the Enviar un video button under the “Aún no hay videos para esta lección” message fails to render properly. The issue occurs only when the interface language is Spanish. The button’s layout appears shifted or truncated, suggesting a localization-related UI scaling or container overflow problem.

Environment

Property Value
Application SpikerSoft Learn
Module C# Lessons and Sandbox
Environment Production
Browser Firefox
Operating System Windows 11
Version v2026.08.27e
Device Desktop

Preconditions

User must be logged in and have the display language set to Spanish.

Steps to Reproduce

  1. Log in to the SpikerSoft platform.
  2. Navigate to Tools > C# Playground.
  3. Open any lesson (e.g., Literales de cadena sin formato).
  4. Observe the right-hand panel under “Aún no hay videos para esta lección.”

Expected Result

The Enviar un video button should be fully visible, properly aligned, and interactable, consistent with other language modes.

Actual Result

  • The button appears misaligned or cropped.
  • The text may overflow or be truncated.
  • The clickable area may not respond correctly.

Evidence

  • The screenshot shows the Enviar un video button rendered incorrectly in the right-hand sidebar while the interface is in Spanish.
  • The rest of the layout (lesson content and sidebar text) appears normal, isolating the issue to the button’s localization or CSS container.

Impact

  • Reduces usability for Spanish-speaking contributors.
  • Creates inconsistent UI presentation across language modes.
  • May discourage video submissions due to unclear button visibility.

Frequency

Always (when language is set to Spanish)

Reproducibility

100%

Severity

Medium

Notes

The issue likely stems from localization text length exceeding the button’s container width or missing responsive CSS rules. It is recommended to verify the button’s layout properties and ensure proper scaling for multilingual text.

## Summary When the platform language is set to **Spanish**, the **Enviar un video** (Submit a video) button in the **C# Lesson View** does not display correctly. The button appears misaligned or partially cropped within the right-hand sidebar, affecting visibility and usability. ## Issue Description In the **C# Curriculum** lesson interface, the **Enviar un video** button under the “Aún no hay videos para esta lección” message fails to render properly. The issue occurs only when the interface language is Spanish. The button’s layout appears shifted or truncated, suggesting a localization-related UI scaling or container overflow problem. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learn | | Module | C# Lessons and Sandbox | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.08.27e | | Device | Desktop | ## Preconditions User must be logged in and have the display language set to **Spanish**. ## Steps to Reproduce 1. Log in to the SpikerSoft platform. 2. Navigate to **Tools > C# Playground**. 3. Open any lesson (e.g., *Literales de cadena sin formato*). 4. Observe the right-hand panel under “Aún no hay videos para esta lección.” ## Expected Result The **Enviar un video** button should be fully visible, properly aligned, and interactable, consistent with other language modes. ## Actual Result - The button appears misaligned or cropped. - The text may overflow or be truncated. - The clickable area may not respond correctly. ## Evidence - The screenshot shows the **Enviar un video** button rendered incorrectly in the right-hand sidebar while the interface is in Spanish. - The rest of the layout (lesson content and sidebar text) appears normal, isolating the issue to the button’s localization or CSS container. ## Impact - Reduces usability for Spanish-speaking contributors. - Creates inconsistent UI presentation across language modes. - May discourage video submissions due to unclear button visibility. ## Frequency Always (when language is set to Spanish) ## Reproducibility 100% ## Severity Medium ## Notes The issue likely stems from localization text length exceeding the button’s container width or missing responsive CSS rules. It is recommended to verify the button’s layout properties and ensure proper scaling for multilingual text.
Screenshot 2026-08-27 192818.png
306 KiB
Screenshot 2026-08-27 192818.png
spikerj commented 2026-08-30 21:58:35 +00:00
Owner
Copy link
Copy source

Confirmed — and this is the same defect as spikersoft-issues#1120, not a
Spanish-specific one. Your filing it separately is what caught an error in my
first analysis, so thank you.

The misrendered control is not the "Enviar un video" button (that renders at
full width, is not truncated, and its click handler is a plain state toggle).
It is the Vídeos tab directly above it: in your screenshot the highlighted
tab at the right edge is cut mid-label, showing only "Vid" plus a sliver of its
smart_display icon.

The tab strip is a non-wrapping flex row holding up to five tabs in a rail whose
default width is 320px. The tabs cannot shrink below their min-content width, so
the row overflows and the trailing tabs are clipped by the pane edge.

Measured at that 320px default with the app's real font — pixels past the edge:

Locale / tabs Before After fix
es, 4 (yours) Videos +28px none
es, 5 (after running code) Videos +27px, Resultados +132px none
en, 4 (#1120) Videos +53px none
en, 5 Videos +53px, Results +136px none

I had initially told you on #1120 that Spanish was unaffected. That was wrong —
I had measured against a guessed rail width and without the site's webfont. Your
report is what surfaced it; I have posted the correction there too.

Fixed by spikerj/spikersoft-angular#904 (issue spikerj/spikersoft-angular#903),
which covers both this and #1120 — the tabs now wrap to a second row instead of
being clipped.

Confirmed — and this is the **same defect** as spikersoft-issues#1120, not a Spanish-specific one. Your filing it separately is what caught an error in my first analysis, so thank you. The misrendered control is not the "Enviar un video" button (that renders at full width, is not truncated, and its click handler is a plain state toggle). It is the **Vídeos tab** directly above it: in your screenshot the highlighted tab at the right edge is cut mid-label, showing only "Vid" plus a sliver of its `smart_display` icon. The tab strip is a non-wrapping flex row holding up to five tabs in a rail whose default width is 320px. The tabs cannot shrink below their min-content width, so the row overflows and the trailing tabs are clipped by the pane edge. Measured at that 320px default with the app's real font — pixels past the edge: | Locale / tabs | Before | After fix | | --- | --- | --- | | es, 4 (yours) | Videos +28px | none | | es, 5 (after running code) | Videos +27px, Resultados +132px | none | | en, 4 (#1120) | Videos +53px | none | | en, 5 | Videos +53px, Results +136px | none | I had initially told you on #1120 that Spanish was unaffected. That was wrong — I had measured against a guessed rail width and without the site's webfont. Your report is what surfaced it; I have posted the correction there too. Fixed by spikerj/spikersoft-angular#904 (issue spikerj/spikersoft-angular#903), which covers both this and #1120 — the tabs now wrap to a second row instead of being clipped.
spikerj commented 2026-08-30 23:54:25 +00:00
Owner
Copy link
Copy source

Fixed and merged — closing.

Same root cause as #1120 and fixed by the same change (spikerj/spikersoft-angular#904). Your filing it separately is what caught an error in my first analysis - I had wrongly concluded Spanish was unaffected.

The change is on master and 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.

Fixed and merged — closing. Same root cause as #1120 and fixed by the same change (spikerj/spikersoft-angular#904). Your filing it separately is what caught an error in my first analysis - I had wrongly concluded Spanish was unaffected. The change is on `master` and 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.
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 epic
Cross-repo epic — children live in per-repo trackers
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1121