hermes - 💡(How to fix) Fix [Bug]: Dashboard language switcher dropdown overlaps nearby header controls and clips menu items

Summary

The Hermes dashboard/web language switcher dropdown appears to have a layout regression: when opened near the lower header area, the menu overlays adjacent UI (notably the nearby search area), appears visually mis-anchored, and can clip option rows at the viewport boundary.

I checked existing issues before filing this:

• Closed related issue: #25466 — language pane dropdown below viewport bottom
• Open but different issue: #26665 — saved Desktop language resets to English on restart
• Open but different TUI/CJK rendering issues: #17602, #17603

I could not find an open issue tracking this specific dashboard/web dropdown overlap + clipping behavior, so filing this as a fresh bug.

Bug Description

From the attached screenshot provided in chat, the language menu:

• opens in a position that overlaps unrelated header content
• visually collides with the nearby SEARCH area
• looks partially clipped/cropped vertically
• appears awkwardly anchored relative to the language trigger row
• may also expose a label rendering problem for at least one locale row

The component appears to be the web dashboard language picker in web/src/components/LanguageSwitcher.tsx.

Scope

In scope

• Dropdown positioning for the web/dashboard language switcher
• Preventing overlap with neighboring header controls
• Preventing clipping when the trigger is near a viewport edge
• Verifying locale rows render cleanly and remain fully visible

Out of scope

• Desktop language persistence bugs (#26665)
• General TUI CJK ghosting/scattering issues (#17602, #17603)
• Broader i18n coverage / adding new locales

Steps to Reproduce

1. Start Hermes dashboard/web UI
2. Navigate to a page/header state where the language switcher sits near the bottom of a constrained header area
3. Click the language switcher trigger (flag + locale text)
4. Observe the dropdown layout relative to the surrounding header controls

Expected Behavior

• The dropdown should stay visually attached to the trigger
• It should choose a placement that remains fully inside the viewport
• It should not overlap or obscure unrelated controls like search
• All language options should remain readable and fully visible

Actual Behavior

• The dropdown can overlap nearby header UI
• The menu can clip at the viewport boundary
• Placement appears incorrect for constrained layouts
• At least one option row may render with a visibly wrong/corrupted label in the reported screenshot

Suspected Area

Likely area to inspect:

• web/src/components/LanguageSwitcher.tsx

Current implementation uses a simple absolutely-positioned menu:

• container: relative inline-flex
• menu: absolute right-0 top-full mt-1 ... max-h-80 overflow-y-auto

That static placement likely does not account for available viewport space above/below the trigger.

Acceptance Criteria

• Language switcher dropdown stays fully inside the viewport
• Dropdown does not overlap the nearby search/header controls in the reported layout
• When there is insufficient space below, the menu repositions safely (or otherwise remains fully visible)
• Locale option rows are readable and not visually clipped
• Manual verification includes a screenshot/video proving the fixed layout

Risks / Notes

• A pure CSS-only absolute positioning approach may fail in multiple dashboard layouts
• This may be a regression adjacent to the previously closed #25466 rather than an exact duplicate
• If locale text corruption is real (not screenshot artifact), there may be a second i18n/rendering issue worth splitting after reproduction

Flow

flowchart TD
  A[User opens dashboard] --> B[Clicks language switcher]
  B --> C[Dropdown opens with static absolute positioning]
  C --> D{Enough viewport space below and beside trigger?}
  D -- Yes --> E[Menu appears correctly]
  D -- No --> F[Menu overlaps search/header or clips at boundary]
  F --> G[User cannot clearly read/select locale]