improve wrapping

web/index.html

@@ -214,132 +214,136 @@
         </div>
         <div class="flex wrap">
           <!-- Sort Function -->
-          <div
-            class="fn-control | control-group | flex center-items center-content"
-            data-flexGap="small"
-          >
+          <div class="fn-control | control-group | flex wrap center-items">
             <div id="sort-metric-mount"></div>
-            <div class="fn-minmax | flex col center-items" data-flexGap="small">
-              <label>
-                <input
-                  form="colorSortForm"
-                  type="radio"
-                  name="sortOrder"
-                  value="min"
-                  checked
-                />
-                <span class="toggle-label | pill-shape highlight-border">Min</span>
-              </label>
-              <label>
-                <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
-                <span class="toggle-label | pill-shape highlight-border">Max</span>
-              </label>
-            </div>
-            <div class="fn-body | math-font flex center-content center-items">
-              <label>
-                <input
-                  form="colorCalculateForm"
-                  type="checkbox"
-                  name="sortUseWholeImage"
-                  checked
-                />
-                <span class="toggle-label | pill-shape highlight-border">
-                  <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(I)
-                </span>
-              </label>
-              +
-              <label>
-                <input
-                  form="colorCalculateForm"
-                  type="checkbox"
-                  name="sortUseBestCluster"
-                  checked
-                />
-                <span class="toggle-label | pill-shape highlight-border">
-                  <output form="colorCalculateForm" name="sortMetricSymbolB"></output>(B)
-                </span>
-              </label>
-              ⋅
-              <div class="fn-fraction | flex col no-gap">
+            <div class="flex center-items">
+              <div class="fn-minmax | flex col center-items" data-flexGap="small">
+                <label>
+                  <input
+                    form="colorSortForm"
+                    type="radio"
+                    name="sortOrder"
+                    value="min"
+                    checked
+                  />
+                  <span class="toggle-label | pill-shape highlight-border">Min</span>
+                </label>
+                <label>
+                  <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
+                  <span class="toggle-label | pill-shape highlight-border">Max</span>
+                </label>
+              </div>
+              <div class="fn-body | math-font flex center-content center-items">
                 <label>
                   <input
                     form="colorCalculateForm"
                     type="checkbox"
-                    name="sortUseClusterProportion"
+                    name="sortUseWholeImage"
+                    checked
                   />
-                  <span class="toggle-label | pill-shape highlight-border">%B</span>
+                  <span class="toggle-label | pill-shape highlight-border">
+                    <output form="colorCalculateForm" name="sortMetricSymbolP"></output
+                    >(I)
+                  </span>
                 </label>
+                +
                 <label>
                   <input
                     form="colorCalculateForm"
                     type="checkbox"
-                    name="sortUseInvClusterProportion"
+                    name="sortUseBestCluster"
                     checked
                   />
-                  <span class="toggle-label | pill-shape highlight-border">%B</span>
+                  <span class="toggle-label | pill-shape highlight-border">
+                    <output form="colorCalculateForm" name="sortMetricSymbolB"></output
+                    >(B)
+                  </span>
                 </label>
+                ⋅
+                <div class="fn-fraction | flex col no-gap">
+                  <label>
+                    <input
+                      form="colorCalculateForm"
+                      type="checkbox"
+                      name="sortUseClusterProportion"
+                    />
+                    <span class="toggle-label | pill-shape highlight-border">%B</span>
+                  </label>
+                  <label>
+                    <input
+                      form="colorCalculateForm"
+                      type="checkbox"
+                      name="sortUseInvClusterProportion"
+                      checked
+                    />
+                    <span class="toggle-label | pill-shape highlight-border">%B</span>
+                  </label>
+                </div>
               </div>
             </div>
           </div>
           <!-- Cluster Function -->
           <div
             id="cls-fn"
-            class="fn-control | control-group | flex center-items"
+            class="fn-control | control-group | flex center-items wrap"
             data-flexGap="small"
             data-faded="false"
           >
             <div id="cls-metric-mount"></div>
-            <div class="fn-minmax | flex col center-items" data-flexGap="small">
-              <label>
-                <input
-                  form="colorCalculateForm"
-                  type="radio"
-                  name="clusterSortOrder"
-                  value="min"
-                />
-                <span class="toggle-label | pill-shape highlight-border">Min</span>
-              </label>
-              <label>
-                <input
-                  form="colorCalculateForm"
-                  type="radio"
-                  name="clusterSortOrder"
-                  value="max"
-                  checked
-                />
-                <span class="toggle-label | pill-shape highlight-border">Max</span>
-              </label>
-            </div>
-            <div class="fn-body | math-font flex center-content center-items">
-              <span class="toggle-label | pill-shape highlight-border">
-                <output form="colorCalculateForm" name="clusterMetricSymbol"></output>(K)
-              </span>
-              ⋅
-              <div class="fn-fraction | flex col no-gap">
+            <div class="flex center-items">
+              <div class="fn-minmax | flex col center-items" data-flexGap="small">
                 <label>
                   <input
                     form="colorCalculateForm"
-                    type="checkbox"
-                    name="clusterUseClusterSize"
-                    checked
+                    type="radio"
+                    name="clusterSortOrder"
+                    value="min"
                   />
-                  <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                  <span class="toggle-label | pill-shape highlight-border">Min</span>
                 </label>
                 <label>
                   <input
                     form="colorCalculateForm"
-                    type="checkbox"
-                    name="clusterUseInvClusterSize"
+                    type="radio"
+                    name="clusterSortOrder"
+                    value="max"
+                    checked
                   />
-                  <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                  <span class="toggle-label | pill-shape highlight-border">Max</span>
                 </label>
               </div>
+              <div class="fn-body | math-font flex center-content center-items">
+                <span class="toggle-label | pill-shape highlight-border">
+                  <output form="colorCalculateForm" name="clusterMetricSymbol"></output
+                  >(K)
+                </span>
+                ⋅
+                <div class="fn-fraction | flex col no-gap">
+                  <label>
+                    <input
+                      form="colorCalculateForm"
+                      type="checkbox"
+                      name="clusterUseClusterSize"
+                      checked
+                    />
+                    <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                  </label>
+                  <label>
+                    <input
+                      form="colorCalculateForm"
+                      type="checkbox"
+                      name="clusterUseInvClusterSize"
+                    />
+                    <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                  </label>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <!-- Filter/Limit -->
-      <div class="flex" data-flowSpace="small">
+      <div class="flex wrap">
         <label>
           <input form="filterControl" type="checkbox" name="allowRepeatDexNum" hidden />
           <span class="toggle-label | pill-shape highlight-border">

web/styles.css

@@ -467,6 +467,9 @@ button[name="clear"] {
   text-align: right;
 }
 
+#color-inputs + * {
+}
+
 #name-search-controls {
   align-items: stretch;
 }