From e83b25bc62082c1840966b1c22b8c60a5ec4147f Mon Sep 17 00:00:00 2001
From: Andrew_Gallimore <gallimoreandrew04@gmail.com>
Date: Sun, 26 Feb 2023 15:19:54 -0800
Subject: [PATCH] Changed Grid to Flex & Wrapped Up

---
 index.html | 355 +++++++----------------------------------------------
 lib.js     |   4 +-
 main.css   | 102 ++++++++-------
 3 files changed, 95 insertions(+), 366 deletions(-)

diff --git a/index.html b/index.html
index 43af9c5..754f3c2 100644
--- a/index.html
+++ b/index.html
@@ -1337,266 +1337,11 @@
 		<div id="overlayMsgs" onclick="this.innerHTML = '';" style="display:none"></div>
 		<div id="stickyMsgs" class="hidden"></div>
 		<div id="bigPlayButton" onclick="this.innerHTML = '';" style="display:none"></div>
+
+		<!-- Guest Control-Buttons Box -->
 		<div id="controls_blank" class="hidden controlCenterBox">
-			<!-- <div class="controlsGrid">
-			
-				<button data-action-type="forward" class="mainonly advanced" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
-					<i class="las la-paper-plane"></i>
-					<span data-translate="forward-to-room">Transfer</span>
-				</button>
-				
-				<button data-action-type="direct-chat" class="mainonly" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
-					<i class="las la-envelope"></i>
-					<span data-translate="send-direct-chat">Message</span>
-				</button>
-				<span class="director-message-box hidden" data-action-type="messaging-box">
-					
-					<textarea data-action-type="messaging-box-text" placeholder="Enter your message here"></textarea>
-					<button data-action-type="messaging-box-close" class="">
-						<i class="las la-times"></i>
-						<span data-translate="close">close</span>
-					</button>
-					<span data-action-type="messaging-box-toggle" title="Toggle between the message appearing as a large overlay and as normal chat" >
-						<i class="las la-bell" style="font-size:170%; color:#FFF; cursor:pointer;"></i>
-					</span>
-					<button data-action-type="messaging-box-send">
-						<i class="las la-reply"></i>
-						<span data-translate="send-message">send message</span>
-					</button>
-					
-				</span>	
-				<button data-action-type="hangup" class="mainonly"  title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
-					<i class="las la-sign-out-alt"  style="color:#900"></i>
-					<span data-translate="disconnect-guest" >Hangup</span>
-				</button>
-				
-				<button data-action-type="solo-chat" class="mainonly advanced" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
-					<i class="las la-microphone" style="color:#090"></i>
-					<span data-translate="voice-chat">Solo Talk</span>
-				</button>
-				
-				<button data-action-type="addToScene" class="advanced" data-scene="1" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
-					<i class="las la-plus-square" style="color:#060"></i>
-					<span data-translate="add-to-scene">add to scene 1</span>
-				</button>
-				
-				<button data-action-type="solo-video" class="advanced" style="text-shadow: 0px 0px yellow;"  title="Solo this video everywhere" onclick="requestInfocus(this);">
-					<i class="las la-user"></i>
-					<span data-translate="solo-video">Highlight guest</span>
-				</button>
-				
-				<span class="tooltip" style="border: 0;">
-					<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
-					<span class="tooltiptext" style='overflow: auto;left: 35%;width: 3em;top: -15px;margin: 0;position: absolute;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
-				</span>
-				
-				<button data-action-type="mute-guest" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
-					<i class="las la-microphone-slash" style="color:#900"></i>
-					<span data-translate="mute-guest" >mute guest</span>
-				</button>
-				
-					  /////// BREAK ////////			
-				<span class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');">
-					<i id="chevarrow3" style="padding:0px 7px 0 3px;" class="chevron right" aria-hidden="true"></i>
-					<span data-translate="More-scene-options">More scene options</span>
-				</span>
-				<span class="hideDropMenu" style="grid-column: 2;"></span>
-				
-				<button data-action-type="addToScene"  class="hidden advanced" data-cluster="1" data-scene="2" title="Add this Video to any remote '&scene=2'" onclick="directEnable(this, event);">
-					<i class="las la-plus-square" style="color:#060"></i>
-					<span data-translate="add-to-scene2">add to scene 2</span>
-				</button>
-				
-				<button data-action-type="mute-scene" class="hidden"  data-cluster="1" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
-					<i class="las la-microphone-slash" style="color:#900"></i>
-					<span data-translate="mute-scene" >mute in scene</span>
-				</button>
-				
-				<span class="hidden advanced" data-cluster="1" data-action-type="sceneCluster1">
-					<button data-action-type="addToScene" data-scene="3" title="Add to Scene 3" onclick="directEnable(this, event);">
-						<span >S3</span>
-					</button>
-					<button data-action-type="addToScene" data-scene="4" title="Add to Scene 4" onclick="directEnable(this, event);">
-						<span >S4</span>
-					</button>
-					<button data-action-type="addToScene" data-scene="5"  title="Add to Scene 5" onclick="directEnable(this, event);">
-						<span >S5</span>
-					</button>
-				</span>
-				
-				<span class="hidden advanced" data-cluster="1" data-action-type="sceneCluster2">
-					<button data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event);">
-						<span >S6</span>
-					</button>
-					<button data-action-type="addToScene" data-scene="7" title="Add to Scene 7" onclick="directEnable(this, event);">
-						<span >S7</span>
-					</button>
-					<button data-action-type="addToScene" data-scene="8" title="Add to Scene 8" onclick="directEnable(this, event);">
-						<span >S8</span>
-					</button>
-				</span>
-				
-				<button class="hidden advanced" data-cluster="1" data-action-type="force-keyframe" style=" background-image: linear-gradient(90deg, #C9F0FF 0%, #FFDFB9 39%, #FFDFDF 70%, #D9FFEC 100%);"   title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
-					<span data-translate="force-keyframe">Rainbow Puke Fix</span>
-				</button>
-				
-				<button  class="hidden" data-cluster="1" data-action-type="stats-remote"  title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
-					<i class="las la-info-circle"></i>
-					<span data-translate="stats-remote"> Scene Stats</span>
-				</button>
-				
-				<span class="graphSection hidden" data-action-type="stats-graphs-bitrate" >
-					<span class="hidden" data-message="true" data-no-scenes="true">No scenes active</span>
-				</span>
-				<span class="graphSection hidden" data-action-type="stats-graphs-details" >
-					<span class="hidden" data-no-scenes="true"></span>
-					<span data-action-type="stats-graphs-details-container" class="hidden">
-						<span class="hidden" data-scene-name="true">scene</span>
-						<span class="hidden" data-bitrate="true">bitrate (kbps)</span>
-						<span class="hidden" data-resolution="true">resolution</span>
-						<span class="hidden" style="word-break: break-all;" data-video-codec="true">video codec</span>
-					</span>
-				</span>
-				
-					  /////// BREAK ////////			
-				<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
-					<i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i>
-					<span data-translate="additional-controls">Additional controls</span>
-				</span>
-				<span class="hideDropMenu" style="grid-column: 2;" ></span>
-				 
-				<button class="hidden" data-cluster="2" data-action-type="hide-guest"	title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
-					<i class="las la-video-slash"></i>
-					<span data-translate="hide-guest" >hide guest</span>
-				</button>
-				
-				<button class="hidden mainonly" data-cluster="2" data-action-type="toggle-remote-speaker" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
-					<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
-				</button>
-				
-				<button class="hidden mainonly" data-cluster="2" data-action-type="toggle-remote-display" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
-					<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
-				</button>
-				
-				
-				<span class="hidden" data-cluster="2" data-action-type="change-quality">
-					<button data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
-						<i class="las la-video-slash"></i>
-					</button>
-					<button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
-						<i class="las la-video"></i>
-					</button>
-					<button data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
-						<i class="las la-binoculars"></i>
-					</button>
-				</span>
-				
-				<span class="hidden advanced" data-cluster="2" data-action-type="ordering">
-					<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrder(-1,this.dataset.UUID);">
-						<span data-translate="order-down"><i class="las la-minus"></i></span>
-					</button>
-					<span class="orderspan">
-						<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
-						Mix Order
-					</span>
-					<button style="width:34px;margin-left:0;height: 29px;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
-						<i class="las la-plus"></i>
-					</button>
-				</span>
-				
-				<button class="hidden mainonly advanced" data-cluster="2" data-action-type="change-url"   title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
-					<i class="las la-sync"></i>
-					<span data-translate="change-url">Change URL</span>
-				</button>
-				
-				<button  class="hidden mainonly advanced" data-cluster="2" data-action-type="change-params" style="display:none" title="Change user parameters" onclick="promptUser('transferSettingsTemplate', this.dataset.UUID);">
-					<i class="las la-cog"></i>
-					<span data-translate="change-params">URL Params</span>
-				</button>
-				
-				<button class="hidden" data-cluster="2"  data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
-					<i class="las la-circle"></i>
-					<span data-translate="record-local"> Record Local</span>
-				</button>
-				<button  class="hidden" data-cluster="2"  data-action-type="recorder-remote"  title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
-					<i class="las la-circle"></i>
-					<span data-translate="record-remote"> Record Remote</span>
-				</button>
-				
-				<button  class="hidden mainonly advanced" data-cluster="2"  data-action-type="open-file-share"  title="Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link." onclick="requestFileUpload(this)">
-					<i class="las la-file-upload"></i>
-					<span data-translate="request-upload"> Request File</span>
-				</button>
-				
-				<button class="hidden mainonly" data-cluster="2" data-action-type="create-timer"  title="Set a countdown timer that this guest sees. CTRL (cmd) + click to pause." onclick="directTimer(this, event);">
-					<i class="las la-clock"></i>
-					<span data-translate="create-timer">Create Timer</span>
-				</button>
-				
-				
-				<span class="hidden advanced audiocluster1" data-cluster="2">
-					
-					<button data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
-						<span >C1</span>
-					</button>
-					<button data-action-type="add-channel" title="Set to Audio Channel 2" onclick="changeChannelOffset(this.dataset.UUID, 1);">
-						<span >C2</span>
-					</button>
-					<button data-action-type="add-channel" title="Set to Audio Channel 3" onclick="changeChannelOffset(this.dataset.UUID, 2);">
-						<span >C3</span>
-					</button>
-				</span>
-				
-				<span class="hidden advanced audiocluster2" data-cluster="2">
-					
-					<button data-action-type="add-channel" title="Set to Audio Channel 4" onclick="changeChannelOffset(this.dataset.UUID,3);">
-						<span >C4</span>
-					</button>
-					<button data-action-type="add-channel" title="Set to Audio Channel 5" onclick="changeChannelOffset(this.dataset.UUID, 4);">
-						<span >C5</span>
-					</button>
-					<button data-action-type="add-channel" title="Set to Audio Channel 6" onclick="changeChannelOffset(this.dataset.UUID, 5);">
-						<span >C6</span>
-					</button>
-				</span>
-				
-				<span class="hidden advanced groupcluster1" data-cluster="2">
-					<button data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroup(this);">
-						<span >G1</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroup(this);">
-						<span >G2</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroup(this);">
-						<span >G3</span>
-					</button>
-				</span>
-				
-				<span class="hidden advanced groupcluster2" data-cluster="2">
-					<button data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroup(this);">
-						<span >G4</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroup(this);">
-						<span >G5</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroup(this);">
-						<span >G6</span>
-					</button>
-				</span>
-				<div data-cluster="3">
-					<button class="hidden" data-cluster="2" data-action-type="advanced-audio-settings"  data-active="false"  title="Remote Audio Settings" onclick="requestAudioSettings(this);">
-						<i class="las la-sliders-h"></i>
-						<span data-translate="advanced-audio-settings">Audio Settings</span>
-					</button>
-					<button class="hidden mainonly" data-cluster="2" data-action-type="advanced-camera-settings"  data-active="false"  title="Advanced Video Settings" onclick="requestVideoSettings(this);">
-						<i class="las la-sliders-h"></i>
-						<span data-translate="advanced-camera-settings">Video Settings</span>
-					</button>
-				</div>
-				
-			</div>	 -->
 			<div class="controlsGrid">
