From 8ad9e23838372c91e6d0d186e5a0f210a6770b89 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 22:14:53 +0200
Subject: [PATCH] .native-control Opt-out: global select-Style ueberschrieb das
 System-Native
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Screenshot: dropdowns sehen immer noch wie pills aus. Grund: das
globale `select { appearance: none; background-image: var(--select-arrow);
border-radius: 999px; ... }` in index.css uebermalte die Inline-Resets von
BarSelect — globale CSS-Specificity gewann.

Fix:
- Neue `.native-control`-Klasse in index.css setzt mit `revert` alle
  pill-Overrides zurueck → WebKit/macOS rendert wieder Default-Combobox
- BarSelect: className="native-control" am <select>
- Custom-Massstab-Input: className="native-control"

Andere Selects im Projekt behalten den pill-Look (Ebenen-/Geschoss-Manager
etc.) — nur die Oberleiste opt-out.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/OberleisteApp.jsx |  4 +++-
 src/index.css         | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 867da81..5202e4c 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -102,6 +102,7 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children })
               style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
       )}
       <select
+        className="native-control"
         value={value || ''}
         disabled={disabled}
         onChange={(e) => onChange(e.target.value)}
@@ -400,6 +401,7 @@ export default function OberleisteApp() {
       {customMode ? (
         <input
           ref={customInputRef}
+          className="native-control"
           disabled={isPerspective}
           type="text" placeholder="1:N"
           value={draft}
@@ -423,7 +425,7 @@ export default function OberleisteApp() {
           value={dropdownValue}
           onChange={(v) => applyDropdown(v)}
           disabled={isPerspective}
-          width={120}
+          width={140}
           title="Gesetzter Massstab"
         >
           <option value="__none__">—</option>
diff --git a/src/index.css b/src/index.css
index e022e42..37d365b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -196,6 +196,33 @@ select:hover {
   border-color: var(--text-muted);
 }
 
+/* Opt-out: System-native Chrome (Oberleiste). Setzt die globalen
+   pill/appearance:none Overrides zurueck und ueberlaesst WebKit das
+   Rendering — Standard-macOS-Combobox + Native-Popup-Menue. */
+select.native-control,
+input.native-control {
+  appearance: auto;
+  -webkit-appearance: auto;
+  background: revert;
+  background-image: none;
+  border: revert;
+  border-radius: revert;
+  padding: revert;
+  font: revert;
+  letter-spacing: revert;
+  box-shadow: none;
+}
+select.native-control:hover,
+input.native-control:hover {
+  background: revert;
+  border-color: revert;
+}
+select.native-control:focus,
+input.native-control:focus {
+  box-shadow: revert;
+  border-color: revert;
+}
+
 /* Utility */
 .label-xs {
   font-size: 10px;