From 313af7119cd8687bd10a468a424e243a9bc28bc2 Mon Sep 17 00:00:00 2001
From: Pirro Zani <131965864+pirrozani@users.noreply.github.com>
Date: Tue, 27 Oct 2026 17:25:04 +0200
Subject: [PATCH] fix(website): keep phone navigation labels from splitting
 mid-word (#7497)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The phone header gave each link an equal minmax(0, 1fr) column and
allowed overflow-wrap: anywhere, so single-word labels such as
"Showcases", "Anleitungen", "Руководства" and "Посібники" broke between
letters at 320-430px. Links now share the row as flex items that never
shrink below their longest word. Labels wrap only at spaces, and a word
wider than the whole row can still break, preserving the enlarged-text
fit from #3598.

Refs #3597
---
 website/public/assets/styles.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css
index 95877aa01f..e2c66c3bcf 100644
--- a/website/public/assets/styles.css
+++ b/website/public/assets/styles.css
@@ -2666,17 +2666,16 @@ pre code {
     width: calc(100% - 2.5rem);
   }
   .navigation {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    justify-content: space-between;
     gap: 0.5rem 0.8rem;
     font-size: 0.875rem;
   }
+  /* Share the row evenly, but never narrower than a link's longest word. */
   .navigation a {
-    min-width: 0;
+    flex: 1 1 0;
+    max-width: 100%;
     min-height: 40px;
     white-space: normal;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
   }
   .hero {
     padding-block: 3.5rem 3rem;