somewhat fixed chat now

index.html

@@ -132,19 +132,19 @@
 			<div id="head7" class="hidden" data-translate="director-muted-you">The director has muted you.</div>
 			<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
 		</div>
-		<div id="chatModule" class="hidden">
-			<a target="popup" id="popOutChat" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
-			<div id="chatBody"> 
-				<div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
-					Welcome to the chat! You can send text messages directly to connected peers from here.
-				</div>
-			</div>
-			<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
-			<button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
-		</div>
 		<div id="controlButtons" class="hidden">
             <div class="controlPositioning">
                 <div id="obsState" class="hidden" >ACTIVE</div>
+                <div id="chatModule" class="hidden">
+                    <a target="popup" id="popOutChat" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
+                    <div id="chatBody"> 
+                        <div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
+                            Welcome to the chat! You can send text messages directly to connected peers from here.
+                        </div>
+                    </div>
+                    <input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
+                    <button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
+                </div>
                 <div id="subControlButtons">
                 
                     <div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
@@ -2480,6 +2480,6 @@
 		// If you wish to change branding, blank offers a good clean start.
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
 		-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=602"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=603"></script>
 	</body>
 </html>

lib.js

@@ -3632,13 +3632,12 @@ function updateMixerRun(e=false){  // this is the main auto-mixing code.  It's a
 		}
 		
 		var h = window.innerHeight - hi;
-		
 		if (session.dedicatedControlBarSpace || window.innerHeight<=700 ){ // # This needs to be reviewed.
-			if (document.getElementById("controlButtons") && !session.overlayControls){
+			if (document.getElementById("subControlButtons") && !session.overlayControls){
-				var h = window.innerHeight - hi - document.getElementById("controlButtons").offsetHeight;
+				if (!document.getElementById("subControlButtons").yOffset || (document.getElementById("subControlButtons").yOffset>-10)){
-			} else {
+					h = window.innerHeight - hi - document.getElementById("subControlButtons").offsetHeight;
-				var h = window.innerHeight - hi;
+				}
-			}
+			} 
 		}
 		
 		var arW = 16.0;

main.css

@@ -1791,19 +1791,77 @@ input[type=range]:focus::-ms-fill-upper {
 
 /* ////// Icon resizing for mobile subControl bar ////// */
 
-@media only screen and (max-height: 500px) {
+
-    #subControlButtons {
+.inMessage {
-        position: unset;
+	color: #000;
-        min-width: unset;
+	margin: 3px;
-    }
+	border-radius: 5px;
-    #subControlButtons > div {
+	background: #FFF;
-        min-width: 40px;
+	padding: 5px;
-        min-height: 40px;
+	text-align: left;
-        margin: 4px;
+	margin: 10px 3px;
-    }
+}
-    #SubControlButtons > div i {
+.actionMessage {
-        font-size: 28px;
+	color: #000;
-    }
+	margin: 3px;
+	border-radius: 5px;
+	background: #FFF;
+	padding: 5px;
+	text-align: left;
+	margin: 10px 3px;
+}
+.outMessage {
+	color: #000;
+	border-radius: 5px;
+	background: #BCF;
+	padding: 5px;
+	text-align: right;
+    margin-bottom: 5px;
+}
+#chatBody {
+    z-index: 12;
+    background-color: #0004;
+    width: 100%;
+    border-radius: 5px;
+    overflow-y: scroll;
+    overflow-wrap: anywhere;
+    max-height: min(500px, 70vh);
+}
+
+#chatBody::-webkit-scrollbar {
+	width: 0px;
+	background: transparent; /* make scrollbar transparent */
+}
+
+div#chatBody a {
+    color: blue;
+    text-decoration: underline;
+    background-color: #c9c9c9;
+    border: 2px solid black;
+    padding: 2px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+#chatModule {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    max-width: min(500px, 100vh);
+    z-index: 3;
+    margin-bottom: 65px;
+    gap: 0px 5px;
+	pointer-events: auto;
+}
+#chatInput {
+	color: #000;
+	background-color: #FFFE;
+	width: 70%;
+	padding: 3px;
+}
+.chatBarInputButton {
+	width: calc(30% - 5px);
+    margin: unset;
 }
 
 @media only screen and (max-width: 500px) {
@@ -1821,16 +1879,19 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
-@media only screen and (max-height: 410px) {
+@media only screen and (max-height: 500px) {
+   
     #subControlButtons > div {
-        min-width: 35px;
+        min-width: 40px;
-        min-height: 35px;
+        min-height: 40px;
-        border-radius: 6px;
+        margin: 4px;
-        margin: 3px;
     }
     #SubControlButtons > div i {
-        font-size: 24px;
+        font-size: 28px;
     }
+	#chatModule{
+		margin-bottom: 50px;
+	}
 }
 
 @media only screen and (max-width: 410px) {
@@ -1845,6 +1906,21 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
+@media only screen and (max-height: 410px) {
+    #subControlButtons > div {
+        min-width: 35px;
+        min-height: 35px;
+        border-radius: 6px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 24px;
+    }
+	#chatModule{
+		margin-bottom: 40px;
+	}
+}
+
 @media only screen and (max-width: 360px) {
     #subControlButtons > div {
         min-width: 30px;
@@ -1867,6 +1943,9 @@ input[type=range]:focus::-ms-fill-upper {
     #SubControlButtons > div i {
         font-size: 20px;
     }
+	#chatModule {
+		margin-bottom: 37px;
+	}
 }
 
 @media only screen and (max-width: 320px) {
@@ -3371,84 +3450,6 @@ input[type=checkbox] {
 	background-size: contain;
 	background-color: rgba(0, 0, 0, 0);
 }
-.inMessage {
-	color: #000;
-	margin: 3px;
-	border-radius: 5px;
-	background: #FFF;
-	padding: 5px;
-	text-align: left;
-	margin: 10px 3px;
-}
-.actionMessage {
-	color: #000;
-	margin: 3px;
-	border-radius: 5px;
-	background: #FFF;
-	padding: 5px;
-	text-align: left;
-	margin: 10px 3px;
-}
-.outMessage {
-	color: #000;
-	border-radius: 5px;
-	background: #BCF;
-	padding: 5px;
-	text-align: right;
-    margin-bottom: 5px;
-}
-#chatBody {
-    z-index: 12;
-    background-color: #0004;
-    width: 100%;
-    border-radius: 5px;
-    overflow-y: scroll;
-    overflow-wrap: anywhere;
-    max-height: min(500px, 70vh);
-}
-
-#chatBody::-webkit-scrollbar {
-	width: 0px;
-	background: transparent; /* make scrollbar transparent */
-}
-
-div#chatBody a {
-    color: blue;
-    text-decoration: underline;
-    background-color: #c9c9c9;
-    border: 2px solid black;
-    padding: 2px 10px;
-    border-radius: 6px;
-    cursor: pointer;
-}
-
-#chatModule {
-    bottom: 50px;
-    position: fixed;
-    margin: 10px;
-    align-self: center;
-    width: 574px;
-    min-width: 300px;
-    max-width: 100%;
-    z-index: 3;
-}
-#chatInput {
-	color: #000;
-    background-color: #FFFE;
-    max-width: 700px;
-    min-width: 320px;
-    width: calc(100% - 89px);
-    font-size: 105%;
-    padding: 3px;
-    border: 3px solid black;
-}
-.chatBarInputButton {
-	width: 60px;
-    background-color: #EEE;
-    top: -1px;
-    position: relative;
-    margin-right: 10px;
-}
     
 .debugStats {
 	font-size: 0.8rem;