Problem with the header when translating with Google Translate #159

New Issue

2026-05-17T22:26:47Z

Zhekrom commented

2026-05-17 22:26:47 +00:00

Title: Problem with the header when translating with Google Translate
Severity: Medium
Mode: Lesson
Lesson ID / File: N/A
Environment: Browser (specify version), OS (specify version)
Date/Time: 2026-05-17

Source Code

(Not applicable — UI layout issue during translation)

Steps to Reproduce

Open the application in a browser.
Use Google Translate to translate the page into Spanish.
Observe the header layout as translated text appears.

Expected Output

The header should remain fully visible and responsive, even when translated text expands in length.

Actual Output

Translated Spanish words become longer and push the header toward the right corner, causing parts of it to extend beyond the screen.

Suggested Priority

Medium — Google Translate is a standard browser tool, so the header layout must remain comfortable for all users.

Additional Notes

Please fix header resizing or overflow handling to support translated text without breaking the layout.

- **Title:** Problem with the header when translating with Google Translate - **Severity:** Medium - **Mode:** Lesson - **Lesson ID / File:** N/A - **Environment:** Browser (specify version), OS (specify version) - **Date/Time:** 2026-05-17 ## Source Code (Not applicable — UI layout issue during translation) ## Steps to Reproduce 1. Open the application in a browser. 2. Use Google Translate to translate the page into Spanish. 3. Observe the header layout as translated text appears. ## Expected Output The header should remain fully visible and responsive, even when translated text expands in length. ## Actual Output Translated Spanish words become longer and push the header toward the right corner, causing parts of it to extend beyond the screen. ## Suggested Priority Medium — Google Translate is a standard browser tool, so the header layout must remain comfortable for all users. ## Additional Notes Please fix header resizing or overflow handling to support translated text without breaking the layout.

Screenshot 2026-05-17 181706.png

240 KiB

spikerj commented

2026-06-08 20:59:03 +00:00

Fix proposed in spikersoft-angular PR #23. Root cause: the desktop nav row (.nav-menu) had flex-grow: 1 with no shrink/overflow handling, so when Google Translate lengthened the labels the row's intrinsic width pushed the logo and user/account controls past the right edge. The fix lets the nav row shrink and clip its overflow while pinning the logo and account controls and capping the toolbar to the viewport width.

Fix proposed in spikersoft-angular PR #23. Root cause: the desktop nav row (`.nav-menu`) had `flex-grow: 1` with no shrink/overflow handling, so when Google Translate lengthened the labels the row's intrinsic width pushed the logo and user/account controls past the right edge. The fix lets the nav row shrink and clip its overflow while pinning the logo and account controls and capping the toolbar to the viewport width.

spikerj closed this issue

2026-06-09 14:30:29 +00:00

spikerj referenced this issue

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

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

spikerj referenced this issue

2026-07-11 23:26:26 +00:00

Auditable blog post hide/remove for staff (two-tier moderation + immutable audit trail) #476

spikerj referenced this issue

2026-07-30 18:13:28 +00:00

Menu bar: declutter top-level nav + drive desktop/mobile menus from one model #904

Sign in to join this conversation.