From e2e9e37a317756ac48caa18f3167ead1e602dddb Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Fri, 1 Dec 2023 08:07:44 +0300
Subject: [PATCH] Fix some RTL issues in help modals (#2857)

* Fix RTL position of close button in help modals

* Fix position of active button's border

* Fix margin of modal's title

* Fix alignment of modal buttons' text

* Add missing translation
---
 ftl/core/help.ftl                      | 2 ++
 ts/components/HelpModal.svelte         | 8 ++++----
 ts/deck-options/deck-options-base.scss | 5 +++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ftl/core/help.ftl b/ftl/core/help.ftl
index f60ebf3cc..ddb362e48 100644
--- a/ftl/core/help.ftl
+++ b/ftl/core/help.ftl
@@ -18,3 +18,5 @@ help-no-explanation =
 
 # Link to more detailed information in the manual
 help-for-more-info = For more information, see { $link } in the manual.
+
+help-ok = OK
diff --git a/ts/components/HelpModal.svelte b/ts/components/HelpModal.svelte
index eca05a651..95cfaf323 100644
--- a/ts/components/HelpModal.svelte
+++ b/ts/components/HelpModal.svelte
@@ -141,7 +141,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-primary" on:click={onOkClicked}>
-                    OK
+                    {tr.helpOk()}
                 </button>
             </div>
         </div>
@@ -154,7 +154,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .modal-title {
-        margin-right: 0.75rem;
+        margin-inline-end: 0.75rem;
     }
 
     .manual-badge {
@@ -185,7 +185,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: block;
         padding: 0.5rem 0.75rem;
         text-decoration: none;
-        text-align: left;
+        text-align: start;
         min-width: 250px;
         background-color: var(--canvas);
         border: none;
@@ -195,7 +195,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             background-color: var(--canvas-inset);
         }
         &.active {
-            border-left: 4px solid var(--border-focus);
+            border-inline-start: 4px solid var(--border-focus);
         }
     }
 </style>
diff --git a/ts/deck-options/deck-options-base.scss b/ts/deck-options/deck-options-base.scss
index 20098d56f..5b686319e 100644
--- a/ts/deck-options/deck-options-base.scss
+++ b/ts/deck-options/deck-options-base.scss
@@ -27,3 +27,8 @@ input {
 html {
     height: initial;
 }
+
+[dir="rtl"] .modal-header .btn-close {
+    padding: 1rem 1rem !important;
+    margin: -1rem auto -1rem -1rem !important;
+}