UI Improvements and TV mode

tabs/chores.php

@@ -128,14 +128,23 @@ if ($editChore) {
     <?php endif; ?>
 
     <?php if ($showChoreForm): ?>
-    <div class="card mb-4">
-        <div class="card-header d-flex justify-content-between align-items-center">
+    <div class="card mb-4 <?= $editChore ? '' : 'border-secondary' ?>">
+        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
             <span><?= $editChore ? 'Edit chore' : 'New chore' ?></span>
             <?php if ($editChore): ?>
                 <a href="?tab=chores" class="btn btn-sm btn-outline-secondary">Cancel edit</a>
+            <?php else: ?>
+                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#choreFormCollapse" aria-expanded="false" aria-controls="choreFormCollapse">
+                    Show form
+                </button>
             <?php endif; ?>
         </div>
+        <?php if ($editChore): ?>
         <div class="card-body">
+        <?php else: ?>
+        <div class="collapse" id="choreFormCollapse">
+            <div class="card-body">
+        <?php endif; ?>
             <form id="choreForm" class="row g-3">
                 <input type="hidden" name="id" id="chore_id" value="<?= $editChore ? htmlspecialchars($editChore['id'] ?? '', ENT_QUOTES, 'UTF-8') : '' ?>">
 
@@ -221,7 +230,12 @@ if ($editChore) {
                     <div class="alert d-none" id="choreFormFeedback" role="status"></div>
                 </div>
             </form>
+        <?php if ($editChore): ?>
         </div>
+        <?php else: ?>
+            </div>
+        </div>
+        <?php endif; ?>
     </div>
     <?php elseif ($activePerson !== null && $editChore !== null && !$editChoreAllowed): ?>
         <div class="alert alert-warning mb-4">You can’t edit this chore. Only the person who created it or a verified Head of household can.</div>