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 {