Keep the three subtrees side-by-side in a class skill tree

- 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>

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;

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;