From 26284e89f68d66d9cab7562ff69b91b051aea1d4 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Mon, 8 Dec 2025 15:30:24 +0000
Subject: [PATCH] web: add more RTL fixes

For #450.
---
 css/base.css           | 8 ++++++++
 css/modal.css          | 2 +-
 html/admin.html        | 8 ++++----
 ts/modules/accounts.ts | 6 +++---
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/css/base.css b/css/base.css
index fe1421e..bfa701b 100644
--- a/css/base.css
+++ b/css/base.css
@@ -279,6 +279,10 @@ table.table-p-0 th, table.table-p-0 td {
     padding-bottom: 0 !important;
 }
 
+td:dir(rtl), th:dir(rtl) {
+    text-align: right;
+}
+
 p.top {
     margin-top: 0px;
 }
@@ -479,3 +483,7 @@ section.section:not(.\~neutral) {
 .gap-2 > .button.inside-input {
     margin-left: calc(var(--inside-input-base) - 2.0*var(--tailwind-spacing));
 }
+
+.force-ltr {
+    direction: ltr !important;
+}
diff --git a/css/modal.css b/css/modal.css
index 11a0e27..a958251 100644
--- a/css/modal.css
+++ b/css/modal.css
@@ -29,7 +29,7 @@ html:not(.dark) .wall {
 }
 
 .modal-close {
-    float: right;
+    float: inline-end;
     color: #aaa;
     font-weight: normal;
 }
diff --git a/html/admin.html b/html/admin.html
index 0fefeee..6abf586 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -65,13 +65,13 @@
                     <a class="button ~urge @low discord lang-link flex flex-row gap-2" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line"></i>discord</a>
                 </div>
                 <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License. Font "Hanken Grotesk" available under SIL OFL 1.1 License.</a></p>
-                <pre class="font-mono bg-inherit">{{ .license }}</pre>
+                <pre class="font-mono bg-inherit force-ltr">{{ .license }}</pre>
             </div>
         </div>
         <div id="modal-logs" class="modal">
             <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                 <span class="heading">{{ .strings.logs }}<span class="modal-close">&times;</span></span>
-                <pre class="monospace" id="log-area"></pre>
+                <pre class="monospace force-ltr" id="log-area"></pre>
             </div>
         </div>
         <div id="modal-tasks" class="modal">
@@ -847,7 +847,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="flex flex-row gap-2 justify-center">
+                        <div class="flex flex-row gap-2 my-3 justify-center">
                             <button class="button ~neutral @low" id="accounts-load-more">{{ .strings.loadMore }}</button>
                             <button class="button ~neutral @low accounts-load-all">{{ .strings.loadAll }}</button>
                             <button class="button ~info @low center accounts-search-server gap-1" aria-label="{{ .strings.searchAllRecords }}" text="{{ .strings.searchAllRecords }}">
@@ -938,7 +938,7 @@
                             <span class="button ~urge @low unfocused gap-1" id="settings-save"><i class="icon ri-save-line"></i>{{ .strings.settingsSave }}</span>
                         </div>
                     </div>
-                    <div class="flex flex-col md:flex-row gap-3" style="direction: ltr;">
+                    <div class="flex flex-col md:flex-row gap-3 force-ltr">
                         <div class="@low dark:~d_neutral flex md:flex flex-col gap-2" id="settings-sidebar">
                             <div class="flex flex-row justify-between">
                                 <input type="search" class="field ~neutral @low input settings-section-button justify-between" id="settings-search" placeholder="{{ .strings.search }}">
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 8cc7022..2825e4a 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -316,7 +316,7 @@ class user implements User, SearchableItem {
         <i class="icon ri-settings-2-line dropdown-button"></i>
         <div class="dropdown manual over-top">
             <div class="dropdown-display lg">
-                <div class="card ~neutral @low flex flex-col gap-2">
+                <div class="card ~neutral @low flex flex-col gap-2 w-max">
                     <div class="supra sm">${window.lang.strings("contactThrough")}</div>
                     <div class="accounts-area-email">
                         <label class="row switch flex flex-row gap-2">
@@ -476,7 +476,7 @@ class user implements User, SearchableItem {
             this._notifyDropdown.querySelector(".accounts-unlink-telegram").classList.remove("unfocused");
             this._telegram.innerHTML = `
             <div class="accounts-settings-area flex flex-row gap-2 justify-center">
-                <a href="https://t.me/${u}" target="_blank">@${u}</a>
+                <a class="force-ltr" href="https://t.me/${u}" target="_blank">@${u}</a>
             </div>
             `;
             if (lastNotifyMethod) {
@@ -546,7 +546,7 @@ class user implements User, SearchableItem {
             this._notifyDropdown.querySelector(".accounts-unlink-discord").classList.remove("unfocused");
             this._discord.innerHTML = `
             <div class="accounts-settings-area flex flex-row gap-2 justify-center">
-                <a href="https://discord.com/users/${this._discordID}" class="discord-link" target="_blank">${u}</a>
+                <a href="https://discord.com/users/${this._discordID}" class="discord-link force-ltr" target="_blank">${u}</a>
             </div>
             `;
             if (lastNotifyMethod) {