[BUG] - Deleting items in the scrollable window causes scrollbar to reset to top (#1025)

Fixes #977

Co-authored-by: Joaquin Pereyra <joaquinpereyra98@users.noreply.github.com>

module/applications/sheets/actors/adversary.mjs

@@ -25,11 +25,22 @@ export default class AdversarySheet extends DHBaseActorSheet {
     };
 
     static PARTS = {
-        sidebar: { template: 'systems/daggerheart/templates/sheets/actors/adversary/sidebar.hbs' },
+        sidebar: {
+            template: 'systems/daggerheart/templates/sheets/actors/adversary/sidebar.hbs',
+            scrollable: ['.shortcut-items-section']
+        },
         header: { template: 'systems/daggerheart/templates/sheets/actors/adversary/header.hbs' },
-        features: { template: 'systems/daggerheart/templates/sheets/actors/adversary/features.hbs' },
+        features: {
-        notes: { template: 'systems/daggerheart/templates/sheets/actors/adversary/notes.hbs' },
+            template: 'systems/daggerheart/templates/sheets/actors/adversary/features.hbs',
-        effects: { template: 'systems/daggerheart/templates/sheets/actors/adversary/effects.hbs' }
+            scrollable: ['.feature-section']
+        },
+        notes: {
+            template: 'systems/daggerheart/templates/sheets/actors/adversary/notes.hbs'
+        },
+        effects: {
+            template: 'systems/daggerheart/templates/sheets/actors/adversary/effects.hbs',
+            scrollable: ['.effects-sections']
+        }
     };
 
     /** @inheritdoc */

module/applications/sheets/actors/character.mjs

@@ -78,6 +78,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
     static PARTS = {
         sidebar: {
             id: 'sidebar',
+            scrollable: ['.shortcut-items-section'],
             template: 'systems/daggerheart/templates/sheets/actors/character/sidebar.hbs'
         },
         header: {
@@ -86,22 +87,27 @@ export default class CharacterSheet extends DHBaseActorSheet {
         },
         features: {
             id: 'features',
+            scrollable: ['.features-sections'],
             template: 'systems/daggerheart/templates/sheets/actors/character/features.hbs'
         },
         loadout: {
             id: 'loadout',
+            scrollable: ['.items-section'],
             template: 'systems/daggerheart/templates/sheets/actors/character/loadout.hbs'
         },
         inventory: {
             id: 'inventory',
+            scrollable: ['.items-section'],
             template: 'systems/daggerheart/templates/sheets/actors/character/inventory.hbs'
         },
         biography: {
             id: 'biography',
+            scrollable: ['.items-section'],
             template: 'systems/daggerheart/templates/sheets/actors/character/biography.hbs'
         },
         effects: {
             id: 'effects',
+            scrollable: ['.effects-sections'],
             template: 'systems/daggerheart/templates/sheets/actors/character/effects.hbs'
         }
     };

module/applications/sheets/actors/companion.mjs

@@ -15,7 +15,10 @@ export default class DhCompanionSheet extends DHBaseActorSheet {
     static PARTS = {
         header: { template: 'systems/daggerheart/templates/sheets/actors/companion/header.hbs' },
         details: { template: 'systems/daggerheart/templates/sheets/actors/companion/details.hbs' },
-        effects: { template: 'systems/daggerheart/templates/sheets/actors/companion/effects.hbs' }
+        effects: {
+            template: 'systems/daggerheart/templates/sheets/actors/companion/effects.hbs',
+            scrollable: ['.effects-sections']
+        }
     };
 
     /* -------------------------------------------- */

module/applications/sheets/actors/environment.mjs

@@ -27,9 +27,13 @@ export default class DhpEnvironment extends DHBaseActorSheet {
     /**@override */
     static PARTS = {
         header: { template: 'systems/daggerheart/templates/sheets/actors/environment/header.hbs' },
-        features: { template: 'systems/daggerheart/templates/sheets/actors/environment/features.hbs' },
+        features: {
+            template: 'systems/daggerheart/templates/sheets/actors/environment/features.hbs',
+            scrollable: ['feature-section']
+        },
         potentialAdversaries: {
-            template: 'systems/daggerheart/templates/sheets/actors/environment/potentialAdversaries.hbs'
+            template: 'systems/daggerheart/templates/sheets/actors/environment/potentialAdversaries.hbs',
+            scrollable: ['items-sections']
         },
         notes: { template: 'systems/daggerheart/templates/sheets/actors/environment/notes.hbs' }
     };

styles/less/sheets/actors/adversary/effects.less

@@ -0,0 +1,17 @@
+@import '../../../utils/colors.less';
+
+.application.sheet.daggerheart.actor.dh-style.adversary {
+    .tab.effects {
+        .effects-sections {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
+
+            scrollbar-width: thin;
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        }
+    }
+}

styles/less/sheets/actors/companion/effects.less

@@ -0,0 +1,17 @@
+@import '../../../utils/colors.less';
+
+.application.sheet.daggerheart.actor.dh-style.companion {
+    .tab.effects {
+        .effects-sections {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
+
+            scrollbar-width: thin;
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        }
+    }
+}

styles/less/sheets/actors/environment/potentialAdversaries.less

@@ -0,0 +1,17 @@
+@import '../../../utils/colors.less';
+
+.application.sheet.daggerheart.actor.dh-style.environment {
+    .tab.potentialAdversaries {
+        .items-section {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
+
+            scrollbar-width: thin;
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        }
+    }
+}

styles/less/sheets/index.less

@@ -4,6 +4,7 @@
 @import './actors/adversary/header.less';
 @import './actors/adversary/sheet.less';
 @import './actors/adversary/sidebar.less';
+@import './actors/adversary/effects.less';
 
 @import './actors/character/biography.less';
 @import './actors/character/effects.less';
@@ -17,9 +18,11 @@
 @import './actors/companion/details.less';
 @import './actors/companion/header.less';
 @import './actors/companion/sheet.less';
+@import './actors/companion/effects.less';
 
 @import './actors/environment/actions.less';
 @import './actors/environment/header.less';
+@import './actors/environment/potentialAdversaries.less';
 @import './actors/environment/sheet.less';
 
 @import './items/beastform.less';

templates/sheets/actors/adversary/effects.hbs

@@ -1,20 +1,22 @@
 <section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
     data-group='{{tabs.effects.group}}'>
-    {{> 'daggerheart.inventory-items'
+    <div class="effects-sections">
-    title='DAGGERHEART.GENERAL.activeEffects'
+        {{> 'daggerheart.inventory-items'
-    type='effect'
+        title='DAGGERHEART.GENERAL.activeEffects'
-    isGlassy=true
+        type='effect'
-    collection=effects.actives
+        isGlassy=true
-    canCreate=true
+        collection=effects.actives
-    hideResources=true
+        canCreate=true
-    }}
+        hideResources=true
+        }}
 
-    {{> 'daggerheart.inventory-items'
+        {{> 'daggerheart.inventory-items'
-    title='DAGGERHEART.GENERAL.inactiveEffects'
+        title='DAGGERHEART.GENERAL.inactiveEffects'
-    type='effect'
+        type='effect'
-    isGlassy=true
+        isGlassy=true
-    collection=effects.inactives
+        collection=effects.inactives
-    canCreate=true
+        canCreate=true
-    hideResources=true
+        hideResources=true
-    }}
+        }}
+    </div>
 </section>

templates/sheets/actors/companion/effects.hbs

@@ -1,20 +1,22 @@
 <section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
     data-group='{{tabs.effects.group}}'>
-    {{> 'daggerheart.inventory-items'
+    <div class="effects-sections">
-    title='DAGGERHEART.GENERAL.activeEffects'
+        {{> 'daggerheart.inventory-items'
-    type='effect'
+        title='DAGGERHEART.GENERAL.activeEffects'
-    isGlassy=true
+        type='effect'
-    collection=effects.actives
+        isGlassy=true
-    canCreate=true
+        collection=effects.actives
-    hideResources=true
+        canCreate=true
-    }}
+        hideResources=true
+        }}
 
-    {{> 'daggerheart.inventory-items'
+        {{> 'daggerheart.inventory-items'
-    title='DAGGERHEART.GENERAL.inactiveEffects'
+        title='DAGGERHEART.GENERAL.inactiveEffects'
-    type='effect'
+        type='effect'
-    isGlassy=true
+        isGlassy=true
-    collection=effects.inactives
+        collection=effects.inactives
-    canCreate=true
+        canCreate=true
-    hideResources=true
+        hideResources=true
-    }}
+        }}
+    </div>
 </section>

templates/sheets/actors/environment/potentialAdversaries.hbs

@@ -3,7 +3,7 @@
     data-tab='{{tabs.potentialAdversaries.id}}'
     data-group='{{tabs.potentialAdversaries.group}}'
 >    
-    <div class="action-section">
+    <div class="items-section">
         {{#each document.system.potentialAdversaries as |category categoryId|}}
             {{> 'daggerheart.inventory-items'
             title=category.label