Improve Voice Broadcast header layout (#9437)

* Fix Voice Broadcast live badge position

* Prevent voice broadcast header overflow

* Fix VoiceBroadcastPlaybackBody-test
This commit is contained in:
Michael Weimann 2022-10-17 18:13:06 +02:00 committed by GitHub
parent 788dd904b7
commit e1d631cb47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 7 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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