Merge pull request #38 from mwisnowski/fix/wizard-enhancements

fix: Quick Build UI now uses full-width layout on desktop

CHANGELOG.md

@@ -9,7 +9,7 @@ This format follows Keep a Changelog principles and aims for Semantic Versioning
 
 ## [Unreleased]
 ### Summary
-_No unreleased changes yet._
+Minor UI fixes for Quick Build progress and completion display.
 
 ### Added
 _No unreleased additions yet._
@@ -18,7 +18,8 @@ _No unreleased additions yet._
 _No unreleased changes yet._
 
 ### Fixed
-_No unreleased fixes yet._
+- Quick Build progress display now uses full desktop width instead of narrow mobile-like layout
+- Quick Build completion screen properly transitions to full-width Step 5 layout matching manual build experience_
 
 ## [2.7.0] - 2025-10-14
 ### Summary

RELEASE_NOTES_TEMPLATE.md

@@ -1,7 +1,7 @@
 # MTG Python Deckbuilder ${VERSION}
 
 ### Summary
-_No unreleased changes yet._
+Minor UI fixes for Quick Build progress and completion display.
 
 ### Added
 _No unreleased additions yet._
@@ -10,4 +10,5 @@ _No unreleased additions yet._
 _No unreleased changes yet._
 
 ### Fixed
-_No unreleased fixes yet._
+- Quick Build progress display now uses full desktop width instead of narrow mobile-like layout
+- Quick Build completion screen properly transitions to full-width Step 5 layout matching manual build experience_

code/web/routes/build.py

@@ -3760,19 +3760,16 @@ def quick_build_progress(request: Request):
     logger.info(f"[Progress Poll] sid={sid}, progress={progress is not None}, running={progress.get('running') if progress else None}")
     
     if not progress or not progress.get("running"):
-        # Build complete - return Step 5 content + remove the polling div
+        # Build complete - return Step 5 content that replaces the entire wizard container
         res = sess.get("last_result")
         if res and res.get("done"):
             ctx = step5_ctx_from_result(request, sess, res)
-            # Render Step 5, then add script to remove polling div
+            # Return Step 5 which will replace the whole wizard div
-            step5_html = templates.get_template("build/_step5.html").render(ctx)
+            response = templates.TemplateResponse("build/_step5.html", ctx)
-            # Return Step 5 content + a script that removes the poller and replaces #wizard
-            final_html = f'''
-            {step5_html}
-            <div id="quick-build-poller" hx-swap-oob="outerHTML"></div>
-            '''
-            response = HTMLResponse(final_html)
             response.set_cookie("sid", sid, httponly=True, samesite="lax")
+            # Tell HTMX to target #wizard and swap outerHTML to replace the container
+            response.headers["HX-Retarget"] = "#wizard"
+            response.headers["HX-Reswap"] = "outerHTML"
             return response
         # Fallback if no result yet
         return HTMLResponse('Build complete. Please refresh.')

code/web/templates/build/_quick_build_progress.html

@@ -1,6 +1,6 @@
 {# Quick Build Progress Indicator - Current Stage + Completed List #}
 
-<div id="wizard" class="wizard-container" style="max-width:800px; margin:2rem auto; padding:1rem;">
+<div id="wizard" class="wizard-container" style="max-width:1200px; margin:2rem auto; padding:2rem;">
   <div id="wizard-content">
     {% include "build/_quick_build_progress_content.html" %}
   </div>

code/web/templates/build/_quick_build_progress_content.html

@@ -1,15 +1,15 @@
 {# Quick Build Progress Content (inner content only, for HTMX updates) #}
-<div class="wizard-header" style="text-align:center; margin-bottom:3rem;">
+<div class="wizard-header" style="text-align:center; margin-bottom:4rem;">
-  <h2 style="margin:0 0 .5rem 0;">Automatic Build in Progress</h2>
+  <h2 style="margin:0 0 1rem 0; font-size:32px;">Automatic Build in Progress</h2>
-  <p class="muted" style="margin:0;">Building your deck automatically without approval steps...</p>
+  <p class="muted" style="margin:0; font-size:16px;">Building your deck automatically without approval steps...</p>
 </div>
 
 {# Simplified Phase Indicator #}
-<div style="text-align:center; margin:4rem 0; padding:2rem; background:rgba(59,130,246,0.1); border:2px solid rgba(59,130,246,0.3); border-radius:8px;">
+<div style="text-align:center; margin:6rem auto; max-width:700px; padding:3rem 2rem; background:rgba(59,130,246,0.1); border:2px solid rgba(59,130,246,0.3); border-radius:12px;">
-  <div style="font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:#94a3b8; margin-bottom:0.75rem;">Current Phase</div>
+  <div style="font-size:14px; text-transform:uppercase; letter-spacing:0.05em; color:#94a3b8; margin-bottom:1rem;">Current Phase</div>
-  <div style="font-size:24px; font-weight:600; color:#3b82f6;">{{ current_stage }}</div>
+  <div style="font-size:32px; font-weight:600; color:#3b82f6; line-height:1.3;">{{ current_stage }}</div>
 </div>
 
-<div class="muted" style="text-align:center; font-size:12px; margin-top:2rem;">
+<div class="muted" style="text-align:center; font-size:14px; margin-top:3rem;">
   <p style="margin:0;">This may take 10-30 seconds depending on deck complexity...</p>
 </div>