UI incorrectly displayed

[midaksh]

Closes #1237

The navbar layout broke when switching to languages with longer words (e.g. Ukrainian, Russian). Nav links wrapped to a second line and the Donate button was clipped or hidden.

Changes: assets/css/header.css

• white-space: nowrap on all nav links, prevents any translated text from wrapping inside a link, regardless of language
• clamp() on font-size and padding — font and spacing scale down proportionally on tighter viewports instead of staying fixed.
• fit-content pill width — the navbar pill now sizes to its content and stays centered with margin-inline: auto, so it expands equally on both sides instead of overflowing to the right.
• Symmetric container padding — all outer inset consolidated on the container equally (left = right), removing previously inconsistent per-element offsets.

Below are some images:

English (Before)

Russian

Ukrainian

[midaksh]

Hey @Calinou, is there any feedback for this, or anything else that needs to be done?

[midaksh]

Hey @Calinou if there are some issues here, I can tak this to a draft PR else it is open for review let me know if everything is fine.
Thanks

[midaksh]

Hey @Calinou should I close the PR ?

[JohnVeness]

I'm not @Calinou, but can you show some before images for Russian and Ukrainian, to better show what you've changed?

[midaksh]

Hi @Calinou, below are the attached images for the before comparision, and the output result for the same is already in the above description.

Ukrainian Before:

Same goes for Russian:

As you can clearly see the menu/header bar text is not aligned as mentioned in #1237

This is a fix for that, let me know if there is something else that you need