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