From 114bc4e7cd5354e7ed858226c2247b667feeeda4 Mon Sep 17 00:00:00 2001
From: Daniel Onyejesi <danielonyejesi@gmail.com>
Date: Tue, 24 Mar 2026 11:52:02 -0400
Subject: [PATCH] Fix CMS button clickability, replace AI topic input with
 context box

- Add type="button" to all CMS action buttons to prevent default submit
- Change overflow:hidden to overflow:visible on .cms-main to prevent clipping
- Add z-index to .cms-editor-actions for reliable click targeting
- Replace AI "Topic" text input with a descriptive textarea context box
  so users can tell AI what to generate (AI creates its own title)
- Rename AI tab from "By Topic" to "Describe Content"
---
 public/components/cms.html | 36 ++++++++++++++++++------------------
 public/css/styles.css      |  4 ++--
 public/js/learningHub.js   |  2 +-
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/public/components/cms.html b/public/components/cms.html
index be4a985..61bc256 100644
--- a/public/components/cms.html
+++ b/public/components/cms.html
@@ -46,10 +46,10 @@
             <div id="cms-list-view">
               <div class="cms-toolbar">
                 <div style="display:flex;gap:8px;">
-                  <button id="btn-lh-new-content" class="btn-sm btn-primary" data-type="article"><i class="fas fa-file-alt"></i> New Article</button>
-                  <button id="btn-lh-new-quiz" class="btn-sm" style="background:var(--amber-light);color:#92400e;border:1px solid var(--amber);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-clipboard-question"></i> New Quiz</button>
-                  <button id="btn-lh-new-pearl" class="btn-sm" style="background:var(--purple-light);color:var(--purple);border:1px solid var(--purple);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-gem"></i> New Pearl</button>
-                  <button id="btn-lh-new-presentation" class="btn-sm" style="background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7;border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-presentation-screen"></i> New Presentation</button>
+                  <button type="button" id="btn-lh-new-content" class="btn-sm btn-primary" data-type="article"><i class="fas fa-file-alt"></i> New Article</button>
+                  <button type="button" id="btn-lh-new-quiz" class="btn-sm" style="background:var(--amber-light);color:#92400e;border:1px solid var(--amber);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-clipboard-question"></i> New Quiz</button>
+                  <button type="button" id="btn-lh-new-pearl" class="btn-sm" style="background:var(--purple-light);color:var(--purple);border:1px solid var(--purple);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-gem"></i> New Pearl</button>
+                  <button type="button" id="btn-lh-new-presentation" class="btn-sm" style="background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7;border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-presentation-screen"></i> New Presentation</button>
                 </div>
                 <div class="cms-search">
                   <i class="fas fa-search"></i>
@@ -75,15 +75,15 @@
             <!-- Editor view (hidden until edit/new) -->
             <div id="lh-cms-editor" class="cms-editor hidden">
               <div class="cms-editor-header">
-                <button id="btn-lh-close-editor" class="btn-sm btn-ghost"><i class="fas fa-arrow-left"></i> Back to List</button>
+                <button type="button" id="btn-lh-close-editor" class="btn-sm btn-ghost"><i class="fas fa-arrow-left"></i> Back to List</button>
                 <div class="cms-editor-actions">
-                  <button id="btn-lh-ai-open" class="btn-sm" style="background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;border:none;"><i class="fas fa-wand-magic-sparkles"></i> AI Generate</button>
-                  <button id="btn-lh-delete-content" class="btn-sm hidden" style="background:var(--red-light);color:var(--red);"><i class="fas fa-trash"></i> Delete</button>
+                  <button type="button" id="btn-lh-ai-open" class="btn-sm" style="background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;border:none;"><i class="fas fa-wand-magic-sparkles"></i> AI Generate</button>
+                  <button type="button" id="btn-lh-delete-content" class="btn-sm hidden" style="background:var(--red-light);color:var(--red);"><i class="fas fa-trash"></i> Delete</button>
                   <select id="lh-cms-edit-published" class="cms-input-sm">
                     <option value="false">Draft</option>
                     <option value="true">Published</option>
                   </select>
