fix: keep select text from clipping in Safari

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}
         >

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>

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();

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}

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'}

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;
+  }
+}