Cleanup

Author: cn0151

packages/react-components/src/components/TogetherModeOverlay.tsx

@@ -27,6 +27,7 @@ import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import {
   calculateScaledSize,
   getTogetherModeParticipantOverlayStyle,
+  participantStatusTransitionStyle,
   REACTION_MAX_TRAVEL_HEIGHT,
   REACTION_TRAVEL_HEIGHT,
   setTogetherModeSeatPositionStyle,
@@ -218,7 +219,7 @@ export const TogetherModeOverlay = memo(
                   )}
 
                   {participantStatus.showDisplayName && (
-                    <div>
+                    <div style={{ ...participantStatusTransitionStyle }}>
                       <div
                         style={{
                           ...togetherModeParticipantStatusContainer(

packages/react-components/src/components/styles/TogetherMode.styles.ts

@@ -198,16 +198,25 @@ export const togetherModeParticipantDisplayName = (
   isParticipantHovered: boolean,
   participantSeatingWidth: number,
   color: string
-): CSSProperties => {
-  const MIN_DISPLAY_NAME_WIDTH = 100;
+): React.CSSProperties => {
+  const width =
+    isParticipantHovered || participantSeatingWidth * 16 > 100
+      ? 'fit-content'
+      : _pxToRem(0.7 * participantSeatingWidth * 16);
+
+  const display = isParticipantHovered || participantSeatingWidth * 16 > 150 ? 'inline-block' : 'none';
+
   return {
     textOverflow: 'ellipsis',
-    flexGrow: 1, // Allow text to grow within available space
-    overflow: isParticipantHovered ? 'visible' : 'hidden',
     whiteSpace: 'nowrap',
     textAlign: 'center',
     color,
-    display: isParticipantHovered || participantSeatingWidth > MIN_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none' // Completely remove the element when hidden
+    overflow: isParticipantHovered ? 'visible' : 'hidden',
+    width,
+    display,
+    fontSize: `${_pxToRem(13)}`,
+    lineHeight: `${_pxToRem(20)}`,
+    maxWidth: isParticipantHovered ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * 16)
   };
 };
 
@@ -221,11 +230,28 @@ export const togetherModeParticipantEmojiSpriteStyle = (
   participantSeatWidth: string
 ): CSSProperties => {
   const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;
-  const emojiScaledSizeInPercent = (emojiScaledSize / participantSeatWidthInPixel) * 100;
+  const emojiScaledSizeInPercent = 100 - (emojiScaledSize / participantSeatWidthInPixel) * 100;
   return {
     width: `${emojiSize}`,
     position: 'absolute',
     // Center the emoji sprite within the participant seat
-    left: `${emojiScaledSizeInPercent / 2}%`
+    left: `${emojiScaledSizeInPercent / 2}%`,
+    zIndex: 3
   };
 };
+
+/**
+ * The style for the transition of the participant status container in Together Mode.
+ * @private
+ */
+export const participantStatusTransitionStyle: CSSProperties = {
+  position: 'absolute',
+  bottom: `${_pxToRem(2)}`,
+  width: 'fit-content',
+  textAlign: 'center',
+  border: '1px solid white',
+  transform: 'translate(-50%)',
+  transition: 'width 0.3s ease, transform 0.3s ease',
+  left: '50%',
+  zIndex: 0
+};