Styling pass for scrollbars, fieldsets, and scroll shadows

module/applications/sheets/actors/adversary.mjs

@@ -7,7 +7,7 @@ export default class AdversarySheet extends DHBaseActorSheet {
     /** @inheritDoc */
     static DEFAULT_OPTIONS = {
         classes: ['adversary'],
-        position: { width: 660, height: 766 },
+        position: { width: 670, height: 766 },
         window: { resizable: true },
         actions: {
             toggleHitPoints: AdversarySheet.#toggleHitPoints,

styles/less/global/prose-mirror.less

@@ -41,5 +41,11 @@
                 list-style: disc;
             }
         }
+        
+        // Fixes centering and makes it not render over scrollbar
+        &:hover button.toggle:enabled {
+            display: flex;
+            right: 12px;
+        }
     }
 }

styles/less/global/sheet.less

@@ -54,7 +54,7 @@ body.game:is(.performance-low, .noblur) {
         position: relative;
         min-height: -webkit-fill-available;
         transition: opacity 0.3s ease;
-        padding-bottom: 20px;
+        padding-bottom: 16px;
 
         .tab {
             padding: 0 10px;

styles/less/global/tab-navigation.less

@@ -3,8 +3,7 @@
 
 .daggerheart.dh-style {
     .tab-navigation {
-        margin: 5px 0;
+        margin: 5px 0 10px 0;
-        height: 40px;
         width: 100%;
 
         .navigation-container {

styles/less/sheets/actors/actor-sheet-shared.less

@@ -38,11 +38,23 @@
     }
 
     .tab.inventory {
-        .search-section {
+        .gold-section {
-            display: flex;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
             gap: 10px;
-            align-items: center;
+            padding: 12px 12px 0 10px;
+
+            .input {
+                color: light-dark(@dark, @beige);
+            }
         }
+    }
+
+    .search-section {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        justify-content: space-between;
         .search-bar {
             position: relative;
             color: light-dark(@dark-blue-50, @beige-50);
@@ -72,22 +84,11 @@
                 height: 32px;
                 position: absolute;
                 right: 20px;
-                font-size: 16px;
+                font-size: var(--font-size-16);;
                 z-index: 1;
                 color: light-dark(@dark-blue-50, @beige-50);
             }
         }
-
-        .gold-section {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
-            gap: 10px;
-            padding: 10px 10px 0;
-
-            .input {
-                color: light-dark(@dark, @beige);
-            }
-        }
     }
 
     &.limited {

styles/less/sheets/actors/adversary/actions.less

@@ -1,15 +0,0 @@
-@import '../../../utils/colors.less';
-@import '../../../utils/fonts.less';
-
-.application.sheet.daggerheart.actor.dh-style.adversary {
-    .tab.features {
-        .feature-section {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
-            padding-bottom: 20px;
-        }
-    }
-}

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

@@ -1,4 +1,5 @@
 @import '../../../utils/colors.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
     .tab.effects {
@@ -7,8 +8,9 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            scrollbar-gutter: stable;
-            padding-bottom: 20px;
+            padding-bottom: 4px;
+            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/adversary/features.less

@@ -0,0 +1,29 @@
+@import '../../../utils/colors.less';
+@import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
+
+.application.sheet.daggerheart.actor.dh-style.adversary {
+    .tab.features.active {
+        position: relative;
+        padding-left: 15px;
+        .feature-section {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 6px 2px 4px 0;
+            overflow-y: auto;
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
+        }
+        > button {
+            --button-size: 1.75rem;
+            width: 1.75rem;
+            position: absolute;
+            inset: auto 16px 0 auto;
+            box-shadow: 0 0 5px @light-black;
+        }
+        &:has(> button) .feature-section {
+            padding-bottom: calc(1px + 1.75rem);
+        }
+    }
+}

styles/less/sheets/actors/adversary/header.less

@@ -71,7 +71,10 @@
         .adversary-navigation {
             display: flex;
             gap: 8px;
-            align-items: center;
+            align-items: baseline;
+            .tab-navigation {
+                margin-top: 0;
+            }
         }
     }
 }

styles/less/sheets/actors/adversary/index.less

@@ -0,0 +1,6 @@
+@import './sheet.less';
+@import './features.less';
+@import './header.less';
+@import './sidebar.less';
+@import './effects.less';
+@import './notes.less';

styles/less/sheets/actors/adversary/notes.less

@@ -0,0 +1,11 @@
+@import '../../../utils/mixin.less';
+
+.application.sheet.daggerheart.actor.dh-style.adversary {
+    .tab.notes {
+        padding: 6px 0 4px 15px;
+        .editor-content {
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
+        }
+    }
+}

styles/less/sheets/actors/adversary/sheet.less

@@ -9,28 +9,31 @@
         height: 100%;
         width: 100%;
         padding-bottom: 0;
+    }
 
-        .adversary-sidebar-sheet {
+    .adversary-sidebar-sheet {
-            grid-row: 1 / span 2;
+        grid-row: 1 / span 2;
-            grid-column: 1;
+        grid-column: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .adversary-header-sheet {
+        grid-row: 1;
+        grid-column: 2;
+    }
+
+    .tab {
+        grid-row: 2;
+        grid-column: 2;
+        &.active {
             overflow: hidden;
             display: flex;
             flex-direction: column;
-        }
+            padding-right: 0;
-
+            margin-right: 2px;
-        .adversary-header-sheet {
+            margin-bottom: 16px;
-            grid-row: 1;
-            grid-column: 2;
-        }
-
-        .tab {
-            grid-row: 2;
-            grid-column: 2;
-            &.active {
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-            }
         }
     }
 }

styles/less/sheets/actors/adversary/sidebar.less

@@ -286,9 +286,8 @@
             overflow-y: hidden;
             padding-top: 10px;
             padding-bottom: 20px;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
-            
             scrollbar-gutter: stable;
+            .with-scroll-shadows();
 
             &:hover {
                 overflow-y: auto;

styles/less/sheets/actors/character/biography.less

@@ -1,5 +1,6 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.biography {
@@ -9,10 +10,11 @@
             gap: 10px;
             height: 100%;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 98%, transparent 100%);
             padding-top: 8px;
-            padding-bottom: 20px;
+            padding-bottom: 4px;
             height: 100%;
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
         }
 
         .characteristics-section {

styles/less/sheets/actors/character/effects.less

@@ -1,15 +1,18 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.effects {
+        padding-right: 0;
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        .with-scroll-shadows();
         .effects-sections {
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
+            padding-bottom: 4px;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
-            padding-bottom: 20px;
         }
     }
 }

styles/less/sheets/actors/character/features.less

@@ -1,15 +1,18 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.features {
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        padding-right: 0;
+        padding-bottom: 4px;
+        .with-scroll-shadows();
         .features-sections {
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
-            padding-bottom: 20px;
         }
     }
 }

styles/less/sheets/actors/character/index.less

@@ -0,0 +1,8 @@
+@import './sheet.less';
+@import './biography.less';
+@import './effects.less';
+@import './features.less';
+@import './header.less';
+@import './inventory.less';
+@import './loadout.less';
+@import './sidebar.less';

styles/less/sheets/actors/character/inventory.less

@@ -1,15 +1,22 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.inventory {
+        padding-right: 0;
+        .search-section {
+            padding-right: 14px;
+        }
         .items-section {
             display: flex;
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            scrollbar-gutter: stable;
-            padding: 20px 0;
+            margin-top: 20px;
+            padding-bottom: 4px;
+            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/character/loadout.less

@@ -4,44 +4,7 @@
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.loadout {
         .search-section {
-            display: flex;
+            padding-right: 14px;
-            align-items: center;
-            justify-content: space-between;
-
-            .search-bar {
-                position: relative;
-                color: light-dark(@dark-blue-50, @beige-50);
-                width: 80%;
-                padding-top: 5px;
-
-                input {
-                    border-radius: 50px;
-                    background: light-dark(@dark-blue-10, @golden-10);
-                    border: none;
-                    outline: 2px solid transparent;
-                    transition: all 0.3s ease;
-                    padding: 0 20px;
-
-                    &:hover {
-                        outline: 2px solid light-dark(@dark, @golden);
-                    }
-
-                    &::-webkit-search-cancel-button {
-                        -webkit-appearance: none;
-                        display: none;
-                    }
-                }
-
-                .icon {
-                    align-content: center;
-                    height: 32px;
-                    position: absolute;
-                    right: 20px;
-                    font-size: var(--font-size-16);
-                    z-index: 1;
-                    color: light-dark(@dark-blue-50, @beige-50);
-                }
-            }
 
             .btn-toggle-view {
                 background: light-dark(@dark-blue-10, @dark-blue);
@@ -90,8 +53,10 @@
             gap: 10px;
             height: 100%;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
+            scrollbar-gutter: stable;
-            padding: 20px 0;
+            margin-top: 20px;
+            padding-bottom: 4px;
+            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/character/sheet.less

@@ -10,28 +10,31 @@
         width: 100%;
         padding-bottom: 0;
         overflow-x: auto;
+    }
+    
+    .character-sidebar-sheet {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+        display: flex;
+        flex-direction: column;
+    }
 
-        .character-sidebar-sheet {
+    .character-header-sheet {
-            grid-row: 1 / span 2;
+        position: relative;
-            grid-column: 1;
+        grid-row: 1;
+        grid-column: 2;
+    }
+
+    .tab {
+        grid-row: 2;
+        grid-column: 2;
+        padding-right: 0;
+        margin-right: 2px;
+        margin-bottom: 12px;
+        &.active {
             display: flex;
             flex-direction: column;
-        }
+            overflow: hidden;
-
-        .character-header-sheet {
-            position: relative;
-            grid-row: 1;
-            grid-column: 2;
-        }
-
-        .tab {
-            grid-row: 2;
-            grid-column: 2;
-            &.active {
-                display: flex;
-                flex-direction: column;
-                overflow: hidden;
-            }
         }
     }
 }

styles/less/sheets/actors/character/sidebar.less

@@ -549,8 +549,8 @@
         overflow-y: hidden;
         padding-top: 10px;
         padding-bottom: 20px;
-        mask-image: linear-gradient(0deg, transparent 0%, black 5%);
         scrollbar-gutter: stable;
+        .with-scroll-shadows();
         
         &:hover {
             overflow-y: auto;

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

@@ -1,14 +1,18 @@
 @import '../../../utils/colors.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.companion {
     .tab.effects {
+        margin-right: 2px;
+        padding-right: 0;
         .effects-sections {
             display: flex;
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 4px;
-            padding-bottom: 20px;
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/companion/header.less

@@ -151,7 +151,7 @@
             display: flex;
             gap: 8px;
             align-items: baseline;
-            width: 100%;
+            width: calc(100% - 32px);
         }
     }
 }

styles/less/sheets/actors/companion/sheet.less

@@ -10,3 +10,16 @@
         background: url('../assets/parchments/dh-parchment-light.png');
     }
 });
+
+.application.sheet.daggerheart.actor.dh-style.companion {
+    .window-content {
+        display: flex;
+    }
+
+    .tab.active {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+}

styles/less/sheets/actors/environment/actions.less

@@ -1,15 +0,0 @@
-@import '../../../utils/colors.less';
-@import '../../../utils/fonts.less';
-
-.application.sheet.daggerheart.actor.dh-style.environment {
-    .tab.features {
-        .feature-section {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
-            padding-bottom: 20px;
-        }
-    }
-}

styles/less/sheets/actors/environment/features.less

@@ -0,0 +1,28 @@
+@import '../../../utils/colors.less';
+@import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
+
+.application.sheet.daggerheart.actor.dh-style.environment {
+    .tab.features {
+        position: relative;
+        .feature-section {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            overflow-y: auto;
+            padding: 4px 8px;
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
+        }
+        > button {
+            --button-size: 1.75rem;
+            width: 1.75rem;
+            position: absolute;
+            inset: auto 16px 0 auto;
+            box-shadow: 0 0 5px @light-black;
+        }
+        &:has(> button) .feature-section {
+            padding-bottom: calc(1px + 1.75rem);
+        }
+    }
+}

styles/less/sheets/actors/environment/index.less

@@ -0,0 +1,5 @@
+@import './sheet.less';
+@import './features.less';
+@import './header.less';
+@import './potentialAdversaries.less';
+@import './notes.less';

styles/less/sheets/actors/environment/notes.less

@@ -0,0 +1,11 @@
+@import '../../../utils/mixin.less';
+
+.application.sheet.daggerheart.actor.dh-style.environment {
+    .tab.notes {
+        padding: 6px 0 4px 15px;
+        .editor-content {
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
+        }
+    }
+}

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

@@ -1,4 +1,5 @@
 @import '../../../utils/colors.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.environment {
     .tab.potentialAdversaries {
@@ -7,8 +8,9 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 0 4px 4px 4px;
-            padding-bottom: 20px;
+            scrollbar-gutter: stable;
+            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/environment/sheet.less

@@ -16,6 +16,8 @@
     .tab {
         flex: 1;
         overflow-y: auto;
+        padding-right: 0;
+        margin-right: 2px;
 
         &.active {
             overflow: hidden;

styles/less/sheets/actors/party/index.less

@@ -0,0 +1,5 @@
+@import './sheet.less';
+@import './header.less';
+@import './party-members.less';
+@import './inventory.less';
+@import './notes.less';

styles/less/sheets/actors/party/inventory.less

@@ -1,15 +1,23 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.party {
     .tab.inventory {
+        padding-right: 0;
+        .search-section {
+            padding-right: 14px;
+        }
+
         .items-section {
             display: flex;
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            scrollbar-gutter: stable;
-            padding: 20px 0;
+            margin-top: 20px;
+            padding-bottom: 4px;
+            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/party/notes.less

@@ -0,0 +1,12 @@
+@import '../../../utils/mixin.less';
+
+.application.sheet.daggerheart.actor.dh-style.party {
+    .tab.notes {
+        padding: 16px 0 4px 15px;
+        .editor-content {
+            scrollbar-gutter: stable;
+            padding-left: 8px;
+            .with-scroll-shadows();
+        }
+    }
+}

styles/less/sheets/actors/party/party-members.less

@@ -4,6 +4,8 @@
 
 .application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers {
     overflow: auto;
+    scrollbar-gutter: stable;
+    .with-scroll-shadows();
 
     .actors-list {
         display: flex;

styles/less/sheets/actors/party/sheet.less

@@ -19,8 +19,8 @@
 .application.sheet.daggerheart.actor.dh-style.party {
     .tab {
         flex: 1;
-        overflow-y: auto;
+        margin-right: 2px;
-        scrollbar-gutter: stable;
+        padding-right: 8px;
 
         &.active {
             overflow: auto;

styles/less/sheets/index.less

@@ -2,36 +2,16 @@
 
 @import './actors/actor-sheet-shared.less';
 
-@import './actors/adversary/actions.less';
+@import './actors/adversary/index.less';
-@import './actors/adversary/header.less';
+@import './actors/character/index.less';
-@import './actors/adversary/sheet.less';
+@import './actors/environment/index.less';
-@import './actors/adversary/sidebar.less';
+@import './actors/party/index.less';
-@import './actors/adversary/effects.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';
-@import './actors/character/loadout.less';
-@import './actors/character/sheet.less';
-@import './actors/character/sidebar.less';
 
 @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 './actors/party/header.less';
-@import './actors/party/party-members.less';
-@import './actors/party/sheet.less';
-@import './actors/party/inventory.less';
-
 @import './items/beastform.less';
 @import './items/class.less';
 @import './items/domain-card.less';

styles/less/utils/mixin.less

@@ -160,3 +160,47 @@
         @destination @length
     );
 }
+
+// Scroll shadows, but only if the browser supports. At the time of writing, this doesn't work on firefox
+@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
+    @property --fade-start {
+        syntax: "<length>";
+        inherits: false;
+        initial-value: 0;
+    }
+
+    @property --fade-end {
+        syntax: "<length>";
+        inherits: false;
+        initial-value: 0;
+    }
+
+    @keyframes scrollfade {
+        0% {
+            --fade-start: 0;
+        }
+        10%, 100% {
+            --fade-start: 10px;
+        }
+        0%, 90% {
+            --fade-end: 10px;
+        }
+        100% {
+            --fade-end: 0;
+        }
+    }
+}
+
+.with-scroll-shadows() {
+    animation: scrollfade;
+    animation-timeline: --scrollfade;
+    scroll-timeline: --scrollfade y;
+    mask-image: linear-gradient(
+        0deg, 
+        transparent 0%, 
+        black var(--fade-end), 
+        black calc(100% - var(--fade-start)), 
+        transparent 100%
+    );
+}
+

templates/sheets/actors/adversary/features.hbs

@@ -1,14 +1,20 @@
 <section class='tab {{tabs.features.cssClass}} {{tabs.features.id}}' data-tab='{{tabs.features.id}}'
     data-group='{{tabs.features.group}}'>
     <div class="feature-section">
-        {{> 'daggerheart.inventory-items'
+        {{#each @root.features as |item|}}
-            title=tabs.features.label
+            {{> 'daggerheart.inventory-item'
-            type='feature'
+                item=item
-            collection=@root.features
+                type='feature'
-            hideContextMenu=true
+                actorType=@root.document.type
-            hideModifyControls=true
+                hideContextMenu=true
-            canCreate=@root.editable
+                hideModifyControls=true
-            showActions=@root.editable
+                showActions=@root.editable
-        }}
+            }}
+        {{/each}}
     </div>
-</section>
+    {{#if @root.editable}}
+        <button data-action="createDoc" data-document-class="Item" data-type="feature" data-tooltip="{{localize 'DOCUMENT.Create' type=(localize 'TYPES.Item.feature')}}">
+            <i class="fa-solid fa-plus icon-button"></i>
+        </button>
+    {{/if}}
+</section>

templates/sheets/actors/adversary/notes.hbs

@@ -3,10 +3,7 @@
     data-tab='{{tabs.notes.id}}'
     data-group='{{tabs.notes.group}}'
 >
-    <fieldset class="fit-height">
+    {{formInput notes.field value=notes.value enriched=notes.enriched class="aaa" toggled=true}}
-        <legend>{{localize tabs.notes.label}}</legend>
-        {{formInput notes.field value=notes.value enriched=notes.enriched toggled=true}}
-    </fieldset>
 
     {{#if (and showAttribution document.system.attribution.artist)}}
         <label class="artist-attribution">{{localize "DAGGERHEART.GENERAL.artistAttribution" artist=document.system.attribution.artist}}</label>

templates/sheets/actors/environment/features.hbs

@@ -4,14 +4,20 @@
     data-group='{{tabs.features.group}}'
 >
     <div class="feature-section">
-        {{> 'daggerheart.inventory-items'
+        {{#each @root.features as |item|}}
-        title=tabs.features.label
+            {{> 'daggerheart.inventory-item'
-        type='feature'
+                item=item
-        collection=@root.features
+                type='feature'
-        hideContextMenu=true
+                actorType=@root.document.type
-        hideModifyControls=true
+                hideContextMenu=true
-        canCreate=@root.editable
+                hideModifyControls=true
-        showActions=@root.editable
+                showActions=@root.editable
-        }}
+            }}
-    </div>
+        {{/each}}
+    </div>    
+    {{#if @root.editable}}
+        <button data-action="createDoc" data-document-class="Item" data-type="feature" data-tooltip="{{localize 'DOCUMENT.Create' type=(localize 'TYPES.Item.feature')}}">
+            <i class="fa-solid fa-plus icon-button"></i>
+        </button>
+    {{/if}}
 </section>

templates/sheets/actors/environment/notes.hbs

@@ -3,10 +3,7 @@
     data-tab='{{tabs.notes.id}}'
     data-group='{{tabs.notes.group}}'
 >
-    <fieldset class="fit-height">
+    {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-        <legend>{{localize tabs.notes.label}}</legend>
-        {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-    </fieldset>
 
     {{#if (and showAttribution document.system.attribution.artist)}}
         <label class="artist-attribution">{{localize "DAGGERHEART.GENERAL.artistAttribution" artist=document.system.attribution.artist}}</label>

templates/sheets/actors/party/notes.hbs

@@ -3,8 +3,5 @@
     data-tab='{{tabs.notes.id}}'
     data-group='{{tabs.notes.group}}'
 >
-    <fieldset class="fit-height">
+    {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-        <legend>{{localize tabs.notes.label}}</legend>
-        {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-    </fieldset>
 </section>