From 5a6d17d61a83f6fb31493fad79a9e9c3c30806a2 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 3 Jul 2025 13:04:01 +0200
Subject: [PATCH] frontend: enhance leave button styling and fix CSS syntax for
 force disconnect button

---
 .../src/lib/pages/video-room/video-room.component.html        | 4 +++-
 .../src/lib/pages/video-room/video-room.component.scss        | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
index 4e9f0fe..4bb5bb8 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
@@ -134,12 +134,14 @@
 		(onRecordingStopRequested)="onRecordingStopRequested($event)"
 	>
 		@if (features().canModerateRoom) {
-			<div *ovToolbarAdditionalButtons id="leave-btn" class="custom-leave-btn" style="text-align: center">
+			<div *ovToolbarAdditionalButtons>
 				<button
+					id="leave-btn"
 					mat-icon-button
 					[matMenuTriggerFor]="leaveMenu"
 					matTooltip="Leave options"
 					[disableRipple]="true"
+					class="custom-leave-btn"
 				>
 					<mat-icon>call_end</mat-icon>
 				</button>
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
index e74efac..37868fb 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
@@ -251,7 +251,7 @@
 
 // Custom leave button styling (existing functionality)
 ::ng-deep {
-	#media-buttons-container .custom-leave-btn > button {
+	#media-buttons-container .custom-leave-btn {
 		&:hover {
 			background-color: var(--ov-meet-color-error) !important;
 		}
@@ -266,5 +266,5 @@
 
 // Custom force disconnect button
 .force-disconnect-btn {
-	color: var(--ov-meet-color-error)
+	color: var(--ov-meet-color-error);
 }