Improve definition layout and limit responsiveness

nearest.css

@@ -70,7 +70,7 @@ body {
     display: none;
 }
 
-#reveal-definitions:checked~#definitions {
+#reveal-definitions:checked~.definitions {
     display: flex;
 }
 
@@ -92,14 +92,14 @@ body {
     margin-bottom: 0.5em;
 }
 
-#definitions {
+.definitions {
     display: none;
-    margin-bottom: 0.2em;
 }
 
 .math-section {
     border: 2px solid var(--highlight);
     padding: 0.3em;
+    margin-bottom: 0.2em;
     align-self: stretch;
 }
 

nearest.html

@@ -54,7 +54,7 @@
                         <label for="num-poke">
                             Search limit: <span id="num-poke-display">10</span>
                         </label>
-                        <input type="range" min="1" max="100" value="10" oninput="onLimitChanged()" id="num-poke">
+                        <input type="range" min="1" max="100" value="10" oninput="onLimitChanged(true)" onchange="onLimitChanged()" id="num-poke">
                     </div>
                 </div>
 
@@ -82,24 +82,24 @@
                     <input type="range" min="0" max="10" value="2" step="0.1" oninput="onCustomControlsChanged()" id="close-coeff">
                 </div>
             </form>
-
-            <input type="checkbox" checked id="reveal-definitions" role="button">
-
-            <label id="reveal-def-label" for="reveal-definitions" style="width: 300px">
-                <div id="reveal-def-show">Show Definitions</div>
-                <div id="reveal-def-hide">Hide Definitions</div>
-            </label>
             
-            <div id="definitions" class="panel math-section">
-                <div>Statistics</div>
-                <div class="container">
+            <div class="panel math-section">
+                <input type="checkbox" checked id="reveal-definitions" role="button">
+    
+                <label id="reveal-def-label" for="reveal-definitions" style="width: 300px">
+                    <div id="reveal-def-show">Show Definitions ►</div>
+                    <div id="reveal-def-hide">Hide Definitions ▼</div>
+                </label>
+
+                <div class="definitions">Statistics</div>
+                <div class="container definitions">
                     <div id="main-definition"></div>
                     <div id="angle-definition"></div>
                 </div>
-                <div id="rms-definition" class="container center-aligned center-justified"></div>
-                <hr>
-                <div>Clusters</div>
-                <div id="cluster-definition"></div>
+                <div id="rms-definition" class="container center-aligned center-justified definitions"></div>
+                <hr class="definitions">
+                <div class="definitions">Clusters</div>
+                <div id="cluster-definition" class="definitions"></div>
             </div>
 
             <div class="panel math-section">