ov-components: improve layout and styling for participant name and badges

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 @@
 
 			<!-- Content section with name and status -->
 			<div class="participant-content">
-				<div class="participant-name">
+				<!-- Name row with better space management -->
-					{{ participantDisplayName }}
+				<div class="participant-name-row">
-					<span *ngIf="isLocalParticipant" class="local-indicator">
+					<div class="participant-name">
-						{{ 'PANEL.PARTICIPANTS.YOU' | translate }}
+						<span class="participant-name-text">{{ participantDisplayName }}</span>
-					</span>
+						<span *ngIf="isLocalParticipant" class="local-indicator">
+							{{ 'PANEL.PARTICIPANTS.YOU' | translate }}
+						</span>
+					</div>
 
-					<!-- Participant badges -->
+					<!-- Participant badges in separate container -->
 					<div class="participant-badges">
 						<ng-container *ngTemplateOutlet="participantBadgeTemplate"></ng-container>
 					</div>
@@ -29,11 +32,6 @@
 					<span class="status-indicator">
 						{{ _participant | tracksPublishedTypes }}
 					</span>
-					<!-- Additional status indicators -->
-					<span *ngIf="_participant?.isMutedForcibly" class="status-indicator">
-						<mat-icon>volume_off</mat-icon>
-						{{ 'PANEL.PARTICIPANTS.MUTED' | translate }}
-					</span>
 				</div>
 			</div>
 

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 row container
-	.participant-name {
+	.participant-name-row {
-		font-weight: 600 !important;
-		font-size: 14px;
-		line-height: 1.2;
-		color: var(--ov-text-surface-color);
-		margin: 0 0 4px 0;
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		justify-content: space-between;
-		white-space: nowrap;
+		width: 100%;
-		overflow: hidden;
+		margin: 0;
-		text-overflow: ellipsis;
+		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;
+		gap: 4px;
-		flex-wrap: wrap;
+		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;
 		}