From ed0c0c8325d36345df4346d2f1d90e20453b21ea Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:51:25 +0200
Subject: [PATCH] Pinned Message: Fix image position on RTL languages (#4738)

---
 src/components/middle/HeaderPinnedMessage.module.scss | 4 ++++
 src/components/middle/HeaderPinnedMessage.tsx         | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/middle/HeaderPinnedMessage.module.scss b/src/components/middle/HeaderPinnedMessage.module.scss
index 99df37992..e375663d5 100644
--- a/src/components/middle/HeaderPinnedMessage.module.scss
+++ b/src/components/middle/HeaderPinnedMessage.module.scss
@@ -136,6 +136,10 @@
     margin-right: 2.625rem;
     max-width: calc(15rem - 2.625rem);
     min-width: calc(15rem - 2.625rem);
+
+    &[dir="rtl"] {
+      transform: translateX(-0.25rem);
+    }
   }
 
   :global(.emoji-small) {
diff --git a/src/components/middle/HeaderPinnedMessage.tsx b/src/components/middle/HeaderPinnedMessage.tsx
index 95d2ce402..f5210f1cf 100644
--- a/src/components/middle/HeaderPinnedMessage.tsx
+++ b/src/components/middle/HeaderPinnedMessage.tsx
@@ -170,8 +170,11 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
             isSpoiler,
           )}
         </Transition>
-        <div className={buildClassName(styles.messageText, mediaThumbnail && styles.withMedia)}>
-          <div className={styles.title} dir="auto">
+        <div
+          className={buildClassName(styles.messageText, mediaThumbnail && styles.withMedia)}
+          dir={lang.isRtl ? 'rtl' : undefined}
+        >
+          <div className={styles.title} dir={lang.isRtl ? 'rtl' : undefined}>
             {!customTitle && (
               <AnimatedCounter text={`${lang('PinnedMessage')} ${index > 0 ? `#${count - index}` : ''}`} />
             )}