Attachment Modal: Fix invalid input width on non-english langs (#2932)
This commit is contained in:
parent
24bad96e4d
commit
46b182bcb1
@ -198,7 +198,6 @@
|
|||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
margin-right: 0.375rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.send {
|
.send {
|
||||||
|
|||||||
@ -90,6 +90,7 @@ type StateProps = {
|
|||||||
attachmentSettings: GlobalState['attachmentSettings'];
|
attachmentSettings: GlobalState['attachmentSettings'];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ATTACHMENT_MODAL_INPUT_ID = 'caption-input-text';
|
||||||
const DROP_LEAVE_TIMEOUT_MS = 150;
|
const DROP_LEAVE_TIMEOUT_MS = 150;
|
||||||
const MAX_LEFT_CHARS_TO_SHOW = 100;
|
const MAX_LEFT_CHARS_TO_SHOW = 100;
|
||||||
|
|
||||||
@ -352,6 +353,16 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
|
|||||||
}));
|
}));
|
||||||
}, [attachments, onAttachmentsUpdate]);
|
}, [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(() => {
|
const MoreMenuButton: FC<{ onTrigger: () => void; isOpen?: boolean }> = useMemo(() => {
|
||||||
return ({ onTrigger, isOpen: isMenuOpen }) => (
|
return ({ onTrigger, isOpen: isMenuOpen }) => (
|
||||||
<Button
|
<Button
|
||||||
@ -568,7 +579,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
|
|||||||
/>
|
/>
|
||||||
<MessageInput
|
<MessageInput
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
id="caption-input-text"
|
id={ATTACHMENT_MODAL_INPUT_ID}
|
||||||
chatId={chatId}
|
chatId={chatId}
|
||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
isAttachmentModalInput
|
isAttachmentModalInput
|
||||||
|
|||||||
@ -627,11 +627,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#caption-input-text {
|
#caption-input-text {
|
||||||
|
--margin-for-scrollbar: 5rem;
|
||||||
.input-scroller {
|
.input-scroller {
|
||||||
min-height: 3.5rem;
|
min-height: 3.5rem;
|
||||||
max-height: 10rem;
|
max-height: 10rem;
|
||||||
|
|
||||||
margin-right: -5.625rem;
|
margin-right: calc((var(--margin-for-scrollbar) + 1rem) * -1);
|
||||||
|
|
||||||
&:has(.form-control:focus) {
|
&:has(.form-control:focus) {
|
||||||
border-color: var(--color-primary);
|
border-color: var(--color-primary);
|
||||||
@ -639,7 +640,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-scroller-content {
|
.input-scroller-content {
|
||||||
margin-right: 5rem;
|
margin-right: calc(var(--margin-for-scrollbar) + 0.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder-text {
|
.placeholder-text {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user