From 65025c4e333578566eeb9a9c16e9aeaa7dab2a16 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 11 Jul 2022 15:32:36 +0200
Subject: [PATCH] openvidu-components: Improved prejoin styles

---
 .../pre-join/pre-join.component.css           | 24 ++++++++++++++++---
 .../pre-join/pre-join.component.html          | 14 ++++++-----
 .../components/session/session.component.css  |  6 ++---
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
index 140e23a6..2b26a915 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
@@ -5,17 +5,29 @@
 }
 
 .prejoin-toolbar {
+	max-height: 40px;
+	height: 40px;
+}
+#toolbar {
 	background-color: var(--ov-light-color);
+	height: 100%;
+}
+#toolbar ::ng-deep .lang-button {
+	height: 25px !important;
+	font-size: 14px !important;
+	line-height: 0px;
+	align-items: unset !important;
 }
 .spacer {
 	flex: 1 1 auto;
 }
 
 #branding-logo {
-	background-color: var(--ov-logo-background-color);
 	border-radius: var(--ov-panel-radius);
 	max-width: 35px;
 	max-height: 35px;
+	height: -webkit-fill-available;
+	height: -moz-available;
 	padding: 10px;
 	margin-right: 10px;
 }
@@ -32,9 +44,13 @@ hr {
 	margin: 0;
 }
 
+#prejoin-container {
+	height: calc(100% - 40px);
+}
 #prejoin-container ::ng-deep .sidenav-container {
 	padding-top: 0px !important;
 }
+
 #prejoin-container ::ng-deep #background-effects-container {
 	margin: 0px !important;
 	max-height: 100% !important;
@@ -53,6 +69,10 @@ hr {
 	min-width: 0px !important;
 }
 
+#prejoin-container ::ng-deep .OT_root {
+	padding: 0px !important;
+}
+
 #background-effects-btn {
 	position: absolute;
 	z-index: 1;
@@ -88,7 +108,6 @@ hr {
 	display: block !important;
 }
 
-
 .join-btn-container {
 	width: inherit;
 	text-align: center;
@@ -102,7 +121,6 @@ hr {
 	border-radius: var(--ov-video-radius);
 }
 
-
 @media only screen and (max-width: 480px) {
 	.container,
 	.media-panel-container,
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
index 7f8aaa48..22bf868e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
@@ -1,10 +1,12 @@
-<mat-toolbar class="prejoin-toolbar">
-	<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
-	<!-- <span>OpenVidu Call</span> -->
-	<span class="spacer"></span>
+<div class="prejoin-toolbar">
+	<mat-toolbar id="toolbar">
+		<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
+		<!-- <span>OpenVidu Call</span> -->
+		<span class="spacer"></span>
 
-	<ov-lang-selector *ngIf="!isMinimal" (onLangSelectorClicked)="onDeviceSelectorClicked()"></ov-lang-selector>
-</mat-toolbar>
+		<ov-lang-selector *ngIf="!isMinimal" (onLangSelectorClicked)="onDeviceSelectorClicked()"></ov-lang-selector>
+	</mat-toolbar>
+</div>
 
 <div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column">
 	<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container">
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
index 85451af5..f7f63086 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
@@ -1,6 +1,6 @@
 #session-container {
 	background-color: var(--ov-primary-color);
-	min-width: 400px;
+	/* min-width: 400px; */
 	height: 100%;
 }
 
@@ -52,7 +52,7 @@
 #toolbar-container,
 #footer-container {
 	background-color: var(--ov-primary-color);
-	min-width: 400px !important;
+	/* min-width: 400px !important; */
 	width: 100%;
 	height: 70px;
 }
@@ -66,7 +66,7 @@
 	bottom: 0;
 	left: 0;
 	z-index: 999999;
-	min-width: 400px !important;
+	/* min-width: 400px !important; */
 }
 
 .reconnecting-container {