diff --git a/apps/meteor/app/theme/client/imports/general/base_old.css b/apps/meteor/app/theme/client/imports/general/base_old.css
index 6c2a6890e34..4d7d722abce 100644
--- a/apps/meteor/app/theme/client/imports/general/base_old.css
+++ b/apps/meteor/app/theme/client/imports/general/base_old.css
@@ -1166,6 +1166,12 @@
}
}
+.rcx-message {
+ &.highlight {
+ animation: highlight 6s;
+ }
+}
+
.rc-old .image-labels {
display: flex;
diff --git a/apps/meteor/app/theme/client/imports/general/theme_old.css b/apps/meteor/app/theme/client/imports/general/theme_old.css
index 3eec921fd34..42e0dbf96f3 100644
--- a/apps/meteor/app/theme/client/imports/general/theme_old.css
+++ b/apps/meteor/app/theme/client/imports/general/theme_old.css
@@ -1,3 +1,23 @@
+* {
+ -webkit-overflow-scrolling: touch;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+
+ background: var(--transparent-dark);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 50px;
+ background-color: var(--custom-scrollbar-color);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: var(--transparent-dark);
+ }
+}
+
.content-background-color {
background-color: var(--content-background-color);
}
diff --git a/apps/meteor/client/views/room/components/body/RoomBody.tsx b/apps/meteor/client/views/room/components/body/RoomBody.tsx
index c1944eab946..25a3653c638 100644
--- a/apps/meteor/client/views/room/components/body/RoomBody.tsx
+++ b/apps/meteor/client/views/room/components/body/RoomBody.tsx
@@ -21,6 +21,7 @@ import { isAtBottom } from '../../../../../app/ui/client/views/app/lib/scrolling
import { callbacks } from '../../../../../lib/callbacks';
import { isTruthy } from '../../../../../lib/isTruthy';
import { withDebouncing, withThrottling } from '../../../../../lib/utils/highOrderFunctions';
+import ScrollableContentWrapper from '../../../../components/ScrollableContentWrapper';
import { useEmbeddedLayout } from '../../../../hooks/useEmbeddedLayout';
import { useReactiveQuery } from '../../../../hooks/useReactiveQuery';
import { RoomManager as NewRoomManager } from '../../../../lib/RoomManager';
@@ -567,7 +568,6 @@ const RoomBody = (): ReactElement => {
/>
) : null}
{
.join(' ')}
>
-
- {canPreview ? (
- <>
- {hasMorePreviousMessages ? (
- - {isLoadingMoreMessages ? : null}
- ) : (
- -
- {retentionPolicy ? : null}
-
-
- )}
-
- ) : null}
-
- {hasMoreNextMessages ? (
- - {isLoadingMoreMessages ? : null}
- ) : null}
-
+
+
+ {canPreview ? (
+ <>
+ {hasMorePreviousMessages ? (
+ - {isLoadingMoreMessages ? : null}
+ ) : (
+ -
+ {retentionPolicy ? : null}
+
+
+ )}
+
+ ) : null}
+
+ {hasMoreNextMessages ? (
+ - {isLoadingMoreMessages ? : null}
+ ) : null}
+
+
-
- {loading ? (
- -
-
-
- ) : (
-
- {[mainMessage, ...messages].map((message, index, { [index - 1]: previous }) => {
- const sequential = isMessageSequential(message, previous, messageGroupingPeriod);
- const newDay = isMessageNewDay(message, previous);
- const firstUnread = isMessageFirstUnread(subscription, message, previous);
- const showDivider = newDay || firstUnread;
+
+
+ {loading ? (
+ -
+
+
+ ) : (
+
+ {[mainMessage, ...messages].map((message, index, { [index - 1]: previous }) => {
+ const sequential = isMessageSequential(message, previous, messageGroupingPeriod);
+ const newDay = isMessageNewDay(message, previous);
+ const firstUnread = isMessageFirstUnread(subscription, message, previous);
+ const showDivider = newDay || firstUnread;
- const shouldShowAsSequential = sequential && !newDay;
+ const shouldShowAsSequential = sequential && !newDay;
- const system = MessageTypes.isSystemMessage(message);
+ const system = MessageTypes.isSystemMessage(message);
- return (
-
- {showDivider && (
-
- {newDay && formatDate(message.ts)}
-
- )}
- -
- {system ? (
-
- ) : (
-
+ return (
+
+ {showDivider && (
+
+ {newDay && formatDate(message.ts)}
+
)}
-
-
- );
- })}
-
- )}
-
+ -
+ {system ? (
+
+ ) : (
+
+ )}
+
+
+ );
+ })}
+
+ )}
+
+