Update index.html

index.html

@@ -116,6 +116,14 @@
       grid-template-columns: 340px 1fr;
       gap: 32px;
       align-items: start;
+      /* Prevent children from blowing out the grid */
+      width: 100%;
+    }
+
+    /* Critical: grid children must not exceed their track */
+    .layout > * {
+      min-width: 0;
+      width: 100%;
     }
 
     @media (max-width: 768px) {
@@ -302,6 +310,9 @@
     /* OUTPUT AREA */
     .output-area {
       min-height: 500px;
+      min-width: 0;
+      width: 100%;
+      overflow: hidden;
     }
 
     .output-header {
@@ -422,6 +433,8 @@
       border: 1px solid var(--border);
       border-radius: 12px;
       overflow: hidden;
+      min-width: 0;
+      width: 100%;
     }
 
     .level-card-header {
@@ -430,6 +443,7 @@
       display: flex;
       align-items: center;
       gap: 12px;
+      min-width: 0;
     }
 
     .level-dot {
@@ -447,6 +461,11 @@
       font-size: 15px;
       font-weight: 700;
       color: var(--heading);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
     }
 
     .level-card-subtitle {
@@ -454,10 +473,14 @@
       font-size: 11px;
       color: var(--muted);
       margin-left: auto;
+      white-space: nowrap;
+      flex-shrink: 0;
     }
 
     .level-card-body {
       padding: 24px;
+      min-width: 0;
+      overflow: hidden;
     }
 
     /* CONTENT SECTIONS */
@@ -490,6 +513,8 @@
       font-size: 14px;
       line-height: 1.75;
       color: var(--text);
+      overflow-wrap: break-word;
+      word-break: break-word;
     }
 
     .section ul {
@@ -519,6 +544,11 @@
       line-height: 1.65;
       color: #c9d1d9;
       position: relative;
+      max-width: 100%;
+      width: 100%;
+      box-sizing: border-box;
+      word-break: normal;
+      white-space: pre;
     }
 
     .code-block-header {
@@ -571,6 +601,10 @@
       display: flex;
       align-items: center;
       gap: 14px;
+      min-width: 0;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
     }
 
     .system-banner-icon {
@@ -633,7 +667,16 @@
 
     @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
 
-    /* RAW VIEW */
+    #structuredOutput {
+      min-width: 0;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .level-panel {
+      min-width: 0;
+      width: 100%;
+    }
     .raw-view {
       display: none;
       background: #060810;
@@ -646,8 +689,12 @@
       color: #c9d1d9;
       white-space: pre-wrap;
       word-break: break-word;
+      overflow-wrap: break-word;
       max-height: 600px;
       overflow-y: auto;
+      overflow-x: hidden;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .raw-view.visible { display: block; }
@@ -744,6 +791,9 @@
             <span class="btn-text"></span>
           </div>
         </button>
+        <div style="text-align:center;margin-top:12px">
+          <button class="btn-sm" style="width:100%;justify-content:center;display:flex" onclick="copyPromptSidebar(this)">⎘ Copy Prompt Only</button>
+        </div>
       </div>
     </aside>
 
@@ -752,8 +802,9 @@
       <div class="output-header">
         <div class="output-title">Generated Prompt</div>
         <div class="output-actions" id="outputActions" style="display:none">
+          <button class="btn-sm" onclick="copyPrompt(this)">⎘ Copy Prompt</button>
           <button class="btn-sm" onclick="toggleRaw()">⊞ Raw</button>
-          <button class="btn-sm" onclick="copyAll()">⎘ Copy All</button>
+          <button class="btn-sm" onclick="copyAll()">⎘ Copy Output</button>
         </div>
       </div>
 
@@ -855,12 +906,30 @@ function toggleRaw() {
   document.querySelector('[onclick="toggleRaw()"]').textContent = showingRaw ? '⊞ Structured' : '⊞ Raw';
 }
 
+async function copyPrompt(btn) {
+  const systemName = document.getElementById('systemName').value.trim();
+  const desc = document.getElementById('systemDesc').value.trim();
+  if (!systemName) {
+    alert('Enter a system name first.');
+    return;
+  }
+  const prompt = buildPrompt(systemName, desc);
+  try {
+    await navigator.clipboard.writeText(prompt);
+    const label = btn.textContent;
+    btn.textContent = '✓ Copied!';
+    setTimeout(() => btn.textContent = label, 2000);
+  } catch (e) {}
+}
+
+function copyPromptSidebar(btn) { copyPrompt(btn); }
+
 async function copyAll() {
   try {
     await navigator.clipboard.writeText(rawText);
     const btn = document.querySelector('[onclick="copyAll()"]');
     btn.textContent = '✓ Copied!';
-    setTimeout(() => btn.textContent = '⎘ Copy All', 2000);
+    setTimeout(() => btn.textContent = '⎘ Copy Output', 2000);
   } catch (e) {}
 }