Add ellipsis effect to hidden beacon status (#8755)

Author: luixxiul

res/css/components/views/beacon/_BeaconStatus.scss

@@ -55,6 +55,11 @@ limitations under the License.
 
     white-space: nowrap;
     overflow: hidden;
+
+    .mx_BeaconStatus_description_status {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
 }
 
 .mx_BeaconStatus_expiryTime {

src/components/views/beacon/BeaconStatus.tsx

@@ -63,11 +63,15 @@ const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
             /> }
             <div className='mx_BeaconStatus_description'>
 
-                { displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
-                { displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
-
-                { displayStatus === BeaconDisplayStatus.Error && <span>{ _t('Live location error') }</span> }
-
+                { displayStatus === BeaconDisplayStatus.Loading &&
+                    <span className="mx_BeaconStatus_description_status">{ _t('Loading live location...') }</span>
+                }
+                { displayStatus === BeaconDisplayStatus.Stopped &&
+                    <span className="mx_BeaconStatus_description_status">{ _t('Live location ended') }</span>
+                }
+                { displayStatus === BeaconDisplayStatus.Error &&
+                    <span className="mx_BeaconStatus_description_status">{ _t('Live location error') }</span>
+                }
                 { displayStatus === BeaconDisplayStatus.Active && beacon && <>
                     <>
                         <span className='mx_BeaconStatus_label'>{ label }</span>

test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap

@@ -136,7 +136,9 @@ exports[`<BeaconStatus /> renders loading state 1`] = `
     <div
       className="mx_BeaconStatus_description"
     >
-      <span>
+      <span
+        className="mx_BeaconStatus_description_status"
+      >
         Loading live location...
       </span>
     </div>
@@ -165,7 +167,9 @@ exports[`<BeaconStatus /> renders stopped state 1`] = `
     <div
       className="mx_BeaconStatus_description"
     >
-      <span>
+      <span
+        className="mx_BeaconStatus_description_status"
+      >
         Live location ended
       </span>
     </div>

test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap

@@ -15,7 +15,9 @@ exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
       <div
         className="mx_BeaconStatus_description"
       >
-        <span>
+        <span
+          className="mx_BeaconStatus_description_status"
+        >
           Loading live location...
         </span>
       </div>