-                  <button id="btn-lh-save-content" class="btn-sm btn-primary"><i class="fas fa-save"></i> Save</button>
+                  <button type="button" id="btn-lh-save-content" class="btn-sm btn-primary"><i class="fas fa-save"></i> Save</button>
                 </div>
               </div>
               <!-- Inline delete confirmation bar — message built dynamically in JS -->
@@ -91,8 +91,8 @@
                 <i class="fas fa-triangle-exclamation"></i>
                 <span id="lh-delete-confirm-msg"></span>
                 <div style="display:flex;gap:8px;margin-left:auto;flex-shrink:0;">
-                  <button id="btn-lh-delete-cancel" class="btn-sm btn-ghost">Cancel</button>
-                  <button id="btn-lh-delete-yes" class="btn-sm" style="background:var(--red);color:white;">Yes, Delete</button>
+                  <button type="button" id="btn-lh-delete-cancel" class="btn-sm btn-ghost">Cancel</button>
+                  <button type="button" id="btn-lh-delete-yes" class="btn-sm" style="background:var(--red);color:white;">Yes, Delete</button>
                 </div>
               </div>
 
@@ -136,7 +136,7 @@
 
                 <!-- Source tabs -->
                 <div class="lh-ai-tabs">
-                  <button class="lh-ai-tab active" data-aitab="topic"><i class="fas fa-lightbulb"></i> By Topic</button>
+                  <button class="lh-ai-tab active" data-aitab="topic"><i class="fas fa-lightbulb"></i> Describe Content</button>
                   <button class="lh-ai-tab" data-aitab="upload"><i class="fas fa-file-upload"></i> Upload File</button>
                   <button class="lh-ai-tab" data-aitab="webdav" id="lh-ai-tab-webdav"><i class="fas fa-cloud"></i> Nextcloud</button>
                 </div>
@@ -144,8 +144,8 @@
                 <!-- Topic tab -->
                 <div class="lh-ai-tabpanel" id="lh-ai-tp-topic">
                   <div class="form-group" style="margin:0;">
-                    <label style="font-size:12px;font-weight:600;color:var(--g600);">Topic</label>
-                    <input type="text" id="lh-ai-topic" class="cms-input-sm" style="width:100%;" placeholder="e.g., Febrile seizures in children, ADHD management, Asthma exacerbation">
+                    <label style="font-size:12px;font-weight:600;color:var(--g600);">Tell AI what to create</label>
+                    <textarea id="lh-ai-topic" class="cms-input-sm" style="width:100%;min-height:72px;resize:vertical;font-family:inherit;line-height:1.5;" placeholder="Describe the content you want AI to generate, e.g.:&#10;&#10;Write an article on febrile seizures in children covering causes, evaluation, and management.&#10;&#10;Create a clinical pearl on neonatal jaundice with key decision points.&#10;&#10;Build a quiz on pediatric asthma classification and treatment ladder."></textarea>
                   </div>
                 </div>
 
@@ -246,10 +246,10 @@
                 </div>
 
                 <div style="display:flex;gap:8px;align-items:center;">
-                  <button id="btn-lh-ai-generate" class="btn-sm btn-primary" style="flex:1;padding:10px;">
+                  <button type="button" id="btn-lh-ai-generate" class="btn-sm btn-primary" style="flex:1;padding:10px;">
                     <i class="fas fa-wand-magic-sparkles"></i> Generate Content
                   </button>
-                  <button id="btn-lh-ai-refine-body" class="btn-sm btn-ghost" style="padding:10px;">
+                  <button type="button" id="btn-lh-ai-refine-body" class="btn-sm btn-ghost" style="padding:10px;">
                     <i class="fas fa-pen-to-square"></i> Refine Body
                   </button>
                 </div>
