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

@@ -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>

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,
+});

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), [])
     );
 

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

src/app/features/room/RoomViewHeader.tsx

@@ -460,7 +460,11 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               offset={4}
               tooltip={
                 <Tooltip>
+                  {callView ? (
+                    <Text>Members</Text>
+                  ) : (
                     <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  )}
                 </Tooltip>
               }
             >