Improve Voice Broadcast header layout (#9437)

* Fix Voice Broadcast live badge position

* Prevent voice broadcast header overflow

* Fix VoiceBroadcastPlaybackBody-test

res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss

@@ -20,6 +20,11 @@ limitations under the License.
     width: 266px;
 }
 
+.mx_VoiceBroadcastHeader_content {
+    flex-grow: 1;
+    min-width: 0;
+}
+
 .mx_VoiceBroadcastHeader_room {
     font-size: $font-12px;
     font-weight: $font-semi-bold;
@@ -34,4 +39,14 @@ limitations under the License.
     font-size: $font-12px;
     display: flex;
     gap: $spacing-4;
+
+    i {
+        flex-shrink: 0;
+    }
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }

src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx

@@ -47,7 +47,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
             </div>
             <div className="mx_VoiceBroadcastHeader_line">
                 <Icon type={IconType.Microphone} colour={IconColour.CompoundSecondaryContent} />
-                { sender.name }
+                <span>{ sender.name }</span>
             </div>
             { broadcast }
         </div>

test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap

@@ -28,7 +28,9 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
           role="presentation"
           style="mask-image: url(\\"image-file-stub\\");"
         />
-        test user
+        <span>
+          test user
+        </span>
       </div>
       <div
         class="mx_VoiceBroadcastHeader_line"
@@ -85,7 +87,9 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
           role="presentation"
           style="mask-image: url(\\"image-file-stub\\");"
         />
-        test user
+        <span>
+          test user
+        </span>
       </div>
     </div>
   </div>

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap

@@ -31,7 +31,9 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
             role="presentation"
             style="mask-image: url(\\"image-file-stub\\");"
           />
-          @user:example.com
+          <span>
+            @user:example.com
+          </span>
         </div>
         <div
           class="mx_VoiceBroadcastHeader_line"
@@ -109,7 +111,9 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
             role="presentation"
             style="mask-image: url(\\"image-file-stub\\");"
           />
-          @user:example.com
+          <span>
+            @user:example.com
+          </span>
         </div>
         <div
           class="mx_VoiceBroadcastHeader_line"

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap

@@ -31,7 +31,9 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
             role="presentation"
             style="mask-image: url(\\"image-file-stub\\");"
           />
-          @user:example.com
+          <span>
+            @user:example.com
+          </span>
         </div>
       </div>
       <div

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap

@@ -31,7 +31,9 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
             role="presentation"
             style="mask-image: url(\\"image-file-stub\\");"
           />
-          @user:example.com
+          <span>
+            @user:example.com
+          </span>
         </div>
       </div>
       <div