fix(input): safari contraint (#1053)

close #923

<img width="1143"
src="https://github.com/user-attachments/assets/3041927b-263c-4da1-909c-18c62730b6fb"
/>
<img width="1143"
src="https://github.com/user-attachments/assets/8ac59fb6-4ce6-4f06-9061-8ba3e15d330a"
/>

---------

Co-authored-by: Leo Kettmeir <[email protected]>

Author: AugustinMauroy

frontend/routes/@[scope]/(_islands)/ScopeInviteForm.tsx

@@ -58,7 +58,7 @@ export function ScopeInviteForm(props: ScopeInviteFormProps) {
           <select
             name="kind"
             id="kind-select"
-            class="inline-block text-base px-2 py-1.5 input-container input rounded-r-none border-r-0"
+            class="inline-block w-36 px-3 py-1.5 input-container select border-r-0 rounded-r-none"
             disabled={submitting}
             onChange={(e) => {
               if (kind.value !== e.currentTarget.value) {

frontend/routes/package/(_islands)/DownloadChart.tsx

@@ -162,7 +162,7 @@ export function DownloadChart(props: Props) {
                 ),
               );
             }}
-            className="input-container input px-1.5 py-0.5"
+            className="input-container input select w-20"
           >
             <option value="daily">Daily</option>
             <option value="weekly" selected>Weekly</option>

frontend/static/styles.css

@@ -218,7 +218,8 @@
   .input-container {
     @apply bg-white dark:bg-jsr-gray-900 rounded-md leading-snug border-1
       border-jsr-cyan-900/30 dark:border-jsr-gray-600
-      focus-within:border-jsr-cyan-500 dark:focus-within:border-cyan-400;
+      focus-within:border-jsr-cyan-500 dark:focus-within:border-cyan-400
+      appearance-none;
   }
 
   select:not([data-locked="true"]):disabled.input-container,
@@ -255,10 +256,18 @@
   }
 
   .select {
-    @apply appearance-none outline-none opacity-100;
+    @apply appearance-none outline-none opacity-100 pl-1;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
       no-repeat;
-    background-position: center right 0.5rem;
+    /* 0.25 = pl-1 */
+    background-position: center right 0.25rem;
+  }
+
+  .dark .select {
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="white" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
+      no-repeat;
+    /* 0.25 = pl-1 */
+    background-position: center right 0.25rem;
   }
 
   .score-circle {