From 4613946cea03bdd5f3c0c30bfd36e5af2de886d4 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Mon, 27 Jul 2026 13:07:38 -0400
Subject: [PATCH] Use full browser width with 2-column layout at 1100px+

Widened admin-main to 1400px max-width and added panel-cols/panel-col
wrappers so Kids, Courses, Spelling, and Flashcards all display content
on the left and forms/editors on the right on wider screens. Falls back
to single-column on smaller viewports.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/admin.html | 194 ++++++++++++++++++++++++++--------------------
 public/styles.css |  11 ++-
 2 files changed, 120 insertions(+), 85 deletions(-)

diff --git a/public/admin.html b/public/admin.html
index 262d0d3..7a0b5bf 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -39,28 +39,46 @@
       <!-- Kids -->
       <section id="panel-kids" class="panel">
         <h1>Kids</h1>
-        <div id="student-rows"></div>
-        <form id="add-student-form" class="inline-form">
-          <input id="new-student-name" placeholder="Name" aria-label="New kid name">
-          <select id="new-student-emoji" aria-label="Avatar">
-            <option>🦊</option><option>🐸</option><option>🦄</option><option>🐯</option>
-            <option>🐼</option><option>🦖</option><option>🐙</option><option>🦉</option>
-            <option>🐻</option><option>🐰</option><option>🦁</option><option>🐶</option>
-          </select>
-          <button type="submit">Add kid</button>
-        </form>
+        <div class="panel-cols">
+          <div class="panel-col">
+            <div id="student-rows"></div>
+          </div>
+          <div class="panel-col">
+            <div class="admin-card">
+              <h2 style="margin:0 0 0.75rem">Add a kid</h2>
+              <form id="add-student-form" class="inline-form" style="flex-direction:column">
+                <input id="new-student-name" placeholder="Name" aria-label="New kid name">
+                <select id="new-student-emoji" aria-label="Avatar">
+                  <option>🦊</option><option>🐸</option><option>🦄</option><option>🐯</option>
+                  <option>🐼</option><option>🦖</option><option>🐙</option><option>🦉</option>
+                  <option>🐻</option><option>🐰</option><option>🦁</option><option>🐶</option>
+                </select>
+                <button type="submit">Add kid</button>
+              </form>
+            </div>
+          </div>
+        </div>
       </section>
 
       <!-- Courses list -->
       <section id="panel-courses" class="panel">
         <h1>Courses</h1>
-        <div id="course-rows"></div>
-        <form id="add-course-form" class="inline-form">
-          <input id="new-course-name" placeholder="Course name (e.g. Science 3)" aria-label="Course name">
-          <input id="new-course-subject" placeholder="Subject" aria-label="Subject">
-          <input id="new-course-color" type="color" value="#4f86f7" aria-label="Color">
-          <button type="submit">Add course</button>
-        </form>
+        <div class="panel-cols">
+          <div class="panel-col">
+            <div id="course-rows"></div>
+          </div>
+          <div class="panel-col">
+            <div class="admin-card">
+              <h2 style="margin:0 0 0.75rem">Add a course</h2>
+              <form id="add-course-form" class="inline-form" style="flex-direction:column">
+                <input id="new-course-name" placeholder="Course name (e.g. Science 3)" aria-label="Course name">
+                <input id="new-course-subject" placeholder="Subject" aria-label="Subject">
+                <input id="new-course-color" type="color" value="#4f86f7" aria-label="Color">
+                <button type="submit">Add course</button>
+              </form>
+            </div>
+          </div>
+        </div>
       </section>
 
       <!-- Course detail (units + items + roster) -->
@@ -277,80 +295,88 @@
       <!-- Spelling (legacy word lists + weekly assignment) -->
       <section id="panel-spelling" class="panel">
         <h1>Spelling</h1>
