From e8e328039e4984ac03711cf7b5c1b56f884c8d37 Mon Sep 17 00:00:00 2001
From: Murilo Brito <91566541+moliloo@users.noreply.github.com>
Date: Thu, 24 Jul 2025 19:03:15 -0300
Subject: [PATCH] [BUGFIX] - Fix scroll problems in char sheet (#404)

* Fix scrollable tab

* fix char sidebard and tabs scroll

* Removed comment

---------

Co-authored-by: Dapoolp <elcatnet@gmail.com>
Co-authored-by: WBHarry <williambjrklund@gmail.com>
---
 .../less/sheets/actors/character/effects.less |  19 +++
 .../sheets/actors/character/features.less     |   1 -
 .../sheets/actors/character/inventory.less    |   1 -
 .../less/sheets/actors/character/loadout.less |   1 -
 .../less/sheets/actors/character/sheet.less   |   6 +
 .../less/sheets/actors/character/sidebar.less |  57 +++------
 styles/less/sheets/index.less                 |   1 +
 styles/less/utils/mixin.less                  |  24 ++++
 templates/sheets/actors/character/effects.hbs |  34 ++---
 templates/sheets/actors/character/sidebar.hbs | 121 +++++++++---------
 .../global/partials/inventory-item-V2.hbs     |   2 +-
 11 files changed, 152 insertions(+), 115 deletions(-)
 create mode 100644 styles/less/sheets/actors/character/effects.less

diff --git a/styles/less/sheets/actors/character/effects.less b/styles/less/sheets/actors/character/effects.less
new file mode 100644
index 00000000..1549c834
--- /dev/null
+++ b/styles/less/sheets/actors/character/effects.less
@@ -0,0 +1,19 @@
+@import '../../../utils/colors.less';
+@import '../../../utils/fonts.less';
+
+.application.sheet.daggerheart.actor.dh-style.character {
+    .tab.effects {
+        .effects-sections {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            padding: 20px 0;
+            padding-top: 10px;
+
+            scrollbar-width: thin;
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        }
+    }
+}
diff --git a/styles/less/sheets/actors/character/features.less b/styles/less/sheets/actors/character/features.less
index c2feb6b1..af53e11d 100644
--- a/styles/less/sheets/actors/character/features.less
+++ b/styles/less/sheets/actors/character/features.less
@@ -11,7 +11,6 @@
             mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
             padding: 20px 0;
             padding-top: 10px;
-            height: 84%;
 
             scrollbar-width: thin;
             scrollbar-color: light-dark(@dark-blue, @golden) transparent;
diff --git a/styles/less/sheets/actors/character/inventory.less b/styles/less/sheets/actors/character/inventory.less
index eac1065d..48bdd682 100644
--- a/styles/less/sheets/actors/character/inventory.less
+++ b/styles/less/sheets/actors/character/inventory.less
@@ -56,7 +56,6 @@
             overflow-y: auto;
             mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
             padding: 20px 0;
-            height: 73%;
 
             scrollbar-width: thin;
             scrollbar-color: light-dark(@dark-blue, @golden) transparent;
diff --git a/styles/less/sheets/actors/character/loadout.less b/styles/less/sheets/actors/character/loadout.less
index b7863e77..98fe9eed 100644
--- a/styles/less/sheets/actors/character/loadout.less
+++ b/styles/less/sheets/actors/character/loadout.less
@@ -97,7 +97,6 @@
             overflow-y: auto;
             mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
             padding: 20px 0;
-            height: 84%;
 
             scrollbar-width: thin;
             scrollbar-color: light-dark(@dark-blue, @golden) transparent;
diff --git a/styles/less/sheets/actors/character/sheet.less b/styles/less/sheets/actors/character/sheet.less
index 3d19a3b2..f09ee541 100644
--- a/styles/less/sheets/actors/character/sheet.less
+++ b/styles/less/sheets/actors/character/sheet.less
@@ -11,6 +11,7 @@
         width: 100%;
         padding-bottom: 0;
         overflow-x: auto;
+        margin-bottom: 0;
 
         .character-sidebar-sheet {
             grid-row: 1 / span 2;
@@ -25,6 +26,11 @@
         .tab {
             grid-row: 2;
             grid-column: 2;
+            &.active {
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+            }
         }
     }
 }
diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less
index 2c88d14f..7cfeffac 100644
--- a/styles/less/sheets/actors/character/sidebar.less
+++ b/styles/less/sheets/actors/character/sidebar.less
@@ -63,7 +63,7 @@
         flex-direction: column;
         top: -20px;
         gap: 30px;
-        margin-bottom: -10px;
+        margin-bottom: -16px;
 
         .resources-section {
             display: flex;
@@ -357,54 +357,39 @@
         }
     }
 
