From 52d2abd16bd5c256d1e3bd4f080bd6656a58799a Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@vigilcyber.com>
Date: Sat, 23 May 2026 08:25:01 -0400
Subject: [PATCH] Keep the three subtrees side-by-side in a class skill tree
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Skill tree panel now uses flex-wrap: nowrap so the 3 subtrees always sit
  inline matching the source layout. If the panel column is narrower than
  the trio (e.g. on mid-width screens with the summary sidebar visible),
  the row scrolls horizontally rather than stacking.
- Wrap max-width grows from 1560 to 1680px to give the builder column more
  room — the widest class layout (5+3+3 col subtrees) needs ~1160px of
  horizontal space and now fits comfortably without scroll on common
  desktop widths.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../frontend/src/components/SkillTree.vue         | 15 ++++++++++++---
 character-builder/frontend/src/styles.css         |  4 ++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/character-builder/frontend/src/components/SkillTree.vue b/character-builder/frontend/src/components/SkillTree.vue
index 5dbf7be..4646b54 100644
--- a/character-builder/frontend/src/components/SkillTree.vue
+++ b/character-builder/frontend/src/components/SkillTree.vue
@@ -257,16 +257,25 @@ function subtreeSpent(st: LaidOutSubtree): number {
 }
 
 .subtree-row {
+  /* Always render the 3 subtrees side-by-side. If the panel column is
+     narrower than the trio needs, the row scrolls horizontally rather
+     than wrapping (which would stack them and lose the visual layout). */
   display: flex;
-  flex-wrap: wrap;
-  gap: 48px 56px;
+  flex-wrap: nowrap;
+  gap: 36px;
   justify-content: center;
+  align-items: flex-start;
   background: var(--bg);
   border: 1px solid var(--line-soft);
   border-radius: 4px;
-  padding: 36px 32px;
+  padding: 28px 22px;
   overflow-x: auto;
 }
+.subtree-row::-webkit-scrollbar { height: 8px; }
+.subtree-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+.subtree {
+  flex: 0 0 auto; /* never shrink — keep each subtree at its natural width */
+}
 .subtree {
   display: flex;
   flex-direction: column;
diff --git a/character-builder/frontend/src/styles.css b/character-builder/frontend/src/styles.css
index 24c7818..13d4c60 100644
--- a/character-builder/frontend/src/styles.css
+++ b/character-builder/frontend/src/styles.css
@@ -92,7 +92,7 @@ body {
 a { color: var(--sand); }
 
 .wrap {
-  max-width: 1560px;
+  max-width: 1680px;
   margin: 0 auto;
   padding: 48px 28px 96px;
 }
@@ -450,7 +450,7 @@ button:disabled {
   margin: -48px 0 32px;
 }
 .share-inner {
-  max-width: 1560px;
+  max-width: 1680px;
   margin: 0 auto;
   padding: 0 28px;
   display: flex;