-				
+				<!-- General Controls -->
 				<div class="row two"> 
 					<button data-action-type="forward" class="mainonly advanced" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
 						<i class="las la-paper-plane"></i>
@@ -1610,24 +1355,23 @@
 					<!-- Messaging integrated menu -->
 					<span class="director-message-box hidden" data-action-type="messaging-box">
 						<textarea data-action-type="messaging-box-text" placeholder="Enter your message here"></textarea>
-						<div class="controls row">
-							<button data-action-type="messaging-box-close" class="">
-								<i class="las la-times"></i>
-								<span data-translate="close">close</span>
-							</button>
-							<span data-action-type="messaging-box-toggle" title="Toggle between the message appearing as a large overlay and as normal chat" >
-								<i class="las la-bell" style="font-size:170%; color:#FFF; cursor:pointer;"></i>
-							</span>
-							<button data-action-type="messaging-box-send">
-								<i class="las la-reply"></i>
-								<span data-translate="send-message">send message</span>
-							</button>
-						</div>
+						
+						<span data-action-type="messaging-box-toggle" title="Toggle between the message appearing as a large overlay and as normal chat">
+							<i class="las la-bell" style="font-size:170%; color:#FFF; cursor:pointer;"></i>
+						</span>
+						<button class="message-close" data-action-type="messaging-box-close">
+							<i class="las la-times"></i>
+							<span data-translate="close">close</span>
+						</button>
+						<button class="message-send" data-action-type="messaging-box-send">
+							<i class="las la-reply"></i>
+							<span data-translate="send-message">send message</span>
+						</button>
 					</span>	
 
 					<button data-action-type="hangup" class="mainonly"  title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
