[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 @@
         }
     }
 
+    .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%);
+
+        &:hover {
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        }
+    }
+
+    .equipment-section,
+    .loadout-section,
+    .experience-section {
+        .title {
+            .section-title();
+        }
+    }
+
     .equipment-section {
-        .title {
-            display: flex;
-            gap: 15px;
-            align-items: center;
-
-            h3 {
-                font-size: 20px;
-            }
-        }
         .items-list {
-            display: flex;
+            .column-list(10px);
-            flex-direction: column;
-            gap: 10px;
-            align-items: center;
-        }
-    }
-
-    .loadout-section {
-        .title {
-            display: flex;
-            gap: 15px;
-            align-items: center;
-
-            h3 {
-                font-size: 20px;
-            }
         }
     }
 
     .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,6 +1,7 @@
 <section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
     data-group='{{tabs.effects.group}}'>
 
+    <div class="effects-sections">
         {{> 'daggerheart.inventory-items'
         title='DAGGERHEART.GENERAL.activeEffects'
         type='effect'
@@ -18,4 +19,5 @@
         canCreate=true
         hideResources=true
         }}
+    </div>
 </section>

templates/sheets/actors/character/sidebar.hbs

@@ -88,6 +88,8 @@
             </div>
         </div>
     </div>
+
+    <div class="shortcut-items-section">
         <div class="equipment-section">
             <div class="title">
                 <side-line-div class="invert"></side-line-div>
@@ -155,4 +157,5 @@
                 {{/each}}
             </div>
         </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")}}