docs: improve layout of SVG renderer and auto-submit form when options are edited (#370)

Author: targos

examples/svg/index.html

@@ -39,39 +39,36 @@ <h2>Demo molecule</h2>
           <div>
             <button type="submit">Render</button>
           </div>
-          <div class="space-y-0.5">
-            <label class="block">
-              Width
-              <input
-                type="number"
-                id="width"
-                name="width"
-                value="600"
-                class="p-0.5 border border-gray-500"
-              />
-            </label>
-            <label class="block">
-              Height
-              <input
-                type="number"
-                id="height"
-                name="height"
-                value="400"
-                class="p-0.5 border border-gray-500"
-              />
-            </label>
-            <label class="block">
-              Max AVBL
-              <input
-                type="number"
-                id="maxAVBL"
-                name="maxAVBL"
-                value="0"
-                class="p-0.5 border border-gray-500"
-              />
-            </label>
+          <div
+            class="grid grid-template gap-y-0.5 gap-x-2 w-fit items-center"
+            style="grid-template-columns: fit-content(100%) 1fr"
+          >
+            <label for="width"> Width </label>
+            <input
+              type="number"
+              id="width"
+              name="width"
+              value="600"
+              class="p-0.5 border border-gray-500"
+            />
+            <label for="height"> Height </label>
+            <input
+              type="number"
+              id="height"
+              name="height"
+              value="400"
+              class="p-0.5 border border-gray-500"
+            />
+            <label for="maxAVBL"> Max AVBL </label>
+            <input
+              type="number"
+              id="maxAVBL"
+              name="maxAVBL"
+              value="0"
+              class="p-0.5 border border-gray-500"
+            />
           </div>
-          <div id="checkboxes" class="flex flex-col gap-0.5"></div>
+          <div id="checkboxes" class="grid grid-cols-2 gap-x-4 gap-y-0.5"></div>
         </form>
       </div>
       <div class="space-y-2">

examples/svg/index.ts

@@ -65,6 +65,7 @@ for (const [name, label] of Object.entries(booleanOptions)) {
 
 const form = document.getElementById('form') as HTMLFormElement;
 const result = document.getElementById('result') as HTMLDivElement;
+form.addEventListener('change', () => form.requestSubmit());
 form.addEventListener('submit', (event) => {
   event.preventDefault();
   const formData = new FormData(form);