Fixed window sizing issues

.common/core/widget-dock-core/index.html

@@ -38,7 +38,7 @@
 
 		<label id="sb-required-actions-success">✅ All actions found</label>
 
-		<label id="sb-required-actions-failure">⚠️ You are missing Streamer.bot actions</label>
+		<label id="sb-required-actions-failure"><span>⚠️</span> You are missing Streamer.bot actions</label>
 		<label id="sb-required-actions-failure-subtext" class="setting-description">The following actions were not found in Streamer.bot:</label>
 
 		<div id="sb-required-actions-list" class="callout">

.common/core/widget-dock-core/script.js

@@ -243,7 +243,7 @@ function SetRequiredActionState(isSuccess) {
 // PAGE INTERACTIONS //
 ///////////////////////
 
-function Connect() {   
+function Connect() {
     sbClientListeners = sbClient.listeners;
     sbClient.options.host = sbAddressInput.value;
     sbClient.options.port = sbPortInput.value;

.common/core/widget-dock-core/style.css

@@ -5,6 +5,11 @@ body {
 	flex-direction: column;
 }
 
+/* Needed to force correct emoji representation */
+span {
+	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
+}
+
 
 
 /**************/
@@ -17,7 +22,7 @@ body {
 	align-items: center;
 	padding: 0em 1em;
 	gap: 1em;
-  	box-shadow: 0 0 10px rgba(0,0,0,1);
+	box-shadow: 0 0 10px rgba(0, 0, 0, 1);
 	z-index: 1;
 }
 
@@ -46,10 +51,51 @@ body {
 /********************************/
 
 #sb-required-actions-dialog {
-	max-width: 30em;
+	max-width: 80%;
+	max-height: 80%;
+	overflow: auto;
 	display: none;
 }
 
+#sb-connect-dialog {
+	max-width: 90%;
+	/* never wider than 90% of viewport */
+	width: 90%;
+	/* scale with window */
+	max-height: 90vh;
+	/* never taller than 90% of viewport */
+	overflow-y: auto;
+	/* vertical scroll if content overflows */
+	overflow-x: hidden;
+	/* prevent horizontal scroll */
+	box-sizing: border-box;
+	/* include padding in width/height */
+}
+
+#sb-connect-dialog {
+	width: 90%;
+	max-width: 30em;
+	max-height: 90vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+	box-sizing: border-box;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	padding: 1em;
+}
+
+#sb-connect-dialog>div:nth-of-type(2) {
+	display: flex;
+	gap: 1em;
+}
+
+#sb-connect-dialog .field {
+	flex: 1;
+	min-width: 0;
+}
+
 #sb-connect-button:enabled:hover {
 	background-color: #3be477;
 }
@@ -72,6 +118,7 @@ body {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	gap: 1em;
 }
 
 .sb-required-action-found {
@@ -79,17 +126,22 @@ body {
 }
 
 #sb-import-code {
-  white-space: nowrap;
+	white-space: nowrap;
-  overflow-x: auto;
+	overflow-x: auto;
-  overflow-y: hidden;
+	overflow-y: hidden;
-  max-width: 100%;
+	width: 100%;
-  padding: 0.5em;
+	font-family: monospace;
-  font-family: monospace;
+	font-size: 1em;
-  font-size: 1em;
+	padding: 0.5em;
 }
 
 #sb-import-wrapper {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  gap: 0.5em;
+	gap: 0.5em;
+	max-width: 30em;
+}
+
+#sb-import-copy-button {
+	width: auto;
 }

.common/styles/global.css

@@ -23,6 +23,8 @@ body {
     margin: 0;
     padding: 0;
     font-family: Inter, system-ui, sans-serif;
+    /* font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; */
+	/* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; */
     color: white;
     background-color: var(--background-color);
 }
@@ -47,7 +49,7 @@ body {
 
 .setting-description {
     font-size: 0.9em;
-    font-weight: 200;
+    font-weight: 100;
 }
 
 .setting-attribute {

printer-bot/contents/index.html

@@ -18,14 +18,14 @@
         </div>
         <div class="setting">
             <div>
-                <label class="setting-label" for="paper-width">Paper Width (mm)</label>
+                <div class="setting-label" for="paper-width">Paper Width (mm)</div>
                 <div class="setting-description">Printer Bot was designed for 80mm thermal paper</div>
             </div>
             <input type="number" id="paper-width" name="paper-width" placeholder="80" value="80" min="0" autocomplete="off">
         </div>
         <div class="setting">
             <div>
-                <label class="setting-label" for="ignore-test-triggers">Ignore Test Triggers</label>
+                <div class="setting-label" for="ignore-test-triggers">Ignore Test Triggers</div>
                 <div class="setting-description">In enabled, 'Test' and 'Simulate' events will be ignored</div>
             </div>
             <label class="switch" style="margin-left: auto;">
@@ -35,7 +35,7 @@
         </div>
         <div class="setting">
             <div>
-                <label class="setting-label" for="delete-temp-files">Delete Temp Files</label>
+                <div class="setting-label" for="delete-temp-files">Delete Temp Files</div>
                 <div class="setting-description">Turn this off for debugging</div>
             </div>
             <label class="switch" style="margin-left: auto;">