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

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;
+        }
+    }
+}

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;

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;

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;

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;
+            }
         }
     }
 }

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 {
+    .shortcut-items-section {
-        .title {
+        overflow-y: hidden;
-            display: flex;
+        max-height: 56%;
-            gap: 15px;
+        padding-top: 16px;
-            align-items: center;
+        padding-bottom: 20px;
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
 
-            h3 {
+        &:hover {
-                font-size: 20px;
+            overflow-y: auto;
-            }
+            scrollbar-width: thin;
-        }
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
-        .items-list {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            align-items: center;
         }
     }
 
-    .loadout-section {
+    .equipment-section,
+    .loadout-section,
+    .experience-section {
         .title {
-            display: flex;
+            .section-title();
-            gap: 15px;
+        }
-            align-items: center;
+    }
 
-            h3 {
+    .equipment-section {
-                font-size: 20px;
+        .items-list {
-            }
+            .column-list(10px);
         }
     }
 
     .experience-section {
-        .title {
-            display: flex;
-            gap: 15px;
-            align-items: center;
-
-            h3 {
-                font-size: 20px;
-            }
-        }
-
         .experience-list {
-            display: flex;
+            .column-list(5px);
-            flex-direction: column;
-            gap: 5px;
             width: 100%;
             margin-top: 10px;
-            align-items: center;
 
             .experience-row {
                 display: flex;

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

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;
+}

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'
+    <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/character/sidebar.hbs

@@ -88,71 +88,74 @@
             </div>
         </div>
     </div>
-    <div class="equipment-section">
+
-        <div class="title">
+    <div class="shortcut-items-section">
-            <side-line-div class="invert"></side-line-div>
+        <div class="equipment-section">
-            <h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
+            <div class="title">
-            <side-line-div></side-line-div>
+                <side-line-div class="invert"></side-line-div>
-        </div>
+                <h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
-        <ul class="items-sidebar-list">
+                <side-line-div></side-line-div>
-            {{#if document.system.usedUnarmed}}
+            </div>
-                {{> 'daggerheart.inventory-item' item=document.system.usedUnarmed type='attack' isSidebar=true}}
+            <ul class="items-sidebar-list">
-            {{/if}}
+                {{#if document.system.usedUnarmed}}
-            {{#each document.items as |item|}}
+                    {{> 'daggerheart.inventory-item' item=document.system.usedUnarmed type='attack' isSidebar=true}}
-            {{#if item.system.equipped}}
+                {{/if}}
-            {{> 'daggerheart.inventory-item'
+                {{#each document.items as |item|}}
-            item=item
+                {{#if item.system.equipped}}
-            type=item.type
+                {{> 'daggerheart.inventory-item'
-            hideTags=true
+                item=item
-            hideDescription=true
+                type=item.type
-            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'
                 hideTags=true
                 hideDescription=true
                 hideResources=true
                 noExtensible=true
-            }}
+                }}
-
+                {{/if}}
-            {{/each}}
+                {{/each}}
-        </ul>
+            </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">
+        <div class="loadout-section">
-            {{#each document.system.experiences as |experience id|}}
+            <div class="title">
-            <div class="experience-row">
+                <side-line-div class="invert"></side-line-div>
-                <div class="experience-value">
+                <h3>{{localize "DAGGERHEART.GENERAL.loadout"}}</h3>
-                    +{{experience.value}}
+                <side-line-div></side-line-div>
-                </div>
+            </div>
-                <input name="system.experiences.{{id}}.name" data-experience={{id}}
+            <ul class="items-sidebar-list">
-                    value="{{experience.name}}" type="text" />
+                {{#each document.system.domainCards.loadout as |card|}}
-                <div class="controls">
+                {{> 'daggerheart.inventory-item'
-                    <a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
+                    item=card
-                        <i class="fa-regular fa-message"></i>
+                    type='domainCard'
-                    </a>
+                    hideTags=true
-                </div>
+                    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>

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")}}