Draft: Resolve "Re-think lab create page"

Make sure to read our contributing guide

Closes #729, #746, #750, #752

src/main/resources/templates/lab/create/components/advanced/session.html

@@ -37,8 +37,9 @@
             </th:block>
 
             <th:block th:fragment="tabs">
-                <div id="constraints-tab" role="tabpanel" hidden>
-                    <div class="grid col-2 align-center gap-3" style="--col-1: minmax(0, 17rem)">
+                <div class = "ml-5" id="constraints-tab" role="tabpanel" hidden>
+                    <div style="--col-1: minmax(0, 17rem)">
+<!--                        class="grid col-2 align-center gap-3"-->
                         <div>
                             <input
                                 id="cluster-constraint-toggle"
@@ -47,15 +48,18 @@
                             <label for="cluster-constraint-toggle">Cluster/Mentor Group Restriction</label>
                         </div>
 
-                        <div class="flex vertical gap-0">
+                        <div class="ml-6 grid col-2 gap-3 align-center" style="--col-1: minmax(0, 6rem)">
                             <label for="cluster-select">Allow:</label>
                             <div>
                                 <select
                                     multiple
                                     id="cluster-select"
+                                    class="select"
                                     th:field="*{constraints.clusterConstraint.clusters}"
                                     data-select
                                     th:disabled="${dto.constraints.clusterConstraint.clusters.isEmpty()}"
+                                    data-style="variant"
+                                    data-placeholder="Select a group"
                                     required>
                                     <th:block th:each="cluster : ${clusters}">
                                         <option
@@ -76,16 +80,19 @@
                             <label class="custom-control-label" for="md-constraint-toggle">Module Division Restriction</label>
                         </div>
 
-                        <div class="flex vertical gap-0">
+                        <div class="ml-6 grid col-2 gap-3 align-center" style="--col-1: minmax(0, 6rem)">
                             <label for="md-select">Allow:</label>
                             <div>
                                 <select
                                     multiple
                                     data-select
+                                    class="select"
                                     id="md-select"
                                     name="constraints.moduleDivisionConstraint.divisions"
                                     th:disabled="${dto.constraints.moduleDivisionConstraint.divisions.isEmpty()}"
-                                    required>
+                                    required
+                                    data-placeholder="Select a division"
+                                    data-style="variant">
                                     <th:block th:each="division : ${divisions}">
                                         <option
                                             th:value="${division.id}"
@@ -99,7 +106,7 @@
                 </div>
 
                 <div id="repeat-tab" role="tabpanel" hidden>
-                    <div class="grid col-2 align-center gap-3" style="--col-1: minmax(0, 10rem)">
+                    <div class="grid col-2 align-center gap-3 ml-5" style="--col-1: minmax(0, 10rem)">
                         <label for="week-repeat-input">Schedule for x Additional Weeks:</label>
                         <div>
                             <input