From 9499b870033a1c2c3b32f7f9b8cd0dfc64faf920 Mon Sep 17 00:00:00 2001
From: SameDesu123 <47582414+SameDesu123@users.noreply.github.com>
Date: Fri, 2 Oct 2026 15:57:06 +0900
Subject: [PATCH] fix: keep select text from clipping in Safari

WebKit renders native <select> as a fixed-height menulist that ignores
our vertical padding, cutting off the selected text. Add a risu-select
class that drops the native appearance and draws a currentColor chevron,
falling back to the native arrow in forced-colors mode.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../HypaV3Modal/bulk-edit-actions.svelte      |  2 +-
 src/lib/Others/PopupEditor.svelte             |  2 +-
 .../Language/TranslatorPresetSettings.svelte  |  2 +-
 src/lib/Setting/Pages/OtherBotSettings.svelte |  2 +-
 src/lib/UI/GUI/SelectInput.svelte             |  2 +-
 src/styles.css                                | 29 +++++++++++++++++++
 6 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal/bulk-edit-actions.svelte b/src/lib/Others/HypaV3Modal/bulk-edit-actions.svelte
index ad06832fb3..6accf838ce 100644
--- a/src/lib/Others/HypaV3Modal/bulk-edit-actions.svelte
+++ b/src/lib/Others/HypaV3Modal/bulk-edit-actions.svelte
@@ -93,7 +93,7 @@
       <div class="flex items-center gap-2">
         <!-- Category Selection -->
         <select
-          class="px-3 py-2 rounded-sm border border-zinc-600 bg-zinc-900 text-zinc-200 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+          class="risu-select px-3 py-2 rounded-sm border border-zinc-600 bg-zinc-900 text-zinc-200 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
           value={bulkEditState.selectedCategory}
           onchange={handleCategoryChange}
         >
diff --git a/src/lib/Others/PopupEditor.svelte b/src/lib/Others/PopupEditor.svelte
index 3625e24439..7de4c49e6e 100644
--- a/src/lib/Others/PopupEditor.svelte
+++ b/src/lib/Others/PopupEditor.svelte
@@ -64,7 +64,7 @@
                     {#if !previewing}
                         <select
                             bind:value={languageMode}
-                            class="bg-bgcolor border-none rounded px-2 py-1 text-sm"
+                            class="risu-select bg-bgcolor border-none rounded px-2 py-1 text-sm"
                         >
                             <option value="markdown">Markdown</option>
                             <option value="cbs" disabled>CBS</option>
diff --git a/src/lib/Setting/Pages/Language/TranslatorPresetSettings.svelte b/src/lib/Setting/Pages/Language/TranslatorPresetSettings.svelte
index 49fa1a958a..2b4903fccb 100644
--- a/src/lib/Setting/Pages/Language/TranslatorPresetSettings.svelte
+++ b/src/lib/Setting/Pages/Language/TranslatorPresetSettings.svelte
@@ -30,7 +30,7 @@
 
 <span class="text-textcolor mt-4">Preset</span>
 <select
-    class={"border border-darkborderc focus:border-borderc rounded-md shadow-xs text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-hidden transition-colors duration-200 text-md px-4 py-2 mb-1"}
+    class={"risu-select border border-darkborderc focus:border-borderc rounded-md shadow-xs text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-hidden transition-colors duration-200 text-md px-4 py-2 mb-1"}
     bind:value={() => DBState.db.translatorPresetId, (value) => {
         DBState.db.translatorPresetId = Number(value);
         syncCurrentTranslatorPreset();
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index f7964390ba..7accda11e0 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -1056,7 +1056,7 @@
         {:else if DBState.db.hypaV3}
             <span class="max-w-full mb-6 text-sm text-wrap wrap-break-word text-textcolor2">{language.hypaV3Settings.descriptionLabel}</span>
             <span class="text-textcolor">Preset</span>
-            <select class={"border border-darkborderc focus:border-borderc rounded-md shadow-xs text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-hidden transition-colors duration-200 text-md px-4 py-2 mb-1"}
+            <select class={"risu-select border border-darkborderc focus:border-borderc rounded-md shadow-xs text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-hidden transition-colors duration-200 text-md px-4 py-2 mb-1"}
                 bind:value={DBState.db.hypaV3PresetId}
             >
                 {#each DBState.db.hypaV3Presets as preset, i}
diff --git a/src/lib/UI/GUI/SelectInput.svelte b/src/lib/UI/GUI/SelectInput.svelte
index 088e85c302..8dfee11629 100644
--- a/src/lib/UI/GUI/SelectInput.svelte
+++ b/src/lib/UI/GUI/SelectInput.svelte
@@ -1,5 +1,5 @@
 <select
-    class={"border border-darkborderc focus:border-borderc rounded-md shadow-xs text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-hidden transition-colors duration-200" + ((className) ? (' ' + className) : '')}
+    class={"risu-select border border-darkborderc focus:border-borderc rounded-md shadow-xs text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-hidden transition-colors duration-200" + ((className) ? (' ' + className) : '')}
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/styles.css b/src/styles.css
index 337e7aa1ec..d4b2d32bd9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -545,3 +545,32 @@ body {
 annotation {
   display: none;
 }
+
+/*
+  WebKit (Safari, iOS browsers) draws native <select> with a fixed-height
+  menulist that ignores our padding, so the selected text gets clipped.
+  Drop the native appearance and draw the chevron ourselves in currentColor
+  so it follows the active color scheme.
+*/
+.risu-select {
+  -webkit-appearance: none;
+  appearance: none;
+  padding-right: 2.25rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 1.125rem) 50%,
+    calc(100% - 0.8125rem) 50%;
+  background-size: 0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+}
+
+/* Forced-colors mode strips background images, which would leave no arrow. */
+@media (forced-colors: active) {
+  .risu-select {
+    -webkit-appearance: auto;
+    appearance: auto;
+    background-image: none;
+  }
+}