Implement small broadcast PiP (#9755)

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

@@ -19,7 +19,7 @@ limitations under the License.
     background-color: $alert;
     border-radius: 2px;
     color: $live-badge-color;
-    display: flex;
+    display: inline-flex;
     font-size: $font-12px;
     font-weight: $font-semi-bold;
     gap: $spacing-4;

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

@@ -20,6 +20,7 @@ limitations under the License.
     border-radius: 50%;
     color: $secondary-content;
     display: flex;
+    flex: 0 0 32px;
     height: 32px;
     justify-content: center;
     width: 32px;

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

@@ -17,7 +17,7 @@ limitations under the License.
     gap: $spacing-8;
     line-height: 20px;
     margin-bottom: $spacing-16;
-    width: 266px;
+    min-width: 0;
 }
 
 .mx_VoiceBroadcastHeader_content {
@@ -25,9 +25,17 @@ limitations under the License.
     min-width: 0;
 }
 
+.mx_VoiceBroadcastHeader_room_wrapper {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+    justify-content: flex-start;
+}
+
 .mx_VoiceBroadcastHeader_room {
     font-size: $font-12px;
     font-weight: $font-semi-bold;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss

@@ -21,6 +21,7 @@ limitations under the License.
     display: inline-block;
     font-size: $font-12px;
     padding: $spacing-12;
+    width: 271px;
 
     .mx_Clock {
         line-height: 1;
@@ -32,6 +33,24 @@ limitations under the License.
     box-shadow: 0 2px 8px 0 #0000004a;
 }
 
+.mx_VoiceBroadcastBody--small {
+    display: flex;
+    gap: $spacing-8;
+    width: 192px;
+
+    .mx_VoiceBroadcastHeader {
+        margin-bottom: 0;
+    }
+
+    .mx_VoiceBroadcastControl {
+        align-self: center;
+    }
+
+    .mx_LiveBadge {
+        margin-top: 4px;
+    }
+}
+
 .mx_VoiceBroadcastBody_divider {
     background-color: $quinary-content;
     border: 0;
@@ -56,3 +75,9 @@ limitations under the License.
     display: flex;
     gap: $spacing-8;
 }
+
+.mx_VoiceBroadcastBody__small-close {
+    right: 8px;
+    position: absolute;
+    top: 8px;
+}