-						<i class="las la-sign-out-alt"  style="color:#900"></i>
-						<span data-translate="disconnect-guest" >Hangup</span>
+						<i class="las la-sign-out-alt" style="color:#900"></i>
+						<span data-translate="disconnect-guest">Hangup</span>
 					</button>
 					<button data-action-type="solo-chat" class="mainonly advanced" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
 						<i class="las la-microphone" style="color:#090"></i>
@@ -1644,7 +1388,7 @@
 					</button>
 				</div>
 				
-				
+				<!-- Volume & Mute Controls -->
 				<div class="row fourth">
 					<span class="tooltip" style="border: 0;">
 						<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
@@ -1652,18 +1396,17 @@
 					</span>
 					<button data-action-type="mute-guest" class="center" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
 						<i class="las la-microphone-slash" style="color:#900"></i>
-						<!-- <span data-translate="mute-guest">mute guest</span> -->
 					</button>
 				</div>
-				<!-- <span class="spacer"></span> -->
 				
 
-				<!----	  /////// BREAK ////////			-->
+				<!----	  /////// DROPDOWN BREAK ////////			-->
 				<span class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');">
 					<i id="chevarrow3" style="padding:0px 7px 0 3px;" class="chevron right" aria-hidden="true"></i>
 					<span data-translate="More-scene-options">More scene options</span>
 				</span>
 				<div class="group hidden" data-cluster="1">
