[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>
2026-01-11 19:25:21 +01:00 · 2025-07-24 19:03:15 -03:00 · 2025-07-24 19:03:15 -03:00 · e8e328039e
commit e8e328039e
parent 55e003aa3b
11 changed files with 152 additions and 115 deletions
--- a/styles/less/sheets/actors/character/effects.less
+++ 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;
+        }
+    }
+}
--- 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;
--- 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;
--- 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;
--- 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;
+            }
        }
    }
 }
--- 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;
--- 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';
--- 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;
+}
--- 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>
--- 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>
--- 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")}}