From 9375332f6a276f3cfeab79de5e5cdefbd239a44c Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Mon, 19 Oct 2026 14:29:01 -0400
Subject: [PATCH] Fix New Document button and make editor full-screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace prompt() with inline title form (button → input → Create/Cancel)
- Editor view: position:fixed inset:0 z-index:200 so it covers full screen
- Docs editor toolbar moved into CSS (was duplicated in styles)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/app.js     | 22 ++++++++++++++++++----
 public/index.html |  5 +++++
 public/styles.css | 37 ++++++++++++++++++++++++++++++++-----
 3 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/public/app.js b/public/app.js
index e1731ce..e8d9511 100644
--- a/public/app.js
+++ b/public/app.js
@@ -2603,11 +2603,25 @@ async function openDocEditor(id, key, title) {
   }
 }
 
-$('#btn-new-doc').addEventListener('click', async () => {
-  const title = prompt('Document title:', 'Untitled Document');
-  if (!title) return;
+$('#btn-new-doc').addEventListener('click', () => {
+  $('#btn-new-doc').hidden = true;
+  $('#docs-new-form').hidden = false;
+  $('#docs-new-title').value = '';
+  $('#docs-new-title').focus();
+});
+
+$('#btn-docs-new-cancel').addEventListener('click', () => {
+  $('#docs-new-form').hidden = true;
+  $('#btn-new-doc').hidden = false;
+});
+
+$('#docs-new-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const title = $('#docs-new-title').value.trim() || 'Untitled Document';
+  $('#docs-new-form').hidden = true;
+  $('#btn-new-doc').hidden = false;
   const { id, key } = await api('/api/docs', { method: 'POST', body: { studentId: currentStudent.id, title } });
-  loadDocs();
+  await loadDocs();
   openDocEditor(id, key, title);
 });
 
diff --git a/public/index.html b/public/index.html
index b0f9208..9d7aa14 100644
--- a/public/index.html
+++ b/public/index.html
@@ -133,6 +133,11 @@
         <div class="docs-toolbar">
           <button id="btn-new-doc" class="docs-new-btn">+ New Document</button>
         </div>
+        <form id="docs-new-form" class="docs-new-form" hidden>
+          <input id="docs-new-title" class="docs-new-input" type="text" placeholder="Document title…" maxlength="120" autocomplete="off">
+          <button type="submit" class="docs-new-btn">Create</button>
+          <button type="button" id="btn-docs-new-cancel" class="docs-cancel-btn">Cancel</button>
+        </form>
         <div id="docs-list"></div>
         <p id="docs-empty" class="hint" hidden>No documents yet — tap + New Document to start writing!</p>
       </div>
diff --git a/public/styles.css b/public/styles.css
index e8ae83d..1bc55a6 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -2208,11 +2208,38 @@ body.bg-bubbles {
 .docs-submit-btn:hover { opacity: .85; }
 .docs-submit-btn:disabled { background: var(--muted); opacity: .6; cursor: default; }
 
-#docs-editor-view { display: flex; flex-direction: column; height: calc(100vh - 11rem); }
-#docs-editor-frame { flex: 1; }
-#docs-editor-frame iframe { width: 100%; height: 100%; border: none; }
+#docs-editor-view {
+  position: fixed; inset: 0; z-index: 200;
+  display: flex; flex-direction: column;
+  background: var(--bg);
+}
+#docs-editor-frame { flex: 1; min-height: 0; }
+#docs-editor-frame iframe { width: 100%; height: 100%; border: none; display: block; }
+
+.docs-editor-toolbar {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .6rem 1rem;
+  background: var(--card); border-bottom: 1.5px solid var(--border);
+  flex-shrink: 0;
+}
+
+.docs-new-form {
+  display: flex; gap: .5rem; align-items: center;
+  margin-bottom: .75rem; flex-wrap: wrap;
+}
+.docs-new-input {
+  flex: 1; min-width: 160px;
+  border: 1.5px solid var(--border); border-radius: 10px;
+  padding: .55rem .85rem; font-size: .95rem; font-family: inherit;
+  background: var(--card); color: var(--ink);
+  outline: none;
+}
+.docs-new-input:focus { border-color: var(--accent); }
+.docs-cancel-btn {
+  background: none; border: 1.5px solid var(--border); color: var(--muted);
+  border-radius: 10px; padding: .55rem .85rem; font-size: .9rem; font-weight: 600;
+  cursor: pointer; font-family: inherit;
+}
 
 .docs-error { padding: 1.5rem; color: var(--muted); font-size: .9rem; }
 .docs-error code { background: var(--surface); padding: .1rem .4rem; border-radius: 4px; }
-
-#tab-docs .tab-panel { padding: 1.25rem; }