From 9873f9b44fedf76edfa71e11fa5be2f39e2d7d78 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sun, 14 Jun 2026 09:03:58 +0900
Subject: [PATCH] Cookbook diagnosis: fold message + suggestion into the
 toolbar row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was rendering as a separate body block below the Copy/× toolbar.
Now the diagnosis message and the suggested-action text sit inline
on the left of the toolbar, with Copy and × pinned to the right —
reads as one self-contained header strip instead of stacked rows.
---
 static/js/cookbook-diagnosis.js | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/static/js/cookbook-diagnosis.js b/static/js/cookbook-diagnosis.js
index 24d5770e7..a28c0f43c 100644
--- a/static/js/cookbook-diagnosis.js
+++ b/static/js/cookbook-diagnosis.js
@@ -617,7 +617,24 @@ export function _showDiagnosis(panel, diagnosis, sourceText) {
   // the full error+context for a forum/discord paste.
   const toolbar = document.createElement('div');
   toolbar.className = 'cookbook-diag-toolbar';
-  toolbar.style.cssText = 'display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-bottom:-2px;';
+  // Left side carries the diagnosis text (message + suggestion); buttons
+  // stay on the right. Was a separate body row below the toolbar, but
+  // the message reads more like "this is what the toolbar is for" when
+  // it sits inline with Copy / × Dismiss.
+  toolbar.style.cssText = 'display:flex;align-items:flex-start;gap:8px;margin-bottom:-2px;';
+
+  const textWrap = document.createElement('div');
+  textWrap.style.cssText = 'flex:1;min-width:0;font-size:11px;line-height:1.35;';
+  const msg = document.createElement('div');
+  msg.className = 'cookbook-diag-message';
+  msg.textContent = diagnosis.message;
+  textWrap.appendChild(msg);
+  const suggestion = document.createElement('div');
+  suggestion.className = 'cookbook-diag-suggestion';
+  suggestion.textContent = suggestionText;
+  suggestion.style.cssText = 'opacity:0.75;margin-top:1px;';
+  textWrap.appendChild(suggestion);
+  toolbar.appendChild(textWrap);
 
   const copyBtn = document.createElement('button');
   copyBtn.type = 'button';
@@ -651,18 +668,6 @@ export function _showDiagnosis(panel, diagnosis, sourceText) {
   toolbar.appendChild(dismissBtn);
   diag.appendChild(toolbar);
 
-  const body = document.createElement('div');
-  body.className = 'cookbook-diag-body';
-  const msg = document.createElement('div');
-  msg.className = 'cookbook-diag-message';
-  msg.textContent = diagnosis.message;
-  body.appendChild(msg);
-  const suggestion = document.createElement('div');
-  suggestion.className = 'cookbook-diag-suggestion';
-  suggestion.textContent = suggestionText;
-  body.appendChild(suggestion);
-  diag.appendChild(body);
-
   const runFix = async (fix, button, busyLabel = fix.label, onStart = null, onDone = null) => {
     if (!fix || !button || button.dataset.busy) return;
     button.dataset.busy = '1';