morluto/rea

Fork 0

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

[GH-ISSUE #3804] [Bug] Language-picker arrow is small, misaligned, and does not reflect open state #1476

New issue

Closed

opened 2026-10-16 21:05:53 +00:00 by bsakaguchi · 2 comments

bsakaguchi commented

2026-10-16 21:05:53 +00:00

Owner

Originally created by @hi2242 on GitHub (Oct 15, 2026).
Original GitHub issue: https://github.com/morluto/rea/issues/3804

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

In the English header, the language-picker arrow looks too small and sits low beside the language name. It continues to point down when the menu is open, so it does not show the disclosure state.

Reproduction

Open the English website and expand the language picker. The screenshots below show the arrow before and after the fix, with the menu collapsed and expanded.

I also checked additional device presets using the browser developer-tools device toolbar. These checks cover device emulation. Specific presets, viewport widths, and browser/version details are not listed here. The local preview's HTML and CSS were also checked over HTTP.

Expected behavior

Use a clearly sized, vertically centered chevron: down when collapsed and up when expanded. The icon should inherit the control's color and remain legible independently of the text font.

Impact and scope

The arrow is harder to read and does not indicate whether the menu is open. I checked the layout using the browser developer-tools device toolbar as well. Device emulation does not establish behavior on physical devices or other browser engines. Header navigation wrapping is tracked separately in #3597 and #3598.

REA version

Source baseline: d69acc3455c33f90a2fc4381db43d38b6af50622. NOT_ENOUGH_INFO — the screenshots' exact deployment revision is not recorded.

Runtime and platform

Local preview: Windows, Python 3.13.1. I used the browser developer-tools device toolbar to check additional device presets. NOT_ENOUGH_INFO — exact preset names, browser/version, zoom, and viewport sizes are not listed here. No analysis provider is involved.

Target and artifact context

Shared website language picker; before-and-after PNG header screenshots below.

Interface

Other — website UI

Earliest failure stage

Unknown — none of the form's CLI/MCP stages describes CSS rendering.

Relevant output or evidence

The original before-and-after PNGs are preserved on a separate evidence branch. Different crops, widths, and star counts limit the comparison to the arrow's appearance, alignment, and direction. Open an image for full size.

State	Before	After
Collapsed
Expanded

Narrow-header check with a long language name

Following the alignment suggestion, I also checked a narrow header with Portuguese selected. The attached screenshot shows the long language name truncated with an ellipsis while the chevron remains vertically aligned. The navigation moves onto rows below the brand and header controls as the header narrows. I did not observe the suggested chevron-alignment problem in this checked layout.

Source-derived: the existing label rules use min-inline-size: 0, overflow: hidden, text-overflow: ellipsis, and white-space: nowrap; the chevron uses flex-shrink: 0. The responsive header moves navigation to its second grid row at widths up to 850px. See the label and chevron styles and the responsive header rules.

This screenshot adds evidence for the checked collapsed-picker layout; exact viewport size, zoom, and browser version were not recorded. Header-navigation wrapping remains tracked separately in #3597 / #3598.

Analysis or suspected cause

Source-derived: the shared stylesheet uses the text glyph ⌄ in summary::after without icon dimensions or an open-state override. Its visible size and baseline depend on font metrics. The proposed fix replaces it with a centered SVG mask and rotates it for details[open].

Additional context

The fix changes only the shared stylesheet. The screenshots and manual device-toolbar checks provide ordinary-mode visual evidence. Final-head checks at ea98e97c396ced13dd5f5a233515bb22fa64eefd now pass: the complete website check (including sharing-PNG generation and 16/16 regression tests), npm run check, and the pre-push npm run check:fast. The previous missing-Cairo limitation is resolved.

The high-contrast review also identified a source-level forced-color paint issue with the SVG mask. The follow-up scopes forced-color-adjust: none and system CanvasText paint to the chevron in forced-colors: active. Actual Windows High Contrast and browser forced-colors emulation have not been executed for this follow-up; the existing screenshots do not establish that coverage. See #3805 for the approach, checks, and remaining manual validation.

Originally created by @hi2242 on GitHub (Oct 15, 2026). Original GitHub issue: https://github.com/morluto/rea/issues/3804 ### 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 In the English header, the language-picker arrow looks too small and sits low beside the language name. It continues to point down when the menu is open, so it does not show the disclosure state. ### Reproduction Open the English website and expand the language picker. The screenshots below show the arrow before and after the fix, with the menu collapsed and expanded. I also checked additional device presets using the browser developer-tools device toolbar. These checks cover device emulation. Specific presets, viewport widths, and browser/version details are not listed here. The local preview's HTML and CSS were also checked over HTTP. ### Expected behavior Use a clearly sized, vertically centered chevron: down when collapsed and up when expanded. The icon should inherit the control's color and remain legible independently of the text font. ### Impact and scope The arrow is harder to read and does not indicate whether the menu is open. I checked the layout using the browser developer-tools device toolbar as well. Device emulation does not establish behavior on physical devices or other browser engines. Header navigation wrapping is tracked separately in #3597 and #3598. ### REA version Source baseline: `d69acc3455c33f90a2fc4381db43d38b6af50622`. `NOT_ENOUGH_INFO` — the screenshots' exact deployment revision is not recorded. ### Runtime and platform Local preview: Windows, Python 3.13.1. I used the browser developer-tools device toolbar to check additional device presets. `NOT_ENOUGH_INFO` — exact preset names, browser/version, zoom, and viewport sizes are not listed here. No analysis provider is involved. ### Target and artifact context Shared website language picker; before-and-after PNG header screenshots below. ### Interface Other — website UI ### Earliest failure stage Unknown — none of the form's CLI/MCP stages describes CSS rendering. ### Relevant output or evidence The original before-and-after PNGs are preserved on a separate evidence branch. Different crops, widths, and star counts limit the comparison to the arrow's appearance, alignment, 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) | #### Narrow-header check with a long language name Following [the alignment suggestion](https://github.com/morluto/rea/issues/3804#issuecomment-6184840984), I also checked a narrow header with Portuguese selected. The attached screenshot shows the long language name truncated with an ellipsis while the chevron remains vertically aligned. The navigation moves onto rows below the brand and header controls as the header narrows. I did not observe the suggested chevron-alignment problem in this checked layout. ![Narrow header: Portuguese label truncated with an ellipsis, aligned down chevron, and navigation below the header controls](https://raw.githubusercontent.com/hi2242/rea/cb54ee624af918bc68b29bfab3f131e740d6c87e/language-picker/narrow-portuguese.png) Source-derived: the existing label rules use `min-inline-size: 0`, `overflow: hidden`, `text-overflow: ellipsis`, and `white-space: nowrap`; the chevron uses `flex-shrink: 0`. The responsive header moves navigation to its second grid row at widths up to 850px. See [the label and chevron styles](https://github.com/hi2242/rea/blob/0f48ba317a09b0ba2cef41103e04231a78e77e0d/website/public/assets/styles.css#L165) and [the responsive header rules](https://github.com/hi2242/rea/blob/0f48ba317a09b0ba2cef41103e04231a78e77e0d/website/public/assets/styles.css#L2911). This screenshot adds evidence for the checked collapsed-picker layout; exact viewport size, zoom, and browser version were not recorded. Header-navigation wrapping remains tracked separately in #3597 / #3598. ### Analysis or suspected cause Source-derived: [the shared stylesheet](https://github.com/morluto/rea/blob/d69acc3455c33f90a2fc4381db43d38b6af50622/website/public/assets/styles.css#L186) uses the text glyph `⌄` in `summary::after` without icon dimensions or an open-state override. Its visible size and baseline depend on font metrics. The proposed fix replaces it with a centered SVG mask and rotates it for `details[open]`. ### Additional context The fix changes only the shared stylesheet. The screenshots and manual device-toolbar checks provide ordinary-mode visual evidence. Final-head checks at `ea98e97c396ced13dd5f5a233515bb22fa64eefd` now pass: the complete website check (including sharing-PNG generation and 16/16 regression tests), `npm run check`, and the pre-push `npm run check:fast`. The previous missing-Cairo limitation is resolved. [The high-contrast review](https://github.com/morluto/rea/pull/3805#discussion_r4279727954) also identified a source-level forced-color paint issue with the SVG mask. The follow-up scopes `forced-color-adjust: none` and system `CanvasText` paint to the chevron in `forced-colors: active`. Actual Windows High Contrast and browser forced-colors emulation have not been executed for this follow-up; the existing screenshots do not establish that coverage. See #3805 for the approach, checks, and remaining manual validation.

bsakaguchi commented

2026-10-16 21:05:54 +00:00

Author

Owner

@XinwangTao commented on GitHub (Oct 15, 2026):

Confirmed — the small, low-hanging glyph reads more like a stray character than a disclosure control, and keeping it pointing down while the menu is open makes the open state ambiguous. Agree with the fix direction: a larger, vertically centered chevron that flips to up when expanded, inheriting the control colour, is the right pattern. The before/after screenshots and the device-toolbar checks in #3805 cover the collapse and expanded states well; my only minor suggestion is to verify the chevron keeps its alignment when the language name wraps or the header is narrow (#3597/#3598 territory).

@XinwangTao commented on GitHub (Oct 15, 2026): Confirmed — the small, low-hanging glyph reads more like a stray character than a disclosure control, and keeping it pointing down while the menu is open makes the open state ambiguous. Agree with the fix direction: a larger, vertically centered chevron that flips to up when expanded, inheriting the control colour, is the right pattern. The before/after screenshots and the device-toolbar checks in #3805 cover the collapse and expanded states well; my only minor suggestion is to verify the chevron keeps its alignment when the language name wraps or the header is narrow (#3597/#3598 territory).

bsakaguchi commented

2026-10-16 21:05:55 +00:00

Author

Owner

@hi2242 commented on GitHub (Oct 15, 2026):

@XinwangTao Thanks for the helpful suggestion! It prompted me to check this case and add the screenshot and supporting CSS references to the issue, which makes the report more complete.

In the narrow-header layout I checked, the long Portuguese language name is automatically truncated with an ellipsis, and the chevron stays aligned. The navigation moves onto rows below the brand and header controls when space is limited. I did not observe the alignment problem you raised in this checked layout.

The additional screenshot and explanation are now in the issue. Thanks again for helping strengthen the verification!

@hi2242 commented on GitHub (Oct 15, 2026): @XinwangTao Thanks for the helpful suggestion! It prompted me to check this case and add the screenshot and supporting CSS references to the issue, which makes the report more complete. In the narrow-header layout I checked, the long Portuguese language name is automatically truncated with an ellipsis, and the chevron stays aligned. The navigation moves onto rows below the brand and header controls when space is limited. I did not observe the alignment problem you raised in this checked layout. The additional screenshot and explanation are now in the issue. Thanks again for helping strengthen the verification!

bsakaguchi referenced this issue

2026-10-17 21:11:45 +00:00

[PR #1476] [MERGED] fix(apple): decode binary app Info.plist files without plutil #2914

bsakaguchi closed this issue

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

bsakaguchi referenced this issue

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

[GH-ISSUE #5589] [Bug] Resource inspection rejects app bundles without CFBundleExecutable #3394