diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 29df4027c..bb1fbb6ec 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
     import { pageTheme } from "../sveltelib/theme";
+    let rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -20,7 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <!-- svelte-ignore a11y-no-onchange -->
-
 <select
     tabindex="-1"
     bind:this={buttonRef}
@@ -29,27 +29,53 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="{className} form-select"
     class:btn-day={!$pageTheme.isDark}
     class:btn-night={$pageTheme.isDark}
-    class:visible-down-arrow={$pageTheme.isDark}
+    class:rtl
     title={tooltip}
     on:change
 >
     <slot />
 </select>
+<div class="arrow" class:dark={$pageTheme.isDark} class:rtl />
 
 <style lang="scss">
     @use "sass/button-mixins" as button;
+    @include button.btn-day($with-hover: false);
+    @include button.btn-night($with-hover: false);
 
     select {
         height: var(--buttons-size);
         /* Long option name can create overflow */
-        overflow-x: hidden;
+        text-overflow: ellipsis;
+        /* Prevents text getting cropped on Windows */
+        padding: {
+            top: 0;
+            bottom: 0;
+        }
+        &.rtl {
+            direction: rtl;
+            /* Reversed Bootstrap values */
+            padding-left: 2.25rem;
+            padding-right: 0.75rem;
+        }
+        &.btn-day {
+            /* Hide default arrow for consistency */
+            background: var(--frame-bg);
+        }
     }
 
-    .visible-down-arrow {
-        /* override the default down arrow */
-        background-image: button.down-arrow(white);
+    .arrow {
+        top: 0;
+        right: 10px;
+        &.rtl {
+            left: 10px;
+        }
+        width: 15px;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        background: button.down-arrow(black) no-repeat right;
+        &.dark {
+            background-image: button.down-arrow(white);
+        }
     }
-
-    @include button.btn-day($with-hover: false);
-    @include button.btn-night($with-hover: false);
 </style>