From ee124af2026629d44ff98061f41e8f55c6c22027 Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Thu, 18 Dec 2025 13:47:19 -0600
Subject: [PATCH] Add scrollbar to NPC actor sheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create npc-body.hbs as combined body template with all sections
- Simplify PARTS to header + body instead of individual sections
- Add flex layout and custom scrollbar CSS for sheet-body
- Preload npc-body.hbs template in vagabond.mjs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 module/sheets/npc-sheet.mjs          |  17 +-
 module/vagabond.mjs                  |   1 +
 styles/scss/sheets/_actor-sheet.scss |  11 +
 templates/actor/npc-body.hbs         | 310 +++++++++++++++++++++++++++
 4 files changed, 326 insertions(+), 13 deletions(-)
 create mode 100644 templates/actor/npc-body.hbs

diff --git a/module/sheets/npc-sheet.mjs b/module/sheets/npc-sheet.mjs
index 1168877..cf67ea1 100644
--- a/module/sheets/npc-sheet.mjs
+++ b/module/sheets/npc-sheet.mjs
@@ -47,17 +47,8 @@ export default class VagabondNPCSheet extends VagabondActorSheet {
     header: {
       template: "systems/vagabond/templates/actor/npc-header.hbs",
     },
-    stats: {
-      template: "systems/vagabond/templates/actor/npc-stats.hbs",
-    },
-    actions: {
-      template: "systems/vagabond/templates/actor/npc-actions.hbs",
-    },
-    abilities: {
-      template: "systems/vagabond/templates/actor/npc-abilities.hbs",
-    },
-    notes: {
-      template: "systems/vagabond/templates/actor/npc-notes.hbs",
+    body: {
+      template: "systems/vagabond/templates/actor/npc-body.hbs",
     },
   };
 
@@ -172,8 +163,8 @@ export default class VagabondNPCSheet extends VagabondActorSheet {
   _configureRenderOptions(options) {
     super._configureRenderOptions(options);
 
-    // NPC sheets render all parts (no tabs)
-    options.parts = ["header", "stats", "actions", "abilities", "notes"];
+    // NPC sheets render header and body (no tabs)
+    options.parts = ["header", "body"];
   }
 
   /* -------------------------------------------- */
diff --git a/module/vagabond.mjs b/module/vagabond.mjs
index 459f173..1ed66e8 100644
--- a/module/vagabond.mjs
+++ b/module/vagabond.mjs
@@ -67,6 +67,7 @@ async function preloadHandlebarsTemplates() {
     "systems/vagabond/templates/actor/parts/status-bar.hbs",
     // NPC sheet parts
     "systems/vagabond/templates/actor/npc-header.hbs",
+    "systems/vagabond/templates/actor/npc-body.hbs",
     "systems/vagabond/templates/actor/npc-stats.hbs",
     "systems/vagabond/templates/actor/npc-actions.hbs",
     "systems/vagabond/templates/actor/npc-abilities.hbs",
diff --git a/styles/scss/sheets/_actor-sheet.scss b/styles/scss/sheets/_actor-sheet.scss
index 877f162..ebac1e3 100644
--- a/styles/scss/sheets/_actor-sheet.scss
+++ b/styles/scss/sheets/_actor-sheet.scss
@@ -2141,6 +2141,16 @@
   min-width: 450px;
   min-height: 500px;
 
+  // Form is a flex column to allow scrollable body
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  // Header wrapper stays fixed at top
+  .header-wrapper {
+    flex-shrink: 0;
+  }
+
   // ----------------------------------------
   // NPC Header
   // ----------------------------------------
@@ -2383,6 +2393,7 @@
     overflow-y: auto;
     flex: 1;
     min-height: 0;
+    @include custom-scrollbar;
   }
 
   // ----------------------------------------
diff --git a/templates/actor/npc-body.hbs b/templates/actor/npc-body.hbs
new file mode 100644
index 0000000..55d4b5d
--- /dev/null
+++ b/templates/actor/npc-body.hbs
@@ -0,0 +1,310 @@
+{{!-- NPC Sheet Body - Scrollable Content Wrapper --}}
+<div class="sheet-body">
+  {{!-- Stats Section --}}
+  <section class="npc-stats">
+    <div class="stats-row">
+      {{!-- Zone --}}
+      <div class="stat-group zone">
+        <label>{{localize "VAGABOND.Zone"}}</label>
+        <select name="system.zone">
+          {{#each zoneOptions}}
+          <option value="{{@key}}" {{#if (eq @key ../zone)}}selected{{/if}}>
+            {{localize this}}
+          </option>
+          {{/each}}
+        </select>
+        <p class="zone-hint">{{zoneBehavior}}</p>
+      </div>
+
+      {{!-- Speed --}}
+      <div class="stat-group speed">
+        <label>{{localize "VAGABOND.Speed"}}</label>
+        <div class="speed-value">
+          <input type="number" name="system.speed.value" value="{{speed}}" min="0" />
+          <span class="unit">ft</span>
+        </div>
+      </div>
+
+      {{!-- Size & Type --}}
+      <div class="stat-group type">
+        <div class="type-field">
+          <label>{{localize "VAGABOND.Size"}}</label>
+          <select name="system.size">
+            {{#each sizeOptions}}
+            <option value="{{@key}}" {{#if (eq @key ../size)}}selected{{/if}}>
+              {{localize this}}
+            </option>
+            {{/each}}
+          </select>
+        </div>
+        <div class="type-field">
+          <label>{{localize "VAGABOND.BeingType"}}</label>
+          <select name="system.beingType">
+            {{#each beingTypeOptions}}
+            <option value="{{@key}}" {{#if (eq @key ../beingType)}}selected{{/if}}>
+              {{localize this}}
+            </option>
+            {{/each}}
+          </select>
+        </div>
+      </div>
+
+      {{!-- Appearing --}}
+      <div class="stat-group appearing">
+        <label class="rollable" data-action="rollAppearing" data-tooltip="{{localize 'VAGABOND.RollAppearing'}}">
+          <i class="fa-solid fa-dice"></i>
+          {{localize "VAGABOND.Appearing"}}
+        </label>
+        <input type="text" name="system.appearing" value="{{appearing}}" placeholder="1d6" />
+      </div>
+    </div>
+
+    {{!-- Movement Types --}}
+    <div class="biography-section movement">
+      <h2 class="section-header">{{localize "VAGABOND.Movement"}}</h2>
+      <div class="movement-grid">
+        <div class="movement-field">
+          <label data-tooltip="{{localize 'VAGABOND.MovementClimbHint'}}">
+            <input type="checkbox" name="system.movement.climb" {{#if movement.climb}}checked{{/if}} />
+            {{localize "VAGABOND.Climb"}}
+          </label>
+        </div>
+        <div class="movement-field">
+          <label data-tooltip="{{localize 'VAGABOND.MovementClingHint'}}">
+            <input type="checkbox" name="system.movement.cling" {{#if movement.cling}}checked{{/if}} />
+            {{localize "VAGABOND.Cling"}}
+          </label>
+        </div>
+        <div class="movement-field">
+          <label data-tooltip="{{localize 'VAGABOND.MovementFlyHint'}}">
+            <input type="checkbox" name="system.movement.fly" {{#if movement.fly}}checked{{/if}} />
+            {{localize "VAGABOND.Fly"}}
+          </label>
+        </div>
+        <div class="movement-field">
+          <label data-tooltip="{{localize 'VAGABOND.MovementPhaseHint'}}">
+            <input type="checkbox" name="system.movement.phase" {{#if movement.phase}}checked{{/if}} />
+            {{localize "VAGABOND.Phase"}}
+          </label>
+        </div>
+        <div class="movement-field">
+          <label data-tooltip="{{localize 'VAGABOND.MovementSwimHint'}}">
+            <input type="checkbox" name="system.movement.swim" {{#if movement.swim}}checked{{/if}} />
+            {{localize "VAGABOND.Swim"}}
+          </label>
+        </div>
+      </div>
+    </div>
+
+    {{!-- Senses --}}
+    {{#if hasSenses}}
+    <div class="senses-row">
+      <label>{{localize "VAGABOND.Senses"}}:</label>
+      {{#if senses.allsight}}
+      <span class="sense-tag">{{localize "VAGABOND.Allsight"}}</span>
+      {{/if}}
+      {{#if senses.blindsight}}
+      <span class="sense-tag">{{localize "VAGABOND.Blindsight"}}</span>
+      {{/if}}
+      {{#if senses.darkvision}}
+      <span class="sense-tag">{{localize "VAGABOND.Darkvision"}}</span>
+      {{/if}}
+      {{#if senses.echolocation}}
+      <span class="sense-tag">{{localize "VAGABOND.Echolocation"}}</span>
+      {{/if}}
+      {{#if senses.seismicsense}}
+      <span class="sense-tag">{{localize "VAGABOND.Seismicsense"}}</span>
+      {{/if}}
+      {{#if senses.telepathy}}
+      <span class="sense-tag">{{localize "VAGABOND.Telepathy"}}</span>
+      {{/if}}
+    </div>
+    {{/if}}
+
+    {{!-- Damage Modifiers --}}
+    {{#if hasDamageModifiers}}
+    <div class="damage-modifiers">
+      {{#if immunities.length}}
+      <div class="modifier-row immunities">
+        <label>{{localize "VAGABOND.Immunities"}}:</label>
+        <div class="modifier-tags">
+          {{#each immunities}}
+          <span class="modifier-tag immune">{{this}}</span>
+          {{/each}}
+        </div>
+      </div>
+      {{/if}}
+
+      {{#if resistances.length}}
+      <div class="modifier-row resistances">
+        <label>{{localize "VAGABOND.Resistances"}}:</label>
+        <div class="modifier-tags">
+          {{#each resistances}}
+          <span class="modifier-tag resist">{{this}}</span>
+          {{/each}}
+        </div>
+      </div>
+      {{/if}}
+
+      {{#if weaknesses.length}}
+      <div class="modifier-row weaknesses">
+        <label>{{localize "VAGABOND.Weaknesses"}}:</label>
+        <div class="modifier-tags">
+          {{#each weaknesses}}
+          <span class="modifier-tag weak">{{this}}</span>
+          {{/each}}
+        </div>
+      </div>
+      {{/if}}
+    </div>
+    {{/if}}
+  </section>
+
+  {{!-- Actions Section --}}
+  <section class="npc-actions">
+    <div class="section-header-row">
+      <h2 class="section-header">{{localize "VAGABOND.Actions"}}</h2>
+      <button type="button" class="action-add" data-action="addAction"
+              data-tooltip="{{localize 'VAGABOND.AddAction'}}">
+        <i class="fa-solid fa-plus"></i>
+      </button>
+    </div>
+
+    <ul class="action-list">
+      {{#each actions}}
+      <li class="action-item" data-action-index="{{this.index}}">
+        <div class="action-header">
+          <input type="text" class="action-name" name="system.actions.{{this.index}}.name"
+                 value="{{this.name}}" placeholder="{{localize 'VAGABOND.ActionName'}}" />
+          <div class="action-controls">
+            <button type="button" class="action-roll" data-action="rollAction"
+                    data-action-index="{{this.index}}" data-tooltip="{{localize 'VAGABOND.RollAction'}}">
+              <i class="fa-solid fa-dice-d20"></i>
+            </button>
+            <button type="button" class="action-delete" data-action="deleteAction"
+                    data-action-index="{{this.index}}" data-tooltip="{{localize 'VAGABOND.DeleteAction'}}">
+              <i class="fa-solid fa-trash"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="action-details">
+          <div class="action-field attack-type">
+            <label>{{localize "VAGABOND.AttackType"}}</label>
+            <select name="system.actions.{{this.index}}.attackType">
+              {{#each ../attackTypeOptions}}
+              <option value="{{@key}}" {{#if (eq @key ../this.attackType)}}selected{{/if}}>
+                {{localize this}}
+              </option>
+              {{/each}}
+            </select>
+          </div>
+
+          <div class="action-field damage">
+            <label>{{localize "VAGABOND.Damage"}}</label>
+            <input type="text" name="system.actions.{{this.index}}.damage"
+                   value="{{this.damage}}" placeholder="1d6" />
+          </div>
+
+          <div class="action-field damage-type">
+            <label>{{localize "VAGABOND.DamageType"}}</label>
+            <select name="system.actions.{{this.index}}.damageType">
+              {{#each ../damageTypeOptions}}
+              <option value="{{@key}}" {{#if (eq @key ../this.damageType)}}selected{{/if}}>
+                {{localize this}}
+              </option>
+              {{/each}}
+            </select>
+          </div>
+
+          <div class="action-field range">
+            <label>{{localize "VAGABOND.Range"}}</label>
+            <input type="text" name="system.actions.{{this.index}}.range"
+                   value="{{this.range}}" placeholder="60 ft" />
+          </div>
+        </div>
+
+        <div class="action-description">
+          <textarea name="system.actions.{{this.index}}.description"
+                    placeholder="{{localize 'VAGABOND.ActionDescription'}}">{{this.description}}</textarea>
+        </div>
+      </li>
+      {{else}}
+      <li class="action-item empty">
+        <p>{{localize "VAGABOND.NoActions"}}</p>
+        <button type="button" data-action="addAction">
+          <i class="fa-solid fa-plus"></i>
+          {{localize "VAGABOND.AddAction"}}
+        </button>
+      </li>
+      {{/each}}
+    </ul>
+  </section>
+
+  {{!-- Abilities Section --}}
+  <section class="npc-abilities">
+    <div class="section-header-row">
+      <h2 class="section-header">{{localize "VAGABOND.Abilities"}}</h2>
+      <button type="button" class="ability-add" data-action="addAbility"
+              data-tooltip="{{localize 'VAGABOND.AddAbility'}}">
+        <i class="fa-solid fa-plus"></i>
+      </button>
+    </div>
+
+    <ul class="ability-list">
+      {{#each abilities}}
+      <li class="ability-item" data-ability-index="{{this.index}}">
+        <div class="ability-header">
+          <input type="text" class="ability-name" name="system.abilities.{{this.index}}.name"
+                 value="{{this.name}}" placeholder="{{localize 'VAGABOND.AbilityName'}}" />
+          <div class="ability-controls">
+            <label class="ability-passive">
+              <input type="checkbox" name="system.abilities.{{this.index}}.passive"
+                     {{#if this.passive}}checked{{/if}} />
+              {{localize "VAGABOND.Passive"}}
+            </label>
+            <button type="button" class="ability-delete" data-action="deleteAbility"
+                    data-ability-index="{{this.index}}" data-tooltip="{{localize 'VAGABOND.DeleteAbility'}}">
+              <i class="fa-solid fa-trash"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="ability-description">
+          <textarea name="system.abilities.{{this.index}}.description"
+                    placeholder="{{localize 'VAGABOND.AbilityDescription'}}">{{this.description}}</textarea>
+        </div>
+      </li>
+      {{else}}
+      <li class="ability-item empty">
+        <p>{{localize "VAGABOND.NoAbilities"}}</p>
+        <button type="button" data-action="addAbility">
+          <i class="fa-solid fa-plus"></i>
+          {{localize "VAGABOND.AddAbility"}}
+        </button>
+      </li>
+      {{/each}}
+    </ul>
+  </section>
+
+  {{!-- Notes Section --}}
+  <section class="npc-notes">
+    {{!-- Loot --}}
+    <div class="notes-section loot">
+      <h2 class="section-header">{{localize "VAGABOND.Loot"}}</h2>
+      <div class="editor-container">
+        <textarea name="system.loot"
+                  placeholder="{{localize 'VAGABOND.LootPlaceholder'}}">{{loot}}</textarea>
+      </div>
+    </div>
+
+    {{!-- GM Notes --}}
+    <div class="notes-section gm-notes">
+      <h2 class="section-header">{{localize "VAGABOND.GMNotes"}}</h2>
+      <div class="editor-container">
+        <textarea name="system.gmNotes"
+                  placeholder="{{localize 'VAGABOND.GMNotesPlaceholder'}}">{{gmNotes}}</textarea>
+      </div>
+    </div>
+  </section>
+</div>