nogger

public/market.html

@@ -74,12 +74,13 @@
         <div class="modal-header">
             <div>
                 <p class="eyebrow">Persona preview</p>
-                <h3 id="marketPreviewName">Persona details</h3>
+                <h3 id="marketPreviewTitle">Persona details</h3>
+                <h4 id="marketPreviewName" class="market-preview-name">Persona details</h4>
                 <p id="marketPreviewIntro" class="subtitle">Review this persona and choose how you want to use it.</p>
             </div>
             <button id="marketPreviewClose" type="button" class="icon-button">Close</button>
         </div>
-        <div class="market-preview-body">
+        <div id="marketPreviewBody" class="market-preview-body">
             <p id="marketPreviewMeta" class="persona-guidance"></p>
             <div class="market-preview-details">
                 <div>
@@ -118,10 +119,11 @@
                 </label>
                 <p class="subtitle">Leave this empty if you want the AI Character to invent the scenario on its own.</p>
             </div>
-            <button id="marketPreviewBack" type="button" class="secondary-action hidden">Back</button>
+            <div class="market-preview-footer">
                 <button id="marketPreviewConfirm" type="button" class="primary-action">Take persona</button>
             </div>
         </div>
+    </div>
 </div>
 
 <div id="marketPersonaModal" class="modal-overlay hidden">

public/market.js

@@ -9,8 +9,10 @@ const marketPanels = document.querySelectorAll("[data-market-panel]");
 const marketCreateAiCharacterBtn = $("marketCreateAiCharacter");
 const marketCreateUserPersonaBtn = $("marketCreateUserPersona");
 const marketPreviewModal = $("marketPreviewModal");
+const marketPreviewTitle = $("marketPreviewTitle");
 const marketPreviewName = $("marketPreviewName");
 const marketPreviewMeta = $("marketPreviewMeta");
+const marketPreviewBody = $("marketPreviewBody");
 const marketPreviewPronouns = $("marketPreviewPronouns");
 const marketPreviewAppearance = $("marketPreviewAppearance");
 const marketPreviewBackground = $("marketPreviewBackground");
@@ -23,7 +25,6 @@ const marketPreviewScenarioField = $("marketPreviewScenarioField");
 const marketPreviewScenario = $("marketPreviewScenario");
 const marketPreviewStepOne = $("marketPreviewStepOne");
 const marketPreviewStepTwo = $("marketPreviewStepTwo");
-const marketPreviewBack = $("marketPreviewBack");
 const marketPreviewConfirm = $("marketPreviewConfirm");
 const marketPreviewClose = $("marketPreviewClose");
 const marketPersonaModal = $("marketPersonaModal");
@@ -191,9 +192,13 @@ function closeMarketPreview() {
 
 function renderMarketPreviewStep() {
     const isScenarioStep = marketPreviewStep === 2;
+    const isAssistant = pendingMarketPersona?.persona_type === "assistant";
+    if (marketPreviewBody) marketPreviewBody.classList.toggle("hidden", isScenarioStep && isAssistant);
     if (marketPreviewStepOne) marketPreviewStepOne.classList.toggle("hidden", isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
     if (marketPreviewStepTwo) marketPreviewStepTwo.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
-    if (marketPreviewBack) marketPreviewBack.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
+    if (marketPreviewTitle) {
+        marketPreviewTitle.textContent = isAssistant && isScenarioStep ? "Set the opening scene" : "Persona details";
+    }
     if (marketPreviewIntro) {
         marketPreviewIntro.textContent = pendingMarketPersona?.persona_type === "assistant"
             ? (isScenarioStep
@@ -202,11 +207,7 @@ function renderMarketPreviewStep() {
             : "Review this persona and choose how you want to use it.";
     }
     if (marketPreviewConfirm) {
-        if (pendingMarketPersona?.persona_type !== "assistant") {
-            marketPreviewConfirm.textContent = "Collect persona";
-        } else {
-            marketPreviewConfirm.textContent = isScenarioStep ? "Start roleplay" : "Continue";
-        }
+        marketPreviewConfirm.textContent = pendingMarketPersona?.persona_type !== "assistant" ? "Collect persona" : "Start roleplay";
     }
 }
 
@@ -508,13 +509,6 @@ marketPreviewConfirm.addEventListener("click", async () => {
     closeMarketPreview();
     await collectMarketPersona(marketId);
 });
-if (marketPreviewBack) {
-    marketPreviewBack.addEventListener("click", () => {
-        marketPreviewStep = 1;
-        renderMarketPreviewStep();
-        marketPreviewUserPersonaSelect.focus();
-    });
-}
 marketPersonaClose.addEventListener("click", closePersonaForm);
 marketPersonaModal.addEventListener("click", (event) => {
     if (event.target === marketPersonaModal) closePersonaForm();

public/style.css

@@ -420,8 +420,13 @@ button,
 }
 
 button {
-    padding: 12px 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    padding: 11px 16px;
     font-weight: 700;
+    line-height: 1.2;
     color: var(--button-text);
     background: linear-gradient(145deg, var(--brand), var(--brand-strong));
     box-shadow: none;
@@ -712,10 +717,7 @@ select:focus {
 }
 
 .secondary-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 11px 14px;
+    padding: 11px 16px;
     min-height: 44px;
     background: rgba(164, 85, 45, 0.1);
     color: var(--text);
@@ -1597,10 +1599,6 @@ select:focus {
 .persona-item-actions,
 .persona-section-actions,
 .market-header-actions,
-.market-preview-actions {
-    flex-wrap: wrap;
-}
-
 .market-preview-user-field {
     width: 100%;
 }
@@ -1609,8 +1607,38 @@ select:focus {
     width: 100%;
 }
 
+.market-preview-actions {
+    display: grid;
+    gap: 16px;
+    align-items: stretch;
+}
+
+.market-preview-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.market-preview-footer button,
+.market-preview-footer .secondary-action {
+    flex: 1 1 160px;
+    min-width: 0;
+}
+
+.market-preview-name {
+    margin-top: 6px;
+}
+
+.market-preview-user-field select,
+.market-preview-scenario-field textarea {
+    width: 100%;
+}
+
 .persona-item-actions button {
-    padding: 8px 11px;
+    flex: 1 1 0;
+    min-width: 0;
+    padding: 10px 12px;
     font-size: 0.84rem;
 }
 
@@ -1682,7 +1710,8 @@ select:focus {
 
 .popup-actions .secondary-action,
 .popup-actions button {
-    min-width: 132px;
+    flex: 1 1 140px;
+    min-width: 0;
 }
 
 .persona-modal-heading {