morluto/rea

Fork 0

mirror of https://github.com/morluto/rea.git synced 2026-11-05 06:45:22 +00:00

[GH-ISSUE #3597] [Bug] Website header navigation wraps onto a second line #1337

New issue

Closed

opened 2026-10-16 21:04:26 +00:00 by bsakaguchi · 2 comments

bsakaguchi commented

2026-10-16 21:04:26 +00:00

Owner

Originally created by @pirrozani on GitHub (Oct 14, 2026).
Original GitHub issue: https://github.com/morluto/rea/issues/3597

Before submitting

I searched the open and closed issues for a related report.
I removed credentials, tokens, private paths, and sensitive target data.

Area

Documentation

Observed behavior

Since the Contributors link was added (#3520), the six header links no longer fit in the header's middle grid column, so the last link wraps onto a second line. On rea.tools/el/ at about 1700px wide, "Συνεισφέροντες" sits alone under the other links:

On phones the links break unevenly, with one or two links left alone on the last line:

Reproduction

Open https://rea.tools/el/ (or /es/, /pt-BR/, /vi/, /de/) with the browser window wider than 1250px.
Look at the header: the navigation is split over two lines.
Narrow the window to about 900px: the navigation wraps in English too.
Narrow the window to phone width (360–430px): the links fill a line and leave the rest on an uneven second line.

Expected behavior

The navigation stays on one line on desktop in every edition, and on phones it forms an even, readable grid.

Impact and scope

Layout only, in every website edition. Measured on a local build at upstream a732c859d: on desktop the navigation needs up to about 90px more than the column provides (pt-BR, es, vi, el, de). In English it also wraps at 1700px and 1300px, and at about 900px in every Latin and Cyrillic edition.

Analysis or suspected cause

.header-inner uses grid-template-columns: auto minmax(0, 1fr) auto. The brand with its caption and the social controls take their full width, and the navigation gets only what is left over. .navigation has flex-wrap: wrap, so it wraps whenever its content is wider than that leftover space.

Originally created by @pirrozani on GitHub (Oct 14, 2026). Original GitHub issue: https://github.com/morluto/rea/issues/3597 ### Before submitting - [x] I searched the open and closed issues for a related report. - [x] I removed credentials, tokens, private paths, and sensitive target data. ### Area Documentation ### Observed behavior Since the Contributors link was added (#3520), the six header links no longer fit in the header's middle grid column, so the last link wraps onto a second line. On rea.tools/el/ at about 1700px wide, "Συνεισφέροντες" sits alone under the other links: ![Greek header on desktop, Contributors wrapped to a second line](https://github.com/pirrozani/rea/blob/pr-assets/website-nav-wrap/before-desktop.png?raw=true) On phones the links break unevenly, with one or two links left alone on the last line: ![Greek header on mobile, links wrapping unevenly](https://github.com/pirrozani/rea/blob/pr-assets/website-nav-wrap/before-mobile.png?raw=true) ### Reproduction 1. Open https://rea.tools/el/ (or /es/, /pt-BR/, /vi/, /de/) with the browser window wider than 1250px. 2. Look at the header: the navigation is split over two lines. 3. Narrow the window to about 900px: the navigation wraps in English too. 4. Narrow the window to phone width (360–430px): the links fill a line and leave the rest on an uneven second line. ### Expected behavior The navigation stays on one line on desktop in every edition, and on phones it forms an even, readable grid. ### Impact and scope Layout only, in every website edition. Measured on a local build at upstream `a732c859d`: on desktop the navigation needs up to about 90px more than the column provides (pt-BR, es, vi, el, de). In English it also wraps at 1700px and 1300px, and at about 900px in every Latin and Cyrillic edition. ### Analysis or suspected cause `.header-inner` uses `grid-template-columns: auto minmax(0, 1fr) auto`. The brand with its caption and the social controls take their full width, and the navigation gets only what is left over. `.navigation` has `flex-wrap: wrap`, so it wraps whenever its content is wider than that leftover space.

bsakaguchi referenced this issue

2026-10-17 21:01:25 +00:00

[GH-ISSUE #2187] [Feature] Let setup register Claude Code for one project (--scope local) #731

bsakaguchi referenced this issue

2026-10-17 21:10:38 +00:00

[PR #1352] [CLOSED] fix(setup): link managed skill into Claude Code skills directory #2819

bsakaguchi closed this issue

2026-10-31 00:30:39 +00:00

bsakaguchi commented

2026-10-31 00:30:40 +00:00

Author

Owner

@morluto commented on GitHub (Oct 26, 2026):

Thanks for the screenshots and viewport details. #3598 improved the mobile layout for enlarged text, but its validation did not cover the desktop and translated-language wrapping reported here. I am keeping this issue open for those remaining cases; no browser or live-site verification was performed in this triage.

@morluto commented on GitHub (Oct 26, 2026): Thanks for the screenshots and viewport details. #3598 improved the mobile layout for enlarged text, but its validation did not cover the desktop and translated-language wrapping reported here. I am keeping this issue open for those remaining cases; no browser or live-site verification was performed in this triage.

bsakaguchi commented

2026-10-31 00:30:40 +00:00

Author

Owner

@pirrozani commented on GitHub (Oct 27, 2026):

#7497 addresses the remaining cases.

Desktop and translated editions: These no longer reproduce on current main. a174892e3 reduced the header to four links, and #3851 gave the navigation more room. I measured all 23 editions on a local build in Chromium on Windows, at 30 widths from 320px to 2560px. Every edition keeps the navigation on one row from 641px upward. The smallest margin was 213px with system fonts and 115px with headers forced to Verdana, both pt-BR at 1280px. #7497 does not change desktop CSS.

Phones: On main, single-word labels still split between letters at 320–390px, including "Showcases", "Anleitungen", "Руководства" and "Посібники". #7497 lets the links share the row without shrinking below their longest word. The enlarged-text fit from #3598 is preserved.

Screenshots and the full validation, including the cases not covered (Firefox, Safari, real macOS/Linux fonts, /rea/ base path), are in the PR description.

@pirrozani commented on GitHub (Oct 27, 2026): #7497 addresses the remaining cases. **Desktop and translated editions:** These no longer reproduce on current `main`. a174892e3 reduced the header to four links, and #3851 gave the navigation more room. I measured all 23 editions on a local build in Chromium on Windows, at 30 widths from 320px to 2560px. Every edition keeps the navigation on one row from 641px upward. The smallest margin was 213px with system fonts and 115px with headers forced to Verdana, both pt-BR at 1280px. #7497 does not change desktop CSS. **Phones:** On `main`, single-word labels still split between letters at 320–390px, including "Showcases", "Anleitungen", "Руководства" and "Посібники". #7497 lets the links share the row without shrinking below their longest word. The enlarged-text fit from #3598 is preserved. Screenshots and the full validation, including the cases not covered (Firefox, Safari, real macOS/Linux fonts, `/rea/` base path), are in the PR description.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

morluto/rea#1337

No description provided.

Rows
Columns