Prevent wrapping in dialog buttons

Author: BalaM314

index.css

@@ -342,6 +342,9 @@ td, th {
 	right: 10px;
 	font-size: 40px;
 }
+.dialog-button {
+	white-space: nowrap;
+}
 .settings-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

index.html

@@ -46,9 +46,9 @@
 			<div class="horizontal" style="margin-top: 20px;">
 				<button id="execute-soodocode-button">Execute</button>
 				<button id="dump-tokens-button">Parse</button>
-				<span id="settings-dialog-button" class="text-button" style="font-size: 25px; color: #CFC;" aria-haspopup="dialog" tabindex="0" role="button">Settings 🛠</span>
-				<span id="files-dialog-button" class="text-button" style="font-size: 25px; color: #FCC;" aria-haspopup="dialog" tabindex="0" role="button">Files 📂</span>
-				<span id="programs-dialog-button" class="text-button" style="font-size: 25px; color: #CCF;" aria-haspopup="dialog" tabindex="0" role="button">Programs 📝</span>
+				<span id="settings-dialog-button" class="text-button dialog-button" style="font-size: 25px; color: #CFC;" aria-haspopup="dialog" tabindex="0" role="button">Settings 🛠</span>
+				<span id="files-dialog-button" class="text-button dialog-button" style="font-size: 25px; color: #FCC;" aria-haspopup="dialog" tabindex="0" role="button">Files 📂</span>
+				<span id="programs-dialog-button" class="text-button dialog-button" style="font-size: 25px; color: #CCF;" aria-haspopup="dialog" tabindex="0" role="button">Programs 📝</span>
 			</div>
 			<h2>Program output</h2>
 			<div id="output-div" class="output-div"></div>