+					<!-- General Controls -->
 					<div class="row two">
 						<button data-action-type="stats-remote" title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
 							<i class="las la-info-circle"></i>
@@ -1675,6 +1418,7 @@
 						</button>
 					</div>
 
+					<!-- Row of Scenes -->
 					<div class="row four">
 						<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="2" title="Add to Scene 2" onclick="directEnable(this, event);">
 							<span>S2</span>
@@ -1703,13 +1447,12 @@
 						</button>
 					</div>
 					
-					<!-- <button data-action-type="force-keyframe" style=" background-image: linear-gradient(90deg, #C9F0FF 0%, #FFDFB9 39%, #FFDFDF 70%, #D9FFEC 100%);" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
-						<span data-translate="force-keyframe">Rainbow Puke Fix</span>
-					</button> -->
 					<span class="spacer"></span>
+
 				</div>
 				
 
+				<!-- Graph Section for Scenes -->
 				<span class="graphSection hidden" data-action-type="stats-graphs-bitrate" >
 					<span class="hidden" data-message="true" data-no-scenes="true">No scenes active</span>
 				</span>
@@ -1724,13 +1467,13 @@
 				</span>
 				
 
-				<!----	  /////// BREAK ////////			-->
+				<!----	  /////// DROPDOWN BREAK ////////			-->
 				<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
 					<i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i>
 					<span data-translate="additional-controls">Additional controls</span>
 				</span>