-        <h2>This week's list per kid</h2>
-        <div id="assign-rows"></div>
-
-        <h2>Word lists</h2>
-        <div id="list-rows"></div>
-        <details id="list-editor-details">
-          <summary id="list-editor-title">New list</summary>
-          <form id="list-form" class="admin-card">
-            <input type="hidden" id="list-id">
-            <input id="list-name" placeholder="List name (e.g. Week of July 6)" aria-label="List name">
-            <input id="list-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="list-groups-datalist">
-            <datalist id="list-groups-datalist"></datalist>
-            <textarea id="list-words" rows="8"
-              placeholder="One word per line. Paste any list from your curriculum!&#10;&#10;Add an example sentence with |&#10;receive | Did you receive my letter?&#10;&#10;Or just a plain list:&#10;because&#10;enough&#10;friend"></textarea>
-            <div class="row-actions">
-              <button type="submit">Save list</button>
-              <button type="button" id="list-cancel" class="secondary">Clear</button>
-            </div>
-          </form>
-        </details>
-
-        <details id="list-bulk-details">
-          <summary>Bulk import lists</summary>
-          <div class="admin-card">
-            <p class="hint" style="margin:0 0 0.5rem">Start each list with <strong># List name</strong> on its own line, then words below it. Optional group applies to all imported lists.</p>
-            <input id="list-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="list-groups-datalist">
-            <textarea id="list-bulk-text" rows="12"
-              placeholder="# Week 1&#10;because&#10;enough&#10;friend&#10;&#10;# Week 2&#10;receive | Did you receive my letter?&#10;achieve&#10;believe"></textarea>
-            <div class="row-actions">
-              <button type="button" id="list-bulk-save">Import all lists</button>
-              <button type="button" id="list-bulk-clear" class="secondary">Clear</button>
-            </div>
-            <p id="list-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
+        <div class="panel-cols">
+          <div class="panel-col">
+            <h2>This week's list per kid</h2>
+            <div id="assign-rows"></div>
+            <h2>Word lists</h2>
+            <div id="list-rows"></div>
+            <h2>Test results</h2>
+            <div id="results-area"></div>
           </div>
-        </details>
-
-        <h2>Test results</h2>
-        <div id="results-area"></div>
+          <div class="panel-col">
+            <details id="list-editor-details">
+              <summary id="list-editor-title">New list</summary>
+              <form id="list-form" class="admin-card">
+                <input type="hidden" id="list-id">
+                <input id="list-name" placeholder="List name (e.g. Week of July 6)" aria-label="List name">
+                <input id="list-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="list-groups-datalist">
+                <datalist id="list-groups-datalist"></datalist>
+                <textarea id="list-words" rows="8"
+                  placeholder="One word per line. Paste any list from your curriculum!&#10;&#10;Add an example sentence with |&#10;receive | Did you receive my letter?&#10;&#10;Or just a plain list:&#10;because&#10;enough&#10;friend"></textarea>
+                <div class="row-actions">
+                  <button type="submit">Save list</button>
+                  <button type="button" id="list-cancel" class="secondary">Clear</button>
+                </div>
+              </form>
+            </details>
+            <details id="list-bulk-details">
+              <summary>Bulk import lists</summary>
+              <div class="admin-card">
+                <p class="hint" style="margin:0 0 0.5rem">Start each list with <strong># List name</strong> on its own line, then words below it. Optional group applies to all imported lists.</p>
+                <input id="list-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="list-groups-datalist">
+                <textarea id="list-bulk-text" rows="12"
+                  placeholder="# Week 1&#10;because&#10;enough&#10;friend&#10;&#10;# Week 2&#10;receive | Did you receive my letter?&#10;achieve&#10;believe"></textarea>
+                <div class="row-actions">
+                  <button type="button" id="list-bulk-save">Import all lists</button>
+                  <button type="button" id="list-bulk-clear" class="secondary">Clear</button>
+                </div>
+                <p id="list-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
+              </div>
+            </details>
+          </div>
+        </div>
       </section>
 
       <!-- Flashcard decks -->
       <section id="panel-decks" class="panel">
         <h1>Flashcard Decks</h1>
