Improved positioning of pre-execution action

static/css/style.css

@@ -771,6 +771,26 @@ button#debug_button.active {
     max-width: calc(100vw - 30px);
 }
 
+.pre-execution {
+    width: 100%;
+    display: flex;
+}
+
+.pre-execution h3 {
+    flex-grow: 1;
+    margin: 0;
+    align-content: center;
+}
+
+.pre-execution .control-group {
+    width: auto;
+    flex-grow: 1;
+    margin: 0;
+}
+
+.pre-execution select {
+    margin: 0;
+}
 
 /* Currently Playing Section Styling */
 body.playing .bottom-nav {

templates/index.html

@@ -56,18 +56,20 @@
                 <div id="first_coordinate"></div>
                 <div id="last_coordinate"></div>
             </div>
-            <h4>Pre-Execution Action</h4>
-            <div class="control-group">
-                <select id="pre_execution" name="pre_execution">
-                    <option value="none" selected>None</option>
-                    <option value="clear_in">Clear From Center</option>
-                    <option value="clear_out">Clear From Perimeter</option>
-                    <option value="clear_sideway">Clear Sideway</option>
-                </select>
-            </div>
 
             <!-- Action Buttons -->
             <div class="action-buttons">
+                <div class="pre-execution">
+                    <h3>Pre-Execution Action</h3>
+                    <div class="control-group">
+                        <select id="pre_execution" name="pre_execution">
+                            <option value="none" selected>None</option>
+                            <option value="clear_in">Clear From Center</option>
+                            <option value="clear_out">Clear From Perimeter</option>
+                            <option value="clear_sideway">Clear Sideway</option>
+                        </select>
+                    </div>
+                </div>
                 <button onclick="runThetaRho()" class="cta" >
                     <i class="fa-solid fa-play"></i>
                     <span>Play</span>