netcanv: organise commands in UI demo

content/netcanv.dj

@@ -228,6 +228,9 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
         position: relative;
 
         &>svg {
+            max-width: 100%;
+            object-fit: contain;
+
             & g.stack {
                 --ease: var(--ease-out-quintic);
 
@@ -253,14 +256,25 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
         }
 
         &>.controls {
+            display: grid;
+            gap: 0.8rem;
+            grid-template-columns: auto auto;
+            align-items: center;
+
+            &>p {
+                padding: 0;
+                padding-right: 0.8rem;
+                text-align: right;
+            }
+
+            &>.category {
                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
-            justify-content: center;
                 gap: 0.8rem;
+            }
 
             & hr {
-                display: block;
                 margin: 0;
                 width: 0;
                 align-self: stretch;
@@ -292,22 +306,29 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
 </noscript>
 
 <div id="netcanv:ui-example">
-    <svg width="320" height="240" xmlns="http://www.w3.org/2000/svg">
+    <svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
     </svg>
 
     <div class="controls">
-        <button name="reset">Reset</button>
-        <hr>
+        <p>Stack</p>
+        <div class="category">
             <button name="push-h">Push Horizontal</button>
             <button name="push-v">Push Vertical</button>
             <button name="pop">Pop</button>
             <hr>
+            <button name="reset">Reset</button>
+        </div>
+        <p>Rectangle</p>
+        <div class="category">
             <button name="space">Space</button>
             <button name="pad">Pad</button>
             <button name="fit">Fit</button>
-        <hr>
+        </div>
+        <p>Drawing</p>
+        <div class="category">
             <button name="fill">Fill</button>
         </div>
+    </div>
 
     <div class="no-script">
         <p>You'll have to enable JavaScript to play with this example.</p>

static/css/main.css

@@ -425,7 +425,7 @@ button {
     color: var(--text-color);
     box-shadow: 0 1px 2px var(--border-1);
 
-    border-radius: 100px;
+    border-radius: 0.75lh;
 
     transition:
         background-color var(--transition-duration) var(--ease-out-quintic),