From aa521379dd8c406f56af9281ff093e1b774592e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A4=EC=A2=85=EA=B7=BC?=
 <137996885+hi2242@users.noreply.github.com>
Date: Fri, 23 Oct 2026 03:32:29 +0900
Subject: [PATCH] fix(website): align the language picker chevron (#3805)

* fix(website): align the language picker chevron

Replace the font-dependent down glyph with a fixed-size SVG mask that
inherits the button color and aligns within its existing flex layout.
Rotate the chevron when the native details menu is open.

Refs #3804

* fix(website): preserve the chevron in forced colors
---
 website/public/assets/styles.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css
index 687e136d8a..207339e727 100644
--- a/website/public/assets/styles.css
+++ b/website/public/assets/styles.css
@@ -184,8 +184,23 @@ section[id] {
   display: none;
 }
 .language-picker summary::after {
-  content: "⌄";
+  content: "";
   flex-shrink: 0;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+}
+.language-picker[open] summary::after {
+  transform: rotate(180deg);
+}
+@media (forced-colors: active) {
+  .language-picker summary::after {
+    /* Keep the mask visible with the user's high-contrast text color. */
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
 }
 .language-picker nav {
   position: absolute;