From 23a5935a7d29721219f936f70fb6f12061ad64d1 Mon Sep 17 00:00:00 2001
From: TT-392 <git@tt-392.space>
Date: Fri, 31 Oct 2025 21:17:11 +0100
Subject: [PATCH] Tile input sections

---
 templates/base.html |  6 ++++++
 templates/text.html | 15 +++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 750e11f..365b00a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -74,6 +74,12 @@
         border: 2px solid #ff69b4;
     }
 
+    .tiles {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, 190px);
+        gap: 20px
+    }
+
     </style>
 
     {% block head %}
diff --git a/templates/text.html b/templates/text.html
index 2cc835e..ed29df4 100644
--- a/templates/text.html
+++ b/templates/text.html
@@ -19,8 +19,8 @@
 
 
     <form method="POST" action="/text-form", id="text_form">
-        <div id="input"> </div>
-
+        <div id="input", class="tiles"> </div>
+        <div id="plus minus buttons"> </div>
 
         <h2>Font</h2>
         <label for="font">Font:</label>
@@ -54,14 +54,14 @@
     {% endif %}
 
     <script>
-        const line_form = `<h2>[title]</h2>
+        const line_form = `<div><h2>[title]</h2>
         Text:<br>
         <textarea name="[text]">(text)</textarea><br>
         Size:  <input type="number" value="(size)" name="[size]" min="0" required
         style="width: 40px"><br>
         Y position:  <input type="number" value="(y_pos)" name="[y_pos]" required
         style="width: 40px"><br>
-        Bold: <input type="checkbox" name="[bold]" value="bold" (bold)><br>`
+        Bold: <input type="checkbox" name="[bold]" value="bold" (bold)></div>`
 
         const min_button = `<button type="button" onClick="remove_line()">-</button>`
         const plus_button = `<button type="button" onClick="add_line()">+</button>`
@@ -137,13 +137,16 @@
                 modified_line_form = init_field("bold", false ? "checked" : "", i, modified_line_form);
                 html += modified_line_form;
             }
+
+            let buttons = ""
             if (lineCnt == 1) {
-                html += plus_button;
+                buttons = plus_button;
             } else {
-                html += min_button + plus_button;
+                buttons += min_button + plus_button;
             }
 
             document.getElementById("input").innerHTML = html;
+            document.getElementById("plus minus buttons").innerHTML = buttons;
         }
         generate_and_populate_fields()