Revert changes

Author: tomcollis

public/index.html

@@ -40,6 +40,9 @@
                 row.innerHTML = '<td><input type="text" id="agenda' + currentRows + '" name="agenda' + currentRows + '"></td>' +
                                 '<td><input type="number" id="time' + currentRows + '" name="time' + currentRows + '"></td>';
                 document.getElementById('table-body').appendChild(row);
+                // Move the add button to the end of the last row
+                const addRowContainer = document.getElementById('add-row-container');
+                document.getElementById('table-body').appendChild(addRowContainer);
             }
             if (currentRows === 10) {
                 document.getElementById('addRowBtn').style.display = 'none';
@@ -73,11 +76,10 @@ <h2>Create Meeting</h2>
             <div id="form-buttons">
                 <input type="submit" value="Start Timer">
                 <input type="button" value="Copy Timer URL" onclick="copyURLToClipboard()">
+                <input type="button" id="addRowBtn" value="+" onclick="addRow()">
             </div>
         </form>
-        <div id="add-row-container">
-            <button type="button" class="add-row-btn" id="addRowBtn" onclick="addRow()">+</button>
-        </div>
+
     </main>
 </body>
 </html>

public/styles.css

@@ -12,38 +12,34 @@ table {
     border-collapse: collapse;
 }
 th, td {
-    padding: 10px;
+    padding: 6px;
     text-align: left;
     border-bottom: 1px solid #ddd;
 }
 th {
     background-color: #f2f2f2;
     font-weight: bold;
 }
-#form-buttons {
-    display: flex;
-    justify-content: space-between;
-}
 input[type="text"], input[type="number"] {
     width: calc(100% - 12px);
-    padding: 8px;
-    margin: 4px 0;
+    padding: 6px;
+    margin: 2px 0;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
-input[type="submit"], input[type="button"] {
-    width: calc(50% - 12px);
+#form-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 8px 0;
 }
-.add-row-btn {
-    margin: 10px 0;
+input[type="submit"], input[type="button"] {
+    width: calc(40% - 12px);
 }
-#add-row-container {
+input[type="button"]#addRowBtn {
+    width: calc(20% - 12px);
     text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    font-size: 1.4rem;
 }
-
 /* Timer and Shared Styles */
 body {
     font-family: Arial, sans-serif;
@@ -92,9 +88,9 @@ h2 {
     font-weight: bold;
     color: var(--primary-color);
 }
-.add-row-btn, .next-button, footer a, input[type="submit"], input[type="button"] {
-    font-size: 0.8rem;
-    padding: 10px 20px;
+.next-button, footer a, input[type="submit"], input[type="button"] {
+    font-size: 0.9rem;
+    padding: 6px 12px;
     background-color: var(--btn-primary-color);
     color: white;
     border: none;
@@ -115,7 +111,7 @@ footer a {
 footer a:hover, .next-button:hover, input[type="submit"]:hover, input[type="button"]:hover {
     background-color: var(--btn-hover-color);
 }
-.next-button:disabled {
+input[type="button"]#addRowBtn:disabled, .next-button:disabled {
     background-color: #6c757d;
     cursor: not-allowed;
 }