-				<!-- <span class="hideDropMenu" style="grid-column: 2;" ></span> -->
 				<div class="group hidden" data-cluster="2">
+					<!-- General Controls -->
 					<div class="row two">
 						<button data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
 							<i class="las la-video-slash"></i>
@@ -1747,11 +1490,7 @@
 							<i class="las la-sync"></i>
 							<span data-translate="change-url">Change URL</span>
 						</button>
-					<!-- </div>
 
-					<span class="spacer big"></span>
-					
-					<div class="row two"> -->
 						<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
 							<i class="las la-circle"></i>
 							<span data-translate="record-local"> Record Local</span>
@@ -1777,51 +1516,55 @@
 						</button>
 					</div>
 					
+					<!-- Row of Channels -->
 					<div class="row six">
-						<button class="btn-HL-blue" data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
+						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
 							<span>C1</span>
 						</button>
-						<button class="btn-HL-blue" data-action-type="add-channel" title="Set to Audio Channel 2" onclick="changeChannelOffset(this.dataset.UUID, 1);">
+						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 2" onclick="changeChannelOffset(this.dataset.UUID, 1);">
 							<span>C2</span>
 						</button>
-						<button class="btn-HL-blue" data-action-type="add-channel" title="Set to Audio Channel 3" onclick="changeChannelOffset(this.dataset.UUID, 2);">
+						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 3" onclick="changeChannelOffset(this.dataset.UUID, 2);">
 							<span>C3</span>
 						</button>
-						<button class="btn-HL-blue" data-action-type="add-channel" title="Set to Audio Channel 4" onclick="changeChannelOffset(this.dataset.UUID,3);">
+						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 4" onclick="changeChannelOffset(this.dataset.UUID,3);">
 							<span>C4</span>
 						</button>
-						<button class="btn-HL-blue" data-action-type="add-channel" title="Set to Audio Channel 5" onclick="changeChannelOffset(this.dataset.UUID, 4);">
+						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 5" onclick="changeChannelOffset(this.dataset.UUID, 4);">
 							<span>C5</span>
 						</button>
-						<button class="btn-HL-blue" data-action-type="add-channel" title="Set to Audio Channel 6" onclick="changeChannelOffset(this.dataset.UUID, 5);">
+						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 6" onclick="changeChannelOffset(this.dataset.UUID, 5);">
 							<span>C6</span>
 						</button>
 					</div>
 					
+					<!-- Row of Groups -->
 					<div class="row six">
-						<button class="btn-HL-green" data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroup(this);">
+						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroup(this);">
 							<span>G1</span>
 						</button>
-						<button class="btn-HL-green" data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroup(this);">
+						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroup(this);">
 							<span>G2</span>
 						</button>
-						<button class="btn-HL-green" data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroup(this);">
+						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroup(this);">
 							<span>G3</span>
 						</button>
