From 46b182bcb131a455b66d3d8063b775475ddb04af Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 9 Apr 2023 04:02:46 +0200
Subject: [PATCH] Attachment Modal: Fix invalid input width on non-english
 langs (#2932)

---
 .../middle/composer/AttachmentModal.module.scss     |  1 -
 src/components/middle/composer/AttachmentModal.tsx  | 13 ++++++++++++-
 src/components/middle/composer/Composer.scss        |  5 +++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss
index 9f39c7317..8fe4bc995 100644
--- a/src/components/middle/composer/AttachmentModal.module.scss
+++ b/src/components/middle/composer/AttachmentModal.module.scss
@@ -198,7 +198,6 @@
   align-self: flex-end;
   position: relative;
   padding-bottom: 0.5rem;
-  margin-right: 0.375rem;
 }
 
 .send {
diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx
index 4b8cb2eca..5fbac1c86 100644
--- a/src/components/middle/composer/AttachmentModal.tsx
+++ b/src/components/middle/composer/AttachmentModal.tsx
@@ -90,6 +90,7 @@ type StateProps = {
   attachmentSettings: GlobalState['attachmentSettings'];
 };
 
+const ATTACHMENT_MODAL_INPUT_ID = 'caption-input-text';
 const DROP_LEAVE_TIMEOUT_MS = 150;
 const MAX_LEFT_CHARS_TO_SHOW = 100;
 
@@ -352,6 +353,16 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     }));
   }, [attachments, onAttachmentsUpdate]);
 
+  useEffect(() => {
+    const mainButton = mainButtonRef.current;
+    const input = document.getElementById(ATTACHMENT_MODAL_INPUT_ID);
+
+    if (!mainButton || !input) return;
+
+    const { width } = mainButton.getBoundingClientRect();
+    input.style.setProperty('--margin-for-scrollbar', `${width}px`);
+  }, [lang, isOpen]);
+
   const MoreMenuButton: FC<{ onTrigger: () => void; isOpen?: boolean }> = useMemo(() => {
     return ({ onTrigger, isOpen: isMenuOpen }) => (
       <Button
@@ -568,7 +579,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
             />
             <MessageInput
               ref={inputRef}
-              id="caption-input-text"
+              id={ATTACHMENT_MODAL_INPUT_ID}
               chatId={chatId}
               threadId={threadId}
               isAttachmentModalInput
diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss
index 0241a7808..2025cb98f 100644
--- a/src/components/middle/composer/Composer.scss
+++ b/src/components/middle/composer/Composer.scss
@@ -627,11 +627,12 @@
 }
 
 #caption-input-text {
+  --margin-for-scrollbar: 5rem;
   .input-scroller {
     min-height: 3.5rem;
     max-height: 10rem;
 
-    margin-right: -5.625rem;
+    margin-right: calc((var(--margin-for-scrollbar) + 1rem) * -1);
 
     &:has(.form-control:focus) {
       border-color: var(--color-primary);
@@ -639,7 +640,7 @@
   }
 
   .input-scroller-content {
-    margin-right: 5rem;
+    margin-right: calc(var(--margin-for-scrollbar) + 0.5rem);
   }
 
   .placeholder-text {