ENH: sheet overflows solved

src/module/actor/character-sheet.js

@@ -33,6 +33,20 @@ export class OseActorSheetCharacter extends ActorSheet {
 
   /* -------------------------------------------- */
 
+  // Override to set resizable initial size
+  async _renderInner(...args) {
+    const html = await super._renderInner(...args);
+    this.form = html[0];
+
+    // Resize resizable classes
+    let resizable = html.find('.resizable');
+    resizable.each((_, el) => {
+      let heightDelta = this.position.height - (this.options.height);
+      el.style.height = `${heightDelta + parseInt(el.dataset.baseSize)}px`;
+    });
+    return html;
+  }
+
   /**
    * Prepare data for rendering the Actor sheet
    * The prepared data object contains both the actor data as well as additional sheet options
@@ -141,4 +155,14 @@ export class OseActorSheetCharacter extends ActorSheet {
     // Handle default listeners last so system listeners are triggered first
     super.activateListeners(html);
   }
+
+  async _onResize(event) {
+    super._onResize(event);
+    let html = $(event.path);
+    let resizable = html.find('.resizable');
+    resizable.each((_, el) => {
+      let heightDelta = this.position.height - (this.options.height);
+      el.style.height = `${heightDelta + parseInt(el.dataset.baseSize)}px`;
+    });
+  }
 }

src/module/actor/monster-sheet.js

@@ -33,6 +33,24 @@ export class OseActorSheetMonster extends ActorSheet {
 
   /* -------------------------------------------- */
 
+  // Override to set resizable initial size
+  async _renderInner(...args) {
+    const html = await super._renderInner(...args);
+    console.log(html);
+    this.form = html[0];
+
+    // Resize resizable classes
+    let resizable = html.find('.resizable');
+    if (resizable.length == 0) {
+      return;
+    }
+    resizable.each((_, el) => {
+      let heightDelta = this.position.height - (this.options.height);
+      el.style.height = `${heightDelta + parseInt(el.dataset.baseSize)}px`;
+    });
+    return html;
+  }
+
   /**
    * Prepare data for rendering the Actor sheet
    * The prepared data object contains both the actor data as well as additional sheet options
@@ -134,4 +152,14 @@ export class OseActorSheetMonster extends ActorSheet {
     // Handle default listeners last so system listeners are triggered first
     super.activateListeners(html);
   }
+
+  async _onResize(event) {
+    super._onResize(event);
+    let html = $(event.path);
+    let resizable = html.find('.resizable');
+    resizable.each((_, el) => {
+      let heightDelta = this.position.height - (this.options.height);
+      el.style.height = `${heightDelta + parseInt(el.dataset.baseSize)}px`;
+    });
+  }
 }

src/scss/actor-base.scss

@@ -135,10 +135,13 @@
         .item {
           .item-image {
             flex: 0 0 24px;
+            height: 24px;
             background-size: cover;
           }
           .item-name {
             line-height: 24px;
+            height: 24px;
+            overflow: hidden;
             h4 {
               text-indent: 4px;
               margin: 0;

src/scss/core.scss

@@ -33,4 +33,8 @@
   a:hover {
     text-shadow: none;
   }
+
+  .resizable {
+    overflow: auto;
+  }
 }

src/templates/actors/partials/character-attributes-tab.html

@@ -76,7 +76,7 @@
         </ul>
     </div>
     {{!-- Skills and abilities --}}
-    <div class="flex3 panel abilities">
+    <div class="flex3 panel abilities resizable" data-base-size="250">
         <div class="panel-title">
             <h4>{{localize 'OSE.panel.abilities'}}</h4>
             <div class="item-controls">
@@ -85,7 +85,7 @@
                 {{/if}}
             </div>
         </div>
-        <ul class="panel-content inventory">
+        <ul class="panel-content inventory resizable" data-base-size="225">
             <div class="">
                 {{#each abilities as |item|}}
                 <li class="item-entry">

src/templates/actors/partials/character-inventory-tab.html

@@ -1,4 +1,4 @@
-<section class="inventory">
+<section class="inventory resizable" data-base-size="320">
   <div class="">
     {{#each inventory as |item|}}
     <li class="item-entry">

src/templates/actors/partials/character-spells-tab.html

@@ -63,7 +63,7 @@
           {{/if}}
       </div>
   </div>
-  <div class="panel-content">
+  <div class="panel-content resizable" data-base-size="230">
     {{#each spells as |item|}}
     <li class="item-entry">
       <div class="item flexrow" data-item-id="{{item._id}}">

src/templates/actors/partials/monster-attributes-tab.html

@@ -49,7 +49,7 @@
                 {{/if}}
             </div>
         </div>
-        <ul class="panel-content inventory">
+        <ul class="panel-content inventory resizable" data-base-size="220">
             <div class="">
                 {{#each abilities as |item|}}
                 <li class="item-entry">
@@ -84,7 +84,7 @@
                 {{/if}}
             </div>
         </div>
-        <ul class="panel-content inventory">
+        <ul class="panel-content inventory resizable" data-base-size="220">
             <div class="">
                 {{#each inventory as |item|}}
                 <li class="item-entry">