-						<button class="btn-HL-green" data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroup(this);">
+						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroup(this);">
 							<span>G4</span>
 						</button>
-						<button class="btn-HL-green" data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroup(this);">
+						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroup(this);">
 							<span>G5</span>
 						</button>
-						<button class="btn-HL-green" data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroup(this);">
+						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroup(this);">
 							<span>G6</span>
 						</button>
 					</div>
 
 					<span class="spacer"></span>
 
+					<!-- General Controls -->
 					<div class="row two">
+						<!-- Mix Order Control -->
 						<span class="row three advanced" data-action-type="ordering">
 							<button data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrder(-1,this.dataset.UUID);">
 								<span data-translate="order-down"><i class="las la-minus"></i></span>
@@ -1834,17 +1577,8 @@
 								<i class="las la-plus"></i>
 							</button>
 						</span>
-						<!-- <button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrder(-1,this.dataset.UUID);">
-							<span data-translate="order-down"><i class="las la-minus"></i></span>
-						</button>
-						<span class="orderspan">
-							<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
-							Mix Order
-						</span>
-						<button style="width:34px;margin-left:0;height: 29px;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
-							<i class="las la-plus"></i>
-						</button> -->
 
+						<!-- Video Feed Quality -->
 						<div class="row three">
 							<button data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
 								<i class="las la-video-slash"></i>
@@ -1855,13 +1589,12 @@
 							<button data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
 								<i class="las la-binoculars"></i>
 							</button>
-							<!-- <span data-action-type="change-quality">
-							</span> -->
 						</div>
 					</div>
 
 					<span class="spacer big"></span>
 					 
+					<!-- Further Audio/Video Settings -->
 					<div class="row two" data-cluster="3">
 						<button data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
 							<i class="las la-sliders-h"></i>
@@ -1888,7 +1621,7 @@
 				</button>
 				<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
 					<i class="las la-microphone-slash"></i>
-					<span data-translate="mute-scene" >mute in scene</span>
+					<span data-translate="mute-scene">mute in scene</span>
 				</button>
 				
 				<span  class="advanced">
diff --git a/lib.js b/lib.js
index 928156f..4666b15 100644
--- a/lib.js
+++ b/lib.js
@@ -11903,11 +11903,11 @@ function remoteMute(ele, event=false, skipSend=false) {
 		if (val == 1){
 			ele.value = 0;
 			ele.classList.remove("pressed");
-			ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i>	<span data-translate="mute-guest" >mute guest</span>';
+			ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i>';
 		} else {
 			ele.value = 1;
 			ele.classList.add("pressed");
-			ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i>	<span data-translate="unmute-guest" >un-mute guest</span>';
+			ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i>';
 		}
 		miniTranslate(ele);
 	}
diff --git a/main.css b/main.css
index 0b2e8a7..fd4c307 100644
--- a/main.css
+++ b/main.css
@@ -598,15 +598,6 @@ body.darktheme .credits>a:visited {
 	color: #FFF;
 }
 
