From faaac23c6649389c1a0806bdb74c85f60c6be4ee Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 22 Sep 2025 21:17:11 +0200
Subject: [PATCH] ov-components: enhance mobile responsiveness for panel and
 session components

---
 .../src/lib/components/panel/panel.component.scss    | 10 ++++++++++
 .../lib/components/session/session.component.scss    | 12 +++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
index 5279b327..a66e7c73 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
@@ -9,6 +9,16 @@
 	align-items: stretch;
 }
 
+// Mobile responsiveness - ensure panels occupy full width on mobile devices
+@media only screen and (max-width: 768px) {
+	.panel-container {
+		margin: 8px;
+		max-height: calc(100% - 16px);
+		min-height: calc(100% - 16px);
+		border-radius: 8px;
+	}
+}
+
 .panel-header-container {
 	padding: 10px;
 	flex: inherit;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
index be5731f7..2d7338c9 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
@@ -90,11 +90,21 @@
 	position: absolute;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 	#session-container {
 		width: 100%;
 		/* position: fixed; */
 	}
+
+	.sidenav-menu {
+		width: 100% !important;
+		max-width: 100% !important;
+	}
+
+	.big {
+		width: 100% !important;
+		max-width: 100% !important;
+	}
 }
 
 ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {