From f33b7bd61789f9848da0e3c5ee438a7f854325eb Mon Sep 17 00:00:00 2001
From: Pirro Zani <131965864+pirrozani@users.noreply.github.com>
Date: Thu, 22 Oct 2026 21:33:08 +0300
Subject: [PATCH] fix(website): wrap mobile navigation at enlarged text sizes
 (#3598)

* fix(website): keep header navigation on one row and grid it on phones

The header grid gave the navigation only the space left beside the brand
caption and social controls, so six links wrapped onto a second line in
Greek, German, Spanish, Portuguese, Vietnamese and English at common
desktop widths.

- Size the navigation to its content and let the brand column absorb the
  remaining width; a container query hides the caption only when it no
  longer fits, replacing the fixed 851-1250px breakpoint.
- Move the navigation to its own row at 1100px and below, before one
  line can no longer hold it in any edition.
- On phones, lay the six links out as two rows of three content-sized
  columns, with a tighter gap below 340px.

* fix(website): wrap mobile navigation at narrow widths

---------

Co-authored-by: Kaoru0822 <208281322+kaoru0822-kitauji@users.noreply.github.com>
Co-authored-by: morluto <76467478+morluto@users.noreply.github.com>
---
 website/public/assets/styles.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css
index 207339e727..72c8fec279 100644
--- a/website/public/assets/styles.css
+++ b/website/public/assets/styles.css
@@ -2619,9 +2619,18 @@ pre code {
     width: calc(100% - 2.5rem);
   }
   .navigation {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    justify-content: space-between;
     gap: 0.5rem 0.8rem;
     font-size: 0.875rem;
   }
+  .navigation a {
+    min-width: 0;
+    min-height: 40px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
   .hero {
     padding-block: 3.5rem 3rem;
   }
@@ -2933,6 +2942,11 @@ html[dir="rtl"] .brand-name {
     white-space: normal;
   }
 }
+@media (max-width: 340px) {
+  .navigation {
+    column-gap: 0.6rem;
+  }
+}
 @media (max-width: 400px) {
   .header-inner {
     column-gap: 1rem;