From 0d1566977afc7d27795fff2ceebb7c46261e7395 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 10 Mar 2026 22:45:26 +1100
Subject: [PATCH] fix: call ui imorovements (#2749)

* fix member button tooltip in call room header

* hide sticker button in room input based on chat window width

* render camera on off data instead of duplicate join messages

* hide duplicate call member changes instead of rendering as video status

* fix prescreen message spacing
---
 src/app/features/call/CallView.tsx       | 4 ++--
 src/app/features/call/styles.css.ts      | 4 ++++
 src/app/features/room/RoomInput.tsx      | 2 +-
 src/app/features/room/RoomTimeline.tsx   | 8 +++++++-
 src/app/features/room/RoomViewHeader.tsx | 6 +++++-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index 7a8c28a5..7c7bec6c 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -97,7 +97,7 @@ function CallPrescreen() {
           )}
           <CallMemberRenderer members={callMembers} />
           <PrescreenControls canJoin={canJoin} />
-          <Header size="300">
+          <Box className={css.PrescreenMessage} alignItems="Center">
             {!inOtherCall &&
               (hasPermission ? (
                 <JoinMessage hasParticipant={hasParticipant} livekitSupported={livekitSupported} />
@@ -105,7 +105,7 @@ function CallPrescreen() {
                 <NoPermissionMessage />
               ))}
             {inOtherCall && <AlreadyInCallMessage />}
-          </Header>
+          </Box>
         </Box>
       </Box>
     </Scroll>
diff --git a/src/app/features/call/styles.css.ts b/src/app/features/call/styles.css.ts
index 249edb08..2b9f28ad 100644
--- a/src/app/features/call/styles.css.ts
+++ b/src/app/features/call/styles.css.ts
@@ -22,3 +22,7 @@ export const CallMemberCard = style({
 export const CallControlContainer = style({
   padding: config.space.S400,
 });
+
+export const PrescreenMessage = style({
+  padding: config.space.S200,
+});
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index ae46d2d0..f88ccf93 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -221,7 +221,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const isComposing = useComposingCheck();
 
     useElementSizeObserver(
-      useCallback(() => document.body, []),
+      useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 64043054..39d7e50a 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1475,7 +1475,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const callJoined = mEvent.getContent<SessionMembershipData>().application;
+        const content = mEvent.getContent<SessionMembershipData>();
+        const prevContent = mEvent.getPrevContent();
+
+        const callJoined = content.application;
+        if (callJoined && 'application' in prevContent) {
+          return null;
+        }
 
         const timeJSX = (
           <Time
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index eee9ae42..a19058d2 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -460,7 +460,11 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  {callView ? (
+                    <Text>Members</Text>
+                  ) : (
+                    <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  )}
                 </Tooltip>
               }
             >