Added tooltip when roomname is elided in the pre meeting screen (#15508)

* added tooltip when roomname overflows

react/features/base/premeeting/components/web/PreMeetingScreen.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
@@ -11,6 +11,7 @@ import { isButtonEnabled } from '../../../../toolbox/functions.web';
 import { getConferenceName } from '../../../conference/functions';
 import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants';
 import { withPixelLineHeight } from '../../../styles/functions.web';
+import Tooltip from '../../../tooltip/components/Tooltip';
 import { isPreCallTestEnabled } from '../../functions';
 
 import ConnectionStatus from './ConnectionStatus';
@@ -160,15 +161,20 @@ const useStyles = makeStyles()(theme => {
                 display: 'none'
             }
         },
+        roomNameContainer: {
+            width: '100%',
+            textAlign: 'center',
+            marginBottom: theme.spacing(4)
+        },
+
         roomName: {
             ...withPixelLineHeight(theme.typography.heading5),
             color: theme.palette.text01,
-            marginBottom: theme.spacing(4),
+            display: 'inline-block',
             overflow: 'hidden',
-            textAlign: 'center',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
-            width: '100%'
+            maxWidth: '100%',
         }
     };
 });
@@ -195,6 +201,19 @@ const PreMeetingScreen = ({
         backgroundSize: 'cover'
     } : {};
 
+    const roomNameRef = useRef<HTMLSpanElement | null>(null);
+    const [ isOverflowing, setIsOverflowing ] = useState(false);
+
+    useEffect(() => {
+        if (roomNameRef.current) {
+            const element = roomNameRef.current;
+            const elementStyles = window.getComputedStyle(element);
+            const elementWidth = Math.floor(parseFloat(elementStyles.width));
+
+            setIsOverflowing(element.scrollWidth > elementWidth + 1);
+        }
+    }, [ _roomName ]);
+
     return (
         <div className = { clsx('premeeting-screen', classes.container, className) }>
             <div style = { style }>
@@ -206,8 +225,22 @@ const PreMeetingScreen = ({
                             {title}
                         </h1>
                         {_roomName && (
-                            <span className = { classes.roomName }>
-                                {_roomName}
+                            <span className = { classes.roomNameContainer }>
+                                {isOverflowing ? (
+                                    <Tooltip content = { _roomName }>
+                                        <span
+                                            className = { classes.roomName }
+                                            ref = { roomNameRef }>
+                                            {_roomName}
+                                        </span>
+                                    </Tooltip>
+                                ) : (
+                                    <span
+                                        className = { classes.roomName }
+                                        ref = { roomNameRef }>
+                                        {_roomName}
+                                    </span>
+                                )}
                             </span>
                         )}
                         {children}
@@ -259,3 +292,4 @@ function mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
 }
 
 export default connect(mapStateToProps)(PreMeetingScreen);
+