Tweak spacing and defaults

nearest.css

@@ -65,23 +65,25 @@ math {
 
 /* Controls */
 .control-grid {
+  width: 21em;
   margin-top: 16px;
   display: grid;
   gap: 4px 8px;
   grid:
     "bulb inpt rand"
     "bulb qvec qvec" 2em
-    "cspc cspc cspc"
+    "bulb cspc cspc"
     "sort metr metr"
     "munu munu munu"
     "disp disp disp" 4em
-    /1fr  8em  auto
+    /5em  8em  auto
   ;
   justify-items: stretch;
   align-items: center;
 }
 
 .cluster-grid {
+  width: 21em;
   margin-bottom: 16px;
   display: grid;
   gap: 4px 8px;
@@ -91,7 +93,7 @@ math {
     "blbl clus"
     "disp disp"
     "slbl scal"
-    /10em 10em
+    /10em auto
   ;
   justify-items: stretch;
   align-items: center;

nearest.html

@@ -52,7 +52,7 @@
       <div style="grid-area: qvec" id="qvec"></div>
       <div class="toggle-box" style="grid-area: cspc;">
         <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state)">
-        <label for="space-toggle" style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
+        <label for="space-toggle" style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding-bottom: 0.5em;">
           Color space:&nbsp;
           <span class="toggle-off">CIECAM02-UCS (Jab)</span>
           <span class="toggle-on">sRGB</span>
@@ -66,13 +66,13 @@
         </label>
       </div>
       <select style="grid-area: metr" autocomplete="off" id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
-        <option value="sigma" selected>RMS Deviation (σ)</option>
+        <option value="sigma">RMS Deviation (σ)</option>
         <option value="bigTheta">Mean of Angular Difference (Θ)</option>
         <option value="theta">Angular Difference of Mean (θ)</option>
         <option value="phi">Hue Difference of Mean (ϕ)</option>
         <option value="delta">Euclidean Distance to Mean (δ)</option>
         <option value="ch">Chebyshev Distance to Mean (Ч)</option>
-        <option value="inertia">Inertia (I)</option>
+        <option value="inertia" selected>Inertia (I)</option>
         <option value="size">Size (N)</option>
       </select>
       <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>