diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
index 746fec95..0c5edd92 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
@@ -13,13 +13,16 @@
-
- {{ participantDisplayName }}
-
- {{ 'PANEL.PARTICIPANTS.YOU' | translate }}
-
+
+
+
+ {{ participantDisplayName }}
+
+ {{ 'PANEL.PARTICIPANTS.YOU' | translate }}
+
+
-
+
@@ -29,11 +32,6 @@
{{ _participant | tracksPublishedTypes }}
-
-
- volume_off
- {{ 'PANEL.PARTICIPANTS.MUTED' | translate }}
-
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
index 5c8b464a..7ad87b9c 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
@@ -80,19 +80,37 @@
margin-right: 8px;
}
- // Participant name styling
- .participant-name {
- font-weight: 600 !important;
- font-size: 14px;
- line-height: 1.2;
- color: var(--ov-text-surface-color);
- margin: 0 0 4px 0;
+ // Participant name row container
+ .participant-name-row {
display: flex;
align-items: center;
- gap: 8px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ justify-content: space-between;
+ width: 100%;
+ margin: 0;
+ gap: 4px;
+ min-height: 20px;
+ }
+
+ // Participant name styling with overflow control
+ .participant-name {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex: 1;
+ min-width: 0;
+ max-width: 100%;
+
+ .participant-name-text {
+ font-weight: 600 !important;
+ font-size: 14px;
+ line-height: 1.2;
+ color: var(--ov-text-surface-color);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1;
+ min-width: 0;
+ }
// Local participant indicator
.local-indicator {
@@ -106,6 +124,7 @@
letter-spacing: 0.5px;
flex-shrink: 0;
border: 1px solid var(--ov-border-focus-color);
+ white-space: nowrap;
}
}
@@ -213,11 +232,19 @@
.participant-badges {
display: flex;
align-items: center;
- gap: 6px;
- flex-wrap: wrap;
+ gap: 4px;
+ flex-shrink: 0;
+ max-width: 80px; // Limit badges width
+ overflow: hidden;
// Badge styling
::ng-deep .badge {
+ flex-shrink: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 60px;
+
// Badge variants
&.moderator {
color: var(--ov-warning-color, #f57c00);
@@ -346,7 +373,11 @@
}
.participant-name {
- font-size: 13px;
+ max-width: calc(100% - 60px); // Less space on mobile
+
+ .participant-name-text {
+ font-size: 13px;
+ }
.local-indicator {
font-size: 9px;
@@ -354,6 +385,10 @@
}
}
+ .participant-badges {
+ max-width: 60px;
+ }
+
.participant-subtitle {
font-size: 11px !important;
}