morluto/rea

Fork 0

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

[PR #3805] [MERGED] fix(website): align the language picker chevron #5910

New issue

Closed

opened 2026-10-31 01:10:21 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-31 01:10:21 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/morluto/rea/pull/3805
Author: @hi2242
Created: 10/15/2026
Status: ✅ Merged
Merged: 10/22/2026
Merged by: @morluto

Base: main ← Head: fix/language-picker-chevron

📝 Commits (2)

0f48ba3 fix(website): align the language picker chevron
ea98e97 fix(website): preserve the chevron in forced colors

📊 Changes

1 file changed (+16 additions, -1 deletions)

View changed files

📝 website/public/assets/styles.css (+16 -1)

📄 Description

Summary

Fixes #3804. Replace the language picker's small, low-positioned text arrow with a centered chevron that points down when collapsed and up when expanded.

Problem and expected behavior

The shared stylesheet uses the font glyph ⌄ without icon dimensions or an open-state override. The supplied screenshots show its small size and low alignment, and the unchanged down arrow when the menu is open. The disclosure indicator should be legible, centered, and reflect the menu state.

Change and scope

Change only website/public/assets/styles.css: use a 0.75rem-square SVG mask with rounded strokes and currentColor, then rotate it 180 degrees for details[open]. The existing flex alignment centers the icon. A follow-up for the high-contrast review adds @media (forced-colors: active) on the chevron pseudo-element only, with forced-color-adjust: none and background-color: CanvasText. This preserves the masked icon's foreground paint using the user's system palette while leaving the rest of the control under normal forced-color handling. Native <details> interaction, labels, templates, and translations stay intact.

This is an AI-assisted website usability fix within the contribution scope. The independent header-navigation wrapping report remains tracked by #3597 / #3598.

Before and after

Before-and-after screenshots of the collapsed and expanded picker. The original PNGs are preserved on a separate evidence branch. Different crops, widths, and star counts limit the comparison to the chevron's appearance and direction. Open an image for full size.

State	Before	After
Collapsed
Expanded

High-contrast review: before and after

After the review feedback, I tested the code before and after the fix with forced-colors: active in DevTools. Before the fix, the chevron disappeared. After the fix, I could see the black downward chevron, aligned with the language name.

Before feedback fix	After feedback fix

I added forced-color-adjust: none and background-color: CanvasText to the chevron in forced-colors mode so it keeps its visible paint using the system text color. I took these screenshots with the menu closed and a light background in DevTools emulation.

Contract and boundary impact

Semantic owner and earliest changed stage: the shared stylesheet's language-picker pseudo-element.
Contribution scope fit and linked maintainer decision: existing website usability; a provider/capability scope decision is not applicable.
CLI and MCP/tool-catalog contract: unchanged.
Provider, bridge, target-format, or platform compatibility: no provider changes. Manual device-emulation checks are listed below; compatibility across different browser engines remains unverified.
Evidence, artifact, provenance, or reconstruction contract: unchanged. Original screenshot files are preserved.
Target selection, authority, upstream behavior, and cleanup details: not applicable to this CSS-only change.
Generated metadata, package, or installation impact: none. Preview output and screenshots are outside the PR's source diff.

Expected effects:

Documentation or usability only; no target interaction.

Evidence and regression coverage

Tests added or updated: none for this reversible presentation change; existing source/catalog checks and a rendered preview were used.
Base evidence: before-and-after screenshots, manual device-toolbar checks, and inspection of summary::after at d69acc3455c33f90a2fc4381db43d38b6af50622.
User-visible CLI/MCP output: not applicable.
Remaining proof gaps: the new forced-colors screenshots cover the collapsed picker in an emulated light palette. Expanded-state forced-colors rendering, a dark forced-color palette, actual Windows contrast themes, physical-device coverage, and cross-browser-engine compatibility remain unverified. The automated tests alone do not establish icon visibility at paint time. Specific device presets, viewport sizes, browser/version, and zoom are not listed here. Real-provider verification is not applicable to this CSS change.

Validation performed

Final head: ea98e97c396ced13dd5f5a233515bb22fa64eefd. Windows, Python 3.13.1, pinned Node 24.18.0/npm 11.16.0, CairoSVG 2.9.1 and native Cairo 1.18.6 with DejaVu Sans 2.37. PYTHONUTF8=1 applies to child Python processes; native Cairo is exposed through the local DLL directory. These results supersede the previous missing-Cairo and unrun-npm entries.

website/.venv/Scripts/python.exe -X utf8 scripts/website.py check — passed: 380 reading pages generated in 20 languages, sharing PNG generated, 382 HTML pages/26,087 local references and metadata/assets verified, and all 16 regression tests passed.
npm run check — passed: all 6 Turbo tasks and architecture guards; existing lint warnings remain, with 0 errors.
npm run check:fast — passed in the pre-push hook: 2/2 tasks successful.
Python tinycss2 parsing — the shared stylesheet, nested forced-colors rule and declarations parse successfully; the override is scoped to .language-picker summary::after.
git diff d69acc3455c33f90a2fc4381db43d38b6af50622..HEAD --check — passed.
Local preview HTTP — the served stylesheet returned 200 and matched committed CSS byte-for-byte, including the forced-colors rule. This is transport/source verification, not a visual high-contrast reproduction.
Manual forced-colors emulation: the new before/after screenshots above show the collapsed chevron disappearing before the feedback fix and remaining visible after it, in the shown light palette. This updates the previous statement that forced-colors emulation had not been checked.
Ordinary-mode visual evidence remains the original before/after screenshots and my manual device-toolbar checks. The issue also includes a narrow-header screenshot showing language-label ellipsis and an aligned chevron.

Source-derived reasoning: forced colors can replace background paint; the SVG-mask chevron previously depended only on background-color: currentColor while the native marker was hidden. The new scoped override keeps that paint and uses CanvasText, rather than a fixed author color. The new screenshots establish the shown collapsed-state result in light-palette emulation; expanded-state emulation, a dark palette, and actual Windows contrast themes still need manual checks.

Compatibility, safety, and release

Breaking changes or migration steps: none.
Real Hopper/Ghidra, browser, or OS coverage: Windows source/render checks, ordinary-mode screenshots/device-toolbar checks, and before/after developer-tools forced-colors emulation of the collapsed picker in a light palette. Actual Windows contrast themes, physical-device coverage, and cross-browser-engine compatibility remain unverified. No provider is involved.
Package or release metadata impact: none.
Security, privacy, process, or containment review: CSS-only website presentation; no target interaction or additional JavaScript.

Author readiness

Human owner: @hi2242

I reviewed the final diff and relevant existing code, understand the change and its edge cases, and take responsibility for the complete PR, including AI-assisted work.
I checked the evidence above, confirmed it supports the current change, and recorded meaningful validation gaps.
I declare this PR ready for initial maintainer review.

Before merge

This PR addresses a concrete problem or an agreed enhancement.
Material scope and authority questions are resolved, and any required maintainer scope decision covers the final diff.
The PR has one focused outcome and the title follows type(scope): outcome.
Related issue is linked, or the reason for not linking one is stated above.
Tests cover changed observable behavior and meaningful failure paths.
Owning docs, contracts, and generated metadata are updated where needed.
User-visible CLI/MCP changes include representative output.
I checked the final diff for secrets, unrelated cleanup, and unsupported claims.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/morluto/rea/pull/3805 **Author:** [@hi2242](https://github.com/hi2242) **Created:** 10/15/2026 **Status:** ✅ Merged **Merged:** 10/22/2026 **Merged by:** [@morluto](https://github.com/morluto) **Base:** `main` ← **Head:** `fix/language-picker-chevron` --- ### 📝 Commits (2) - [`0f48ba3`](https://github.com/morluto/rea/commit/0f48ba317a09b0ba2cef41103e04231a78e77e0d) fix(website): align the language picker chevron - [`ea98e97`](https://github.com/morluto/rea/commit/ea98e97c396ced13dd5f5a233515bb22fa64eefd) fix(website): preserve the chevron in forced colors ### 📊 Changes **1 file changed** (+16 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `website/public/assets/styles.css` (+16 -1) </details> ### 📄 Description ## Summary Fixes #3804. Replace the language picker's small, low-positioned text arrow with a centered chevron that points down when collapsed and up when expanded. ## Problem and expected behavior The shared stylesheet uses the font glyph `⌄` without icon dimensions or an open-state override. The supplied screenshots show its small size and low alignment, and the unchanged down arrow when the menu is open. The disclosure indicator should be legible, centered, and reflect the menu state. ## Change and scope Change only `website/public/assets/styles.css`: use a 0.75rem-square SVG mask with rounded strokes and `currentColor`, then rotate it 180 degrees for `details[open]`. The existing flex alignment centers the icon. A follow-up for [the high-contrast review](https://github.com/morluto/rea/pull/3805#discussion_r4279727954) adds `@media (forced-colors: active)` on the chevron pseudo-element only, with `forced-color-adjust: none` and `background-color: CanvasText`. This preserves the masked icon's foreground paint using the user's system palette while leaving the rest of the control under normal forced-color handling. Native `<details>` interaction, labels, templates, and translations stay intact. This is an AI-assisted website usability fix within the [contribution scope](https://github.com/morluto/rea/blob/main/CONTRIBUTING.md#contribution-scope). The independent header-navigation wrapping report remains tracked by #3597 / #3598. ## Before and after Before-and-after screenshots of the collapsed and expanded picker. The original PNGs are preserved on a separate evidence branch. Different crops, widths, and star counts limit the comparison to the chevron's appearance and direction. Open an image for full size. | State | Before | After | | --- | --- | --- | | Collapsed | ![Before: small down glyph](https://raw.githubusercontent.com/hi2242/rea/e06e5e7b0db5face51f4d878b8bd641673266772/language-picker/before-closed.png) | ![After: centered down chevron](https://raw.githubusercontent.com/hi2242/rea/e06e5e7b0db5face51f4d878b8bd641673266772/language-picker/after-closed.png) | | Expanded | ![Before: down glyph while menu is open](https://raw.githubusercontent.com/hi2242/rea/e06e5e7b0db5face51f4d878b8bd641673266772/language-picker/before-open.png) | ![After: upward chevron](https://raw.githubusercontent.com/hi2242/rea/e06e5e7b0db5face51f4d878b8bd641673266772/language-picker/after-open.png) | ### High-contrast review: before and after After [the review feedback](https://github.com/morluto/rea/pull/3805#discussion_r4279727954), I tested the code before and after the fix with `forced-colors: active` in DevTools. Before the fix, the chevron disappeared. After the fix, I could see the black downward chevron, aligned with the language name. | Before feedback fix | After feedback fix | | --- | --- | | ![Forced-colors emulation before: collapsed English picker without a visible chevron](https://raw.githubusercontent.com/hi2242/rea/96f0a0b8531f510627edaea3f28c4098444af4a7/language-picker/forced-colors-before.png) | ![Forced-colors emulation after: collapsed English picker with a visible black downward chevron](https://raw.githubusercontent.com/hi2242/rea/96f0a0b8531f510627edaea3f28c4098444af4a7/language-picker/forced-colors-after.png) | I added `forced-color-adjust: none` and `background-color: CanvasText` to the chevron in forced-colors mode so it keeps its visible paint using the system text color. I took these screenshots with the menu closed and a light background in DevTools emulation. ## Contract and boundary impact - Semantic owner and earliest changed stage: the shared stylesheet's language-picker pseudo-element. - Contribution scope fit and linked maintainer decision: existing website usability; a provider/capability scope decision is not applicable. - CLI and MCP/tool-catalog contract: unchanged. - Provider, bridge, target-format, or platform compatibility: no provider changes. Manual device-emulation checks are listed below; compatibility across different browser engines remains unverified. - Evidence, artifact, provenance, or reconstruction contract: unchanged. Original screenshot files are preserved. - Target selection, authority, upstream behavior, and cleanup details: not applicable to this CSS-only change. - Generated metadata, package, or installation impact: none. Preview output and screenshots are outside the PR's source diff. Expected effects: - [x] Documentation or usability only; no target interaction. ## Evidence and regression coverage - Tests added or updated: none for this reversible presentation change; existing source/catalog checks and a rendered preview were used. - Base evidence: before-and-after screenshots, manual device-toolbar checks, and inspection of `summary::after` at `d69acc3455c33f90a2fc4381db43d38b6af50622`. - User-visible CLI/MCP output: not applicable. - Remaining proof gaps: the new forced-colors screenshots cover the collapsed picker in an emulated light palette. Expanded-state forced-colors rendering, a dark forced-color palette, actual Windows contrast themes, physical-device coverage, and cross-browser-engine compatibility remain unverified. The automated tests alone do not establish icon visibility at paint time. Specific device presets, viewport sizes, browser/version, and zoom are not listed here. Real-provider verification is not applicable to this CSS change. ## Validation performed Final head: `ea98e97c396ced13dd5f5a233515bb22fa64eefd`. Windows, Python 3.13.1, pinned Node 24.18.0/npm 11.16.0, CairoSVG 2.9.1 and native Cairo 1.18.6 with DejaVu Sans 2.37. `PYTHONUTF8=1` applies to child Python processes; native Cairo is exposed through the local DLL directory. These results supersede the previous missing-Cairo and unrun-npm entries. - `website/.venv/Scripts/python.exe -X utf8 scripts/website.py check` — passed: 380 reading pages generated in 20 languages, sharing PNG generated, 382 HTML pages/26,087 local references and metadata/assets verified, and all 16 regression tests passed. - `npm run check` — passed: all 6 Turbo tasks and architecture guards; existing lint warnings remain, with 0 errors. - `npm run check:fast` — passed in the pre-push hook: 2/2 tasks successful. - Python `tinycss2` parsing — the shared stylesheet, nested forced-colors rule and declarations parse successfully; the override is scoped to `.language-picker summary::after`. - `git diff d69acc3455c33f90a2fc4381db43d38b6af50622..HEAD --check` — passed. - Local preview HTTP — the served stylesheet returned 200 and matched committed CSS byte-for-byte, including the forced-colors rule. This is transport/source verification, not a visual high-contrast reproduction. - Manual forced-colors emulation: the new before/after screenshots above show the collapsed chevron disappearing before the feedback fix and remaining visible after it, in the shown light palette. This updates the previous statement that forced-colors emulation had not been checked. - Ordinary-mode visual evidence remains the original before/after screenshots and my manual device-toolbar checks. The [issue also includes a narrow-header screenshot](https://github.com/morluto/rea/issues/3804) showing language-label ellipsis and an aligned chevron. Source-derived reasoning: [forced colors can replace background paint](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors); the SVG-mask chevron previously depended only on `background-color: currentColor` while the native marker was hidden. The new scoped override keeps that paint and uses `CanvasText`, rather than a fixed author color. The new screenshots establish the shown collapsed-state result in light-palette emulation; expanded-state emulation, a dark palette, and actual Windows contrast themes still need manual checks. ## Compatibility, safety, and release - Breaking changes or migration steps: none. - Real Hopper/Ghidra, browser, or OS coverage: Windows source/render checks, ordinary-mode screenshots/device-toolbar checks, and before/after developer-tools forced-colors emulation of the collapsed picker in a light palette. Actual Windows contrast themes, physical-device coverage, and cross-browser-engine compatibility remain unverified. No provider is involved. - Package or release metadata impact: none. - Security, privacy, process, or containment review: CSS-only website presentation; no target interaction or additional JavaScript. ## Author readiness Human owner: @hi2242 - [x] I reviewed the final diff and relevant existing code, understand the change and its edge cases, and take responsibility for the complete PR, including AI-assisted work. - [x] I checked the evidence above, confirmed it supports the current change, and recorded meaningful validation gaps. - [x] I declare this PR ready for initial maintainer review. ## Before merge - [ ] This PR addresses a concrete problem or an agreed enhancement. - [ ] Material scope and authority questions are resolved, and any required maintainer scope decision covers the final diff. - [ ] The PR has one focused outcome and the title follows `type(scope): outcome`. - [ ] Related issue is linked, or the reason for not linking one is stated above. - [ ] Tests cover changed observable behavior and meaningful failure paths. - [ ] Owning docs, contracts, and generated metadata are updated where needed. - [ ] User-visible CLI/MCP changes include representative output. - [ ] I checked the final diff for secrets, unrelated cleanup, and unsupported claims. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

bsakaguchi

2026-10-31 01:10:21 +00:00

closed this issue
added the
pull-request
label

Rows
Columns