diff --git a/src/components/common/Blockquote.module.scss b/src/components/common/Blockquote.module.scss index 7aecafea8..22095cdfa 100644 --- a/src/components/common/Blockquote.module.scss +++ b/src/components/common/Blockquote.module.scss @@ -5,14 +5,18 @@ width: 100%; } -.collapsed { - @include mixins.gradient-border-bottom(1rem); +.collapsed .blockquote { + max-height: 4lh; } .gradientContainer { margin-top: 0.125rem; margin-bottom: 0.125rem; max-height: inherit; + + .collapsed & { + @include mixins.gradient-border-bottom(1rem); + } } .collapseIcon { diff --git a/src/components/common/Blockquote.tsx b/src/components/common/Blockquote.tsx index 517a64ffb..6bf930a09 100644 --- a/src/components/common/Blockquote.tsx +++ b/src/components/common/Blockquote.tsx @@ -40,12 +40,16 @@ const Blockquote = ({ canBeCollapsible, isToggleDisabled, children }: OwnProps) }); return ( - +
-
+
{children}
{isCollapsible && ( diff --git a/src/components/middle/ActionMessage.tsx b/src/components/middle/ActionMessage.tsx index 350888f9b..d6dfe9b5d 100644 --- a/src/components/middle/ActionMessage.tsx +++ b/src/components/middle/ActionMessage.tsx @@ -136,7 +136,14 @@ const ActionMessage: FC = ({ message.replyInfo?.type === 'message' ? message.replyInfo.replyToMsgId : undefined, targetMessage, ); - useFocusMessage(ref, message.chatId, isFocused, focusDirection, noFocusHighlight, isJustAdded); + useFocusMessage({ + elementRef: ref, + chatId: message.chatId, + isFocused, + focusDirection, + noFocusHighlight, + isJustAdded, + }); useUnmountCleanup(() => { if (message.isPinned) { diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 430516216..4e9aa6029 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -832,17 +832,17 @@ const Message: FC = ({ replyStory, ); - useFocusMessage( - ref, + useFocusMessage({ + elementRef: ref, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer, isJustAdded, - Boolean(focusedQuote), + isQuote: Boolean(focusedQuote), scrollTargetPosition, - ); + }); const viaBusinessBotTitle = viaBusinessBot ? getPeerTitle(lang, viaBusinessBot) : undefined; diff --git a/src/components/middle/message/hooks/useFocusMessage.ts b/src/components/middle/message/hooks/useFocusMessage.ts index 75426320b..b7df10207 100644 --- a/src/components/middle/message/hooks/useFocusMessage.ts +++ b/src/components/middle/message/hooks/useFocusMessage.ts @@ -14,17 +14,27 @@ const BOTTOM_FOCUS_OFFSET = 500; const RELOCATED_FOCUS_OFFSET = SCROLL_MAX_DISTANCE; const FOCUS_MARGIN = 20; -export default function useFocusMessage( - elementRef: { current: HTMLDivElement | null }, - chatId: string, - isFocused?: boolean, - focusDirection?: FocusDirection, - noFocusHighlight?: boolean, - isResizingContainer?: boolean, - isJustAdded?: boolean, - isQuote?: boolean, - scrollTargetPosition?: ScrollTargetPosition, -) { +export default function useFocusMessage({ + elementRef, + chatId, + isFocused, + focusDirection, + noFocusHighlight, + isResizingContainer, + isJustAdded, + isQuote, + scrollTargetPosition, +}: { + elementRef: { current: HTMLDivElement | null }; + chatId: string; + isFocused?: boolean; + focusDirection?: FocusDirection; + noFocusHighlight?: boolean; + isResizingContainer?: boolean; + isJustAdded?: boolean; + isQuote?: boolean; + scrollTargetPosition?: ScrollTargetPosition; +}) { const isRelocatedRef = useRef(!isJustAdded); useLayoutEffect(() => { diff --git a/src/hooks/element/useCollapsibleLines.ts b/src/hooks/element/useCollapsibleLines.ts index 7b1b75145..8827d461c 100644 --- a/src/hooks/element/useCollapsibleLines.ts +++ b/src/hooks/element/useCollapsibleLines.ts @@ -24,7 +24,7 @@ export default function useCollapsibleLines { const element = (cutoutRef || ref).current; - if (isDisabled || !element) return; + if (isDisabled || !element || isFirstRenderRef.current) return; requestMutation(() => { element.style.maxHeight = isCollapsed ? `${cutoutHeightRef.current}px` : '';