From 9a670f61cf584bb4576422733faad46daa639951 Mon Sep 17 00:00:00 2001
From: alex <alex.xinliu@outlook.com>
Date: Sun, 1 Nov 2026 22:09:34 +0800
Subject: [PATCH] Make settings dropdowns and the editor wordmark look right

An unlayered `font: inherit; color: inherit` rule on buttons and form
controls overrode every Tailwind text and colour utility on them, so the
settings selects rendered at full size and the selected light-theme
button had dark text on green. Tailwind's preflight already inherits
both in its base layer, so the rule now only sets touch-action.

The two settings selects share one SettingsSelect with a chevron and a
single focus ring, and the toolbar wordmark matches the site header.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/app/page.tsx | 31 ++++++++++++++++++++------
 apps/web/src/app/globals.css           |  4 ++--
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/[locale]/app/page.tsx b/apps/web/src/app/[locale]/app/page.tsx
index da5f85d..c1a8ab8 100644
--- a/apps/web/src/app/[locale]/app/page.tsx
+++ b/apps/web/src/app/[locale]/app/page.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { BrandMark } from "@/app/components/BrandMark";
 import {
+  ComponentProps,
   DragEvent,
   FormEvent,
   KeyboardEvent as ReactKeyboardEvent,
@@ -20,6 +21,7 @@ import {
 import {
   BookOpen,
   Check,
+  ChevronDown,
   ChevronLeft,
   ChevronUp,
   CircleAlert,
@@ -110,6 +112,21 @@ const PSEUDO_EXTENSION = ".pseudo";
 const EMPTY_DIAGNOSTICS: Diagnostic[] = [];
 const DIALOG_CARD_CLASS =
   "w-[calc(100%-2rem)] border border-[var(--separator)] bg-[var(--surface)] p-6 text-[var(--text)] shadow-[var(--shadow-modal)]";
+const SETTINGS_SELECT_CLASS =
+  "h-9 w-full cursor-pointer appearance-none truncate rounded-lg border border-[var(--separator)] bg-[var(--surface)] pl-3 pr-9 text-sm font-medium text-[var(--text)] outline-none transition hover:border-[var(--text3)] focus-visible:border-[var(--accent)] focus-visible:ring-2 focus-visible:ring-[var(--accent)]/30";
+
+function SettingsSelect({ className, ...props }: ComponentProps<"select">) {
+  return (
+    <span className={`relative inline-flex shrink-0 ${className ?? ""}`}>
+      <select {...props} className={SETTINGS_SELECT_CLASS} />
+      <ChevronDown
+        size={16}
+        aria-hidden
+        className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text3)]"
+      />
+    </span>
+  );
+}
 
 type TouchTab = "editor" | "files" | "output" | "settings";
 type ManualSaveStatus = "idle" | "saving" | "saved" | "error";
@@ -920,18 +937,18 @@ export default function HomePage() {
       <div className="rounded-xl border border-[var(--separator)] bg-[var(--surface2)] px-4 py-3">
         <label className="flex items-center justify-between gap-3">
           <span className="text-sm font-semibold text-[var(--text)]">{t.settings.examSyntax}</span>
-          <select
+          <SettingsSelect
             value={currentSyntax.id}
             aria-label={t.settings.examSyntax}
             onChange={(event) => handleSyntaxChange(event.target.value as WorkspaceSyntaxId)}
-            className="h-9 max-w-[220px] rounded-lg border border-[var(--separator)] bg-[var(--bg)] px-3 text-sm font-semibold text-[var(--text)] outline-none focus:border-[var(--accent)] cursor-pointer"
+            className="w-[220px] max-w-[60%]"
           >
             {SYNTAX_OPTIONS.map((option) => (
               <option key={option.id} value={option.id}>
                 {option.label}
               </option>
             ))}
-          </select>
+          </SettingsSelect>
         </label>
         <p className="mt-2 text-xs text-[var(--text3)]">
           {currentSyntax.board} {currentSyntax.syllabus}. {currentSyntax.description}
@@ -994,14 +1011,14 @@ export default function HomePage() {
       <div className="rounded-xl border border-[var(--separator)] bg-[var(--surface2)] px-4 py-3">
         <div className="flex items-center justify-between gap-3">
           <span className="text-sm font-semibold text-[var(--text)]">{t.settings.autosaveInterval}</span>
-          <select
+          <SettingsSelect
             value={autoSaveIntervalMinutes}
             aria-label={t.settings.autosaveIntervalMinutes}
             onChange={(event) => handleAutoSaveIntervalChange(Number(event.target.value))}
-            className="h-9 rounded-lg border border-[var(--separator)] bg-[var(--bg)] px-3 text-sm font-semibold text-[var(--text)] outline-none focus:border-[var(--accent)] cursor-pointer"
+            className="w-[220px] max-w-[60%]"
           >
             {[1, 2, 3, 5, 10, 15, 30, 60].map((minutes) => <option key={minutes} value={minutes}>{t.settings.minute(minutes)}</option>)}
-          </select>
+          </SettingsSelect>
         </div>
         <p className="mt-2 text-xs text-[var(--text3)]">
           {t.settings.autosaveEvery(autoSaveIntervalMinutes)}
@@ -2088,7 +2105,7 @@ export default function HomePage() {
               aria-label={t.toolbar.home}
             >
               <BrandMark size={20} />
-              <span className="text-xs font-semibold tracking-[0.12em] text-[var(--text2)]">
+              <span className="text-[13px] font-semibold text-[var(--text)]">
                 PseudoEditor
               </span>
             </Link>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index ace6c18..d0ed1e1 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -285,12 +285,12 @@ body {
   font-family: var(--font-sans), "Inter", system-ui, sans-serif;
 }
 
+/* Tailwind's preflight already inherits font and color in its base layer; setting them here,
+   outside a layer, would override every text and color utility on these elements. */
 button,
 input,
 textarea,
 select {
-  font: inherit;
-  color: inherit;
   touch-action: manipulation;
 }