-.pressed {
-	background: #1e0000;
-	-webkit-box-shadow: inset 0px 0px 1px #b90000;
-	-moz-box-shadow: inset 0px 0px 1px #b90000;
-	box-shadow: inset 0px 0px 1px #b90000;
-	outline: none;
-	color: white;
-}
-
 .altpress {
 	background: #673100 !important;
 	-webkit-box-shadow: inset 0px 0px 1px #b90000;
@@ -3367,7 +3358,10 @@ div#roomnotes2 {
 
 
 
-/* DIRECTORS PAGE - User Controls Box */
+
+
+
+/* ---- DIRECTORS PAGE - User Controls Box ---- */
 .controlsGrid {
     display: flex;
     flex-wrap: wrap;
@@ -3380,60 +3374,37 @@ div#roomnotes2 {
 
 .controlsGrid .row {
 	width: 100%;
-	display: grid;
-	grid-gap: 10px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
 	margin-top: 5px;
 	margin-bottom: 5px;
 }
 .controlsGrid .row > .row {
 	margin: 0;
 }
-.controlsGrid .row.two {
-	grid-template-columns: [left] 1fr 1fr [right];
+.controlsGrid .row.two > * {
+	flex: 1 33%;
 }
-.controlsGrid .row.three {
-	grid-template-columns: 1fr 1fr 1fr;
+.controlsGrid .row.three > * {
+	flex: 1 25%;
 }
-.controlsGrid .row.fourth {
-	grid-template-columns: 3fr 1fr;
+.controlsGrid .row.four > * {
+	flex: 1 20%;
 }
-.controlsGrid .row.four {
-	grid-template-columns: 1fr 1fr 1fr 1fr;
-}
-.controlsGrid .row.six {
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-}
-
-.controlsGrid .director-message-box {
-	grid-column-start: left;
-  	grid-column-end: right;
-	padding: 0 10px;
-	padding-top: 10px;
-
-	background: rgba(0, 0, 0, .15);
-}
-.controlsGrid .director-message-box textarea {
-	width: 100%;
-	min-width: 100%;
-	max-width: 100%;
-	padding: 5px;
-}
-.controlsGrid .director-message-box .controls {
-	margin: 5px 0;
-	grid-template-columns: max-content min-content auto;
+.controlsGrid .row.six > * {
+	flex: 1 13%;
 }
 
 .controlsGrid button {
     margin: 0;
     text-align: right;
-    flex: 0 1 calc(50% - 10px);
-	width: 100%;
 }
 .controlsGrid button.center {
 	display: flex;
 	align-self: center;
 	justify-content: center;
-	padding: 0;
+	padding: 0 5px;
 	padding-top: 7px;
 	padding-bottom: 6px;
 }
@@ -3446,11 +3417,26 @@ div#roomnotes2 {
 	height: 15px;
 }
 
-button[data-action-type="messaging-box-close"] {
-	flex: 0 1 25%;
+/* Specitic CSS for different elements inside the guest control-buttons */
+.controlsGrid .director-message-box {
+	flex: 1 100% !important;
+	padding: 10px;
+
+	background: rgba(0, 0, 0, .15);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
 }
-button[data-action-type="messaging-box-send"] {
-	flex: 1 0 50%
+.controlsGrid .director-message-box textarea {
+	flex: 1 100%;
+	padding: 5px;
+}
+.controlsGrid .director-message-box .message-close {
+	flex: 1;
+}
+.controlsGrid .director-message-box .message-send {
+	flex: 1 33%;
 }
 
 .controlsGrid .tooltip {
@@ -3474,7 +3460,6 @@ button[data-action-type="messaging-box-send"] {
 	font-size: 80%;
 	cursor: pointer;
 }
-
 .controlsGrid .orderspan {
 	font-size: 50%;
 	display: flex;
@@ -3483,9 +3468,6 @@ button[data-action-type="messaging-box-send"] {
 	justify-content: center;
 
 	text-align: center;
-	/* width: 49px;
-	height: 22px; */
-	/* top: 5px; */
 	position: relative;
 	user-select: none; 
 }
@@ -3511,6 +3493,7 @@ button[data-action-type="messaging-box-send"] {
 
 
 
+
 #widget {
 	position: absolute;
     width: 25%;
@@ -4799,4 +4782,17 @@ body.darktheme .startupWarning>.las  {
 }
 body.darktheme .invite_setting_group_links a {
 	color:#d2e5ff!important;
+}
+
+
+
+
+/* ---- BASIC CSS CLASSES ---- */
+.pressed {
+	background: #1e0000 !important;
+	-webkit-box-shadow: inset 0px 0px 1px #b90000;
+	-moz-box-shadow: inset 0px 0px 1px #b90000;
+	box-shadow: inset 0px 0px 1px #b90000;
+	outline: none;
+	color: white;
 }
\ No newline at end of file