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;