-        <div id="deck-rows"></div>
-        <details id="deck-editor-details">
-          <summary id="deck-editor-title">New deck</summary>
-          <form id="deck-form" class="admin-card">
-            <input type="hidden" id="deck-id">
-            <input id="deck-name" placeholder="Deck name (e.g. State Capitals)" aria-label="Deck name">
-            <input id="deck-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="deck-groups-datalist">
-            <datalist id="deck-groups-datalist"></datalist>
-            <textarea id="deck-cards" rows="8"
-              placeholder="One card per line: front | back&#10;What is the capital of Ohio? | Columbus"></textarea>
-            <div class="row-actions">
-              <button type="submit">Save deck</button>
-              <button type="button" id="deck-cancel" class="secondary">Clear</button>
-            </div>
-          </form>
-        </details>
-
-        <details id="deck-bulk-details">
-          <summary>Bulk import decks</summary>
-          <div class="admin-card">
-            <p class="hint" style="margin:0 0 0.5rem">Start each deck with <strong># Deck name</strong> on its own line, then cards below as <strong>front | back</strong>. Optional group applies to all imported decks.</p>
-            <input id="deck-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="deck-groups-datalist">
-            <textarea id="deck-bulk-text" rows="12"
-              placeholder="# Chapter 1 Vocab&#10;What is photosynthesis? | The process plants use to make food&#10;What does chlorophyll do? | Absorbs light&#10;&#10;# Chapter 2 Vocab&#10;What is mitosis? | Cell division producing identical cells"></textarea>
-            <div class="row-actions">
-              <button type="button" id="deck-bulk-save">Import all decks</button>
-              <button type="button" id="deck-bulk-clear" class="secondary">Clear</button>
-            </div>
-            <p id="deck-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
+        <div class="panel-cols">
+          <div class="panel-col">
+            <div id="deck-rows"></div>
           </div>
-        </details>
+          <div class="panel-col">
+            <details id="deck-editor-details">
+              <summary id="deck-editor-title">New deck</summary>
+              <form id="deck-form" class="admin-card">
+                <input type="hidden" id="deck-id">
+                <input id="deck-name" placeholder="Deck name (e.g. State Capitals)" aria-label="Deck name">
+                <input id="deck-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="deck-groups-datalist">
+                <datalist id="deck-groups-datalist"></datalist>
+                <textarea id="deck-cards" rows="8"
+                  placeholder="One card per line: front | back&#10;What is the capital of Ohio? | Columbus"></textarea>
+                <div class="row-actions">
+                  <button type="submit">Save deck</button>
+                  <button type="button" id="deck-cancel" class="secondary">Clear</button>
+                </div>
+              </form>
+            </details>
+            <details id="deck-bulk-details">
+              <summary>Bulk import decks</summary>
+              <div class="admin-card">
+                <p class="hint" style="margin:0 0 0.5rem">Start each deck with <strong># Deck name</strong> on its own line, then cards below as <strong>front | back</strong>. Optional group applies to all imported decks.</p>
+                <input id="deck-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="deck-groups-datalist">
+                <textarea id="deck-bulk-text" rows="12"
+                  placeholder="# Chapter 1 Vocab&#10;What is photosynthesis? | The process plants use to make food&#10;What does chlorophyll do? | Absorbs light&#10;&#10;# Chapter 2 Vocab&#10;What is mitosis? | Cell division producing identical cells"></textarea>
+                <div class="row-actions">
+                  <button type="button" id="deck-bulk-save">Import all decks</button>
+                  <button type="button" id="deck-bulk-clear" class="secondary">Clear</button>
+                </div>
+                <p id="deck-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
+              </div>
+            </details>
+          </div>
+        </div>
       </section>
 
       <!-- Settings -->
diff --git a/public/styles.css b/public/styles.css
index 3490b8c..4e190af 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -333,11 +333,20 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
 }
 .admin-logo { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; }
 .admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
-.admin-main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
+.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
 .admin-main h1 { margin-bottom: 1rem; clear: both; }
 .admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
 .panel { text-align: left; }
 
+/* 2-column layout for wide screens */
+.panel-cols { display: flex; flex-direction: column; gap: 1.5rem; }
+.panel-col { min-width: 0; }
+@media (min-width: 1100px) {
+  .panel-cols { flex-direction: row; align-items: start; gap: 2.5rem; }
+  .panel-col { flex: 1; }
+  .panel-col:first-child { flex: 1.2; }
+}
+
 .admin-card {
   background: var(--card); border-radius: 14px; padding: 1.25rem;
   margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06);