@@ -272,8 +272,8 @@
                 <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                   <label class="cms-label" style="margin:0;">Slides <span style="font-size:11px;color:var(--g400);font-weight:400;">(Marp markdown — separate slides with <code>---</code>)</span></label>
                   <div style="display:flex;gap:6px;">
-                    <button id="btn-lh-preview-slides" class="btn-sm btn-ghost" style="font-size:12px;"><i class="fas fa-eye"></i> Preview</button>
-                    <button id="btn-lh-download-pptx" class="btn-sm" style="background:#065f46;color:white;font-size:12px;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;"><i class="fas fa-file-powerpoint"></i> Download PPTX</button>
+                    <button type="button" id="btn-lh-preview-slides" class="btn-sm btn-ghost" style="font-size:12px;"><i class="fas fa-eye"></i> Preview</button>
+                    <button type="button" id="btn-lh-download-pptx" class="btn-sm" style="background:#065f46;color:white;font-size:12px;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;"><i class="fas fa-file-powerpoint"></i> Download PPTX</button>
                   </div>
                 </div>
                 <textarea id="lh-marp-editor" class="lh-marp-textarea" placeholder="✨ Click 'AI Generate' above to create your slides automatically.
@@ -294,7 +294,7 @@ Subtitle here
               <div class="cms-quiz-section">
                 <div class="cms-quiz-header">
                   <h3><i class="fas fa-clipboard-question"></i> Quiz Questions</h3>
-                  <button id="btn-lh-add-question" class="btn-sm btn-ghost"><i class="fas fa-plus"></i> Add Question</button>
+                  <button type="button" id="btn-lh-add-question" class="btn-sm btn-ghost"><i class="fas fa-plus"></i> Add Question</button>
                 </div>
                 <div id="lh-cms-questions" class="cms-questions-list"></div>
               </div>
diff --git a/public/css/styles.css b/public/css/styles.css
index fe30256..6ba8b9f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -577,7 +577,7 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 .cms-sidebar{display:flex;flex-direction:column;gap:12px;}
 .cms-sidebar-section{background:white;border:1px solid var(--g200);border-radius:10px;padding:14px;}
 .cms-sidebar-section h4{margin:0 0 10px;font-size:13px;color:var(--g600);display:flex;align-items:center;gap:6px;}
-.cms-main{background:white;border:1px solid var(--g200);border-radius:10px;overflow:hidden;}
+.cms-main{background:white;border:1px solid var(--g200);border-radius:10px;overflow:visible;}
 
 /* Category list in sidebar */
 .cms-cat-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
@@ -616,7 +616,7 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 /* Editor */
 .cms-editor{padding:16px 20px;}
 .cms-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
-.cms-editor-actions{display:flex;gap:8px;align-items:center;}
+.cms-editor-actions{display:flex;gap:8px;align-items:center;position:relative;z-index:2;}
 .cms-title-input{width:100%;font-size:22px;font-weight:600;padding:10px 0;border:none;border-bottom:2px solid var(--g200);outline:none;font-family:inherit;color:var(--g800);margin-bottom:12px;}
 .cms-title-input:focus{border-bottom-color:var(--blue);}
 .cms-meta-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
diff --git a/public/js/learningHub.js b/public/js/learningHub.js
index 15e7f78..6fd9e05 100644
--- a/public/js/learningHub.js
+++ b/public/js/learningHub.js
@@ -795,7 +795,7 @@
 
     if (tabName === 'topic') {
       var topic = document.getElementById('lh-ai-topic') ? document.getElementById('lh-ai-topic').value.trim() : '';
-      if (!topic) { showToast('Enter a topic', 'error'); return; }
+      if (!topic) { showToast('Describe what you want AI to create', 'error'); return; }
       formData.append('topic', topic);
     } else if (tabName === 'upload') {
       var fileInput = document.getElementById('lh-ai-file');