Fix character sheets layout nesting

CHANGELOG.md

@@ -9,6 +9,11 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 
 ---
 
+## [1.14.22] — 2026-07-09
+
+### Fixed
+- **The Character Sheets live layout no longer nests the side panel under the left column** — the output box and character roster are back in separate columns, and the output box keeps its visible resize handle when collapsed.
+
 ## [1.14.21] — 2026-07-09
 
 ### Added
@@ -1657,7 +1662,8 @@ Initial feature-complete release.
 
 ---
 
-[Unreleased]: https://github.com/mARTin-B78/tts-voice-creator-clone-and-design-2/compare/v1.14.21...HEAD
+[Unreleased]: https://github.com/mARTin-B78/tts-voice-creator-clone-and-design-2/compare/v1.14.22...HEAD
+[1.14.22]: https://github.com/mARTin-B78/tts-voice-creator-clone-and-design-2/compare/v1.14.21...v1.14.22
 [1.14.21]: https://github.com/mARTin-B78/tts-voice-creator-clone-and-design-2/compare/v1.14.20...v1.14.21
 [1.14.20]: https://github.com/mARTin-B78/tts-voice-creator-clone-and-design-2/compare/v1.14.19...v1.14.20
 [1.14.19]: https://github.com/mARTin-B78/tts-voice-creator-clone-and-design-2/compare/v1.14.18...v1.14.19

VERSION

@@ -1 +1 @@
-1.14.21
+1.14.22

static/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#2563EB">
-  <meta name="app-version" content="1.14.21">
+  <meta name="app-version" content="1.14.22">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icon.svg">
@@ -27,7 +27,7 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.14.21">
+  <link rel="stylesheet" href="/static/style.css?v=1.14.22">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@@ -365,7 +365,7 @@ window.toggleNavTree = function(treeId, chevronId) {
 </script>
 
 <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
-<script src="/static/loader.js?v=1.14.21"></script>
+<script src="/static/loader.js?v=1.14.22"></script>
 
 </body>
 </html>

static/js/character-sheets.js

@@ -596,26 +596,27 @@ function csProgress(total, hostEl = null) {
           <div class="cs-progress-preview" id="cs-progress-preview">
             <div class="cs-progress-preview-empty">Select a character to preview the sheet as it fills.</div>
           </div>
-      <div class="cs-progress-output" id="cs-progress-output">
+          <div class="cs-progress-output" id="cs-progress-output">
-        <div class="cs-progress-output-head">
+            <div class="cs-progress-output-head">
-          <span class="cs-progress-output-title"><span class="mdi mdi-text-long"></span> Passage / Live output <span class="cs-progress-live-status" id="cs-progress-live-status">watching…</span></span>
+              <span class="cs-progress-output-title"><span class="mdi mdi-text-long"></span> Passage / Live output <span class="cs-progress-live-status" id="cs-progress-live-status">watching…</span></span>
-          <button class="ab-cv-side-collapse" id="cs-progress-output-collapse" type="button" title="Collapse passage and live output"><span class="mdi mdi-chevron-down"></span></button>
+              <button class="ab-cv-side-collapse" id="cs-progress-output-collapse" type="button" title="Collapse passage and live output"><span class="mdi mdi-chevron-down"></span></button>
-        </div>
-        <div class="cs-progress-mini" id="cs-progress-mini" aria-hidden="true"><span></span></div>
-        <div class="cs-progress-body">
-          <div class="cs-progress-main">
-            <div class="cs-progress-col">
-              <div class="cs-progress-col-label">Passage</div>
-              <pre class="cs-progress-passage-pre" id="cs-progress-passage-pre"></pre>
             </div>
-            <div class="cs-progress-col">
+            <div class="cs-progress-mini" id="cs-progress-mini" aria-hidden="true"><span></span></div>
-              <div class="cs-progress-col-label">Live output</div>
+            <div class="cs-progress-body">
-              <pre class="cs-progress-live-pre" id="cs-progress-live-pre"></pre>
+              <div class="cs-progress-main">
+                <div class="cs-progress-col">
+                  <div class="cs-progress-col-label">Passage</div>
+                  <pre class="cs-progress-passage-pre" id="cs-progress-passage-pre"></pre>
+                </div>
+                <div class="cs-progress-col">
+                  <div class="cs-progress-col-label">Live output</div>
+                  <pre class="cs-progress-live-pre" id="cs-progress-live-pre"></pre>
+                </div>
+              </div>
             </div>
+            <button class="cs-progress-resize-handle" id="cs-progress-output-resize" type="button" title="Resize passage and live output" aria-label="Resize passage and live output"><span class="mdi mdi-drag-vertical"></span></button>
           </div>
         </div>
-        <button class="cs-progress-resize-handle" id="cs-progress-output-resize" type="button" title="Resize passage and live output" aria-label="Resize passage and live output"><span class="mdi mdi-drag-vertical"></span></button>
-      </div>
         <div class="ab-cv-side cs-progress-side" id="cs-progress-side">
           <div class="ab-cv-side-head">
             <span class="ab-cv-side-title" id="cs-progress-side-title">Characters found</span>