-    .equipment-section {
-        .title {
-            display: flex;
-            gap: 15px;
-            align-items: center;
+    .shortcut-items-section {
+        overflow-y: hidden;
+        max-height: 56%;
+        padding-top: 16px;
+        padding-bottom: 20px;
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
 
-            h3 {
-                font-size: 20px;
-            }
-        }
-        .items-list {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            align-items: center;
+        &:hover {
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
         }
     }
 
-    .loadout-section {
+    .equipment-section,
+    .loadout-section,
+    .experience-section {
         .title {
-            display: flex;
-            gap: 15px;
-            align-items: center;
+            .section-title();
+        }
+    }
 
-            h3 {
-                font-size: 20px;
-            }
+    .equipment-section {
+        .items-list {
+            .column-list(10px);
         }
     }
 
     .experience-section {
-        .title {
-            display: flex;
-            gap: 15px;
-            align-items: center;
-
-            h3 {
-                font-size: 20px;
-            }
-        }
-
         .experience-list {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
+            .column-list(5px);
             width: 100%;
             margin-top: 10px;
-            align-items: center;
 
             .experience-row {
                 display: flex;
diff --git a/styles/less/sheets/index.less b/styles/less/sheets/index.less
index 3470de37..aa2f4356 100644
--- a/styles/less/sheets/index.less
+++ b/styles/less/sheets/index.less
@@ -4,6 +4,7 @@
 @import './actors/adversary/sidebar.less';
 
 @import './actors/character/biography.less';
+@import './actors/character/effects.less';
 @import './actors/character/features.less';
 @import './actors/character/header.less';
 @import './actors/character/inventory.less';
diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less
index 39c2bee0..0e52fa82 100644
--- a/styles/less/utils/mixin.less
+++ b/styles/less/utils/mixin.less
@@ -20,3 +20,27 @@
         @lightRules();
     }
 }
+
+/**
+ * Apply a style to sidebar titles.
+ */
+.section-title() {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+
+    h3 {
+        font-size: 20px;
+    }
+}
+
+/**
+ * Apply default item list style.
+ * @param {Length} @gap - The vertical spacing between elements (e.g., 10px, 1rem)
+ */
+.column-list(@gap: 10px) {
+    display: flex;
+    flex-direction: column;
+    gap: @gap;
+    align-items: center;
+}
diff --git a/templates/sheets/actors/character/effects.hbs b/templates/sheets/actors/character/effects.hbs
index 4c4fca27..30fb31f4 100644
--- a/templates/sheets/actors/character/effects.hbs
+++ b/templates/sheets/actors/character/effects.hbs
@@ -1,21 +1,23 @@
 <section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
     data-group='{{tabs.effects.group}}'>
 
-    {{> 'daggerheart.inventory-items'
-    title='DAGGERHEART.GENERAL.activeEffects'
-    type='effect'
-    isGlassy=true
-    collection=effects.actives
-    canCreate=true
-    hideResources=true
-    }}
+    <div class="effects-sections">
+        {{> 'daggerheart.inventory-items'
+        title='DAGGERHEART.GENERAL.activeEffects'
+        type='effect'
+        isGlassy=true
+        collection=effects.actives
+        canCreate=true
+        hideResources=true
+        }}
 
-    {{> 'daggerheart.inventory-items'
-    title='DAGGERHEART.GENERAL.inactiveEffects'
-    type='effect'
-    isGlassy=true
-    collection=effects.inactives
-    canCreate=true
-    hideResources=true
-    }}
+        {{> 'daggerheart.inventory-items'
+        title='DAGGERHEART.GENERAL.inactiveEffects'
+        type='effect'
+        isGlassy=true
+        collection=effects.inactives
+        canCreate=true
+        hideResources=true
+        }}
+    </div>
 </section>
\ No newline at end of file
diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs
index 6ed47fc7..860f50cc 100644
--- a/templates/sheets/actors/character/sidebar.hbs
+++ b/templates/sheets/actors/character/sidebar.hbs
@@ -88,71 +88,74 @@
             </div>
         </div>
     </div>
-    <div class="equipment-section">
-        <div class="title">
-            <side-line-div class="invert"></side-line-div>
-            <h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
-            <side-line-div></side-line-div>
-        </div>
-        <ul class="items-sidebar-list">
-            {{#if document.system.usedUnarmed}}
-                {{> 'daggerheart.inventory-item' item=document.system.usedUnarmed type='attack' isSidebar=true}}
-            {{/if}}
-            {{#each document.items as |item|}}
-            {{#if item.system.equipped}}
-            {{> 'daggerheart.inventory-item'
-            item=item
-            type=item.type
-            hideTags=true
-            hideDescription=true
-            hideResources=true
-            noExtensible=true
-            }}
-            {{/if}}
-            {{/each}}
-        </ul>
-    </div>
-    <div class="loadout-section">
-        <div class="title">
-            <side-line-div class="invert"></side-line-div>
-            <h3>{{localize "DAGGERHEART.GENERAL.loadout"}}</h3>
-            <side-line-div></side-line-div>
-        </div>
-        <ul class="items-sidebar-list">
-            {{#each document.system.domainCards.loadout as |card|}}
-              {{> 'daggerheart.inventory-item'
-                item=card
-                type='domainCard'
+
+    <div class="shortcut-items-section">
+        <div class="equipment-section">
+            <div class="title">
+                <side-line-div class="invert"></side-line-div>
+                <h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
+                <side-line-div></side-line-div>
+            </div>
+            <ul class="items-sidebar-list">
+                {{#if document.system.usedUnarmed}}
+                    {{> 'daggerheart.inventory-item' item=document.system.usedUnarmed type='attack' isSidebar=true}}
+                {{/if}}
+                {{#each document.items as |item|}}
+                {{#if item.system.equipped}}
+                {{> 'daggerheart.inventory-item'
+                item=item
+                type=item.type
                 hideTags=true
                 hideDescription=true
                 hideResources=true
                 noExtensible=true
-            }}
-
-            {{/each}}
-        </ul>
-    </div>
-    <div class="experience-section">
-        <div class="title">
-            <side-line-div class="invert"></side-line-div>
-            <h3>{{localize "DAGGERHEART.GENERAL.experience.single"}}</h3>
-            <side-line-div></side-line-div>
+                }}
+                {{/if}}
+                {{/each}}
+            </ul>
         </div>
-        <div class="experience-list">
-            {{#each document.system.experiences as |experience id|}}
-            <div class="experience-row">
-                <div class="experience-value">
-                    +{{experience.value}}
-                </div>
-                <input name="system.experiences.{{id}}.name" data-experience={{id}}
-                    value="{{experience.name}}" type="text" />
-                <div class="controls">
-                    <a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
-                        <i class="fa-regular fa-message"></i>
-                    </a>
-                </div>
+        <div class="loadout-section">
+            <div class="title">
+                <side-line-div class="invert"></side-line-div>
+                <h3>{{localize "DAGGERHEART.GENERAL.loadout"}}</h3>
+                <side-line-div></side-line-div>
+            </div>
+            <ul class="items-sidebar-list">
+                {{#each document.system.domainCards.loadout as |card|}}
+                {{> 'daggerheart.inventory-item'
+                    item=card
+                    type='domainCard'
+                    hideTags=true
+                    hideDescription=true
+                    hideResources=true
+                    noExtensible=true
+                }}
+
+                {{/each}}
+            </ul>
+        </div>
+        <div class="experience-section">
+            <div class="title">
+                <side-line-div class="invert"></side-line-div>
+                <h3>{{localize "DAGGERHEART.GENERAL.experience.single"}}</h3>
+                <side-line-div></side-line-div>
+            </div>
+            <div class="experience-list">
+                {{#each document.system.experiences as |experience id|}}
+                <div class="experience-row">
+                    <div class="experience-value">
+                        +{{experience.value}}
+                    </div>
+                    <input name="system.experiences.{{id}}.name" data-experience={{id}}
+                        value="{{experience.name}}" type="text" />
+                    <div class="controls">
+                        <a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
+                            <i class="fa-regular fa-message"></i>
+                        </a>
+                    </div>
+                </div>
+                {{/each}}
             </div>
-            {{/each}}
         </div>
     </div>
 </aside>
\ No newline at end of file
diff --git a/templates/sheets/global/partials/inventory-item-V2.hbs b/templates/sheets/global/partials/inventory-item-V2.hbs
index b58f6f44..73ae5ae7 100644
--- a/templates/sheets/global/partials/inventory-item-V2.hbs
+++ b/templates/sheets/global/partials/inventory-item-V2.hbs
@@ -221,7 +221,7 @@ Parameters:
       {{else if (eq type 'effect')}}
       <a data-action="toggleEffect"
         data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.disabled 'enableEffect' 'disableEffect' }}">
-        <i class="{{ifThen item.disabled 'fa-regular fa-lightbulb' 'fa-solid fa-lightbulb'}}"></i>
+        <i class="{{ifThen item.disabled 'fa-solid fa-toggle-off' 'fa-solid fa-toggle-on'}}"></i>
       </a>
       {{/if}}
       {{#if (hasProperty item "toChat")}}