Remove fieldset from top level notes (#2048)

styles/less/global/global.less

@@ -12,6 +12,9 @@
 }
 
 .daggerheart.dh-style {
+    /** Not an actual scrollbar width (it can't be configured on all browsers) but actually a compensation value for scrollbar gutter purposes */
+    --scrollbar-width: 10px;
+
     * {
         scrollbar-width: thin;
         scrollbar-color: light-dark(@dark-blue, @golden) transparent;

styles/less/global/prose-mirror.less

@@ -1,5 +1,6 @@
 @import '../utils/colors.less';
 @import '../utils/fonts.less';
+@import '../utils/mixin.less';
 
 .application.daggerheart {
     prose-mirror {
@@ -12,6 +13,7 @@
             background-color: transparent;
         }
         .editor-content {
+            .with-scroll-shadows();
             h1 {
                 font-size: var(--font-size-32);
             }
@@ -42,7 +44,7 @@
             ul {
                 list-style: disc;
             }
-        }       
+        }
         // Fixes centering and makes it not render over scrollbar
         &:hover button.toggle:enabled {
             display: flex;

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

@@ -54,6 +54,37 @@
         }
     }
 
+    .tab.notes.active {
+        padding: 0;
+        margin: 0;
+        margin-top: -10px; // will be removed once tab-navigation bottom margin is removed on all actor sheets
+        scrollbar-gutter: unset;
+
+        // Add padding around top level level prosemirrors used for note tabs
+        > prose-mirror {
+            @right-padding: calc(16px - var(--scrollbar-width));
+            .editor-content {
+                scrollbar-gutter: stable;
+                padding-right: @right-padding;
+            }
+            &.inactive {
+                button.toggle {
+                    top: 16px;
+                }
+                .editor-content {
+                    padding: 16px @right-padding 4px 16px;
+                }
+            }
+            &.active {
+                padding: 8px 0 4px 16px;
+            }
+        }
+
+        .artist-attribution {
+            padding-left: 16px;
+        }
+    }
+
     .search-section {
         display: flex;
         gap: 10px;

templates/sheets/actors/adversary/notes.hbs

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

templates/sheets/actors/environment/notes.hbs

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

templates/sheets/actors/npc/notes.hbs

@@ -1,7 +1,7 @@
 <section
-    class='tab {{tabs.notes.cssClass}} {{tabs.notes.id}}'
-    data-tab='{{tabs.notes.id}}'
-    data-group='{{tabs.notes.group}}'
+    class="tab {{tabs.notes.cssClass}} {{tabs.notes.id}}"
+    data-tab="{{tabs.notes.id}}"
+    data-group="{{tabs.notes.group}}"
 >
     {{formInput notes.field value=notes.value enriched=notes.enriched toggled=true}}
 

templates/sheets/actors/party/notes.hbs

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