HFP-3956 Add padding to container if has scrollbar

otacke · Aug 6, 2024 · 78b6ff8 · 78b6ff8
1 parent d1c9a70
commit 78b6ff8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/scripts/h5p-crossword-input.js b/src/scripts/h5p-crossword-input.js
@@ -647,6 +647,9 @@ export default class CrosswordInput {
   resize(params = {}) {
     if (params.height) {
       this.content.style.setProperty('--h5p-crossword-input-container-height', `${params.height}px`);
+      this.content.classList.toggle(
+        'has-scrollbar', this.content.scrollHeight > this.content.clientHeight
+      );
     }
 
     if (this.extraClueInstance) {

diff --git a/src/styles/h5p-crossword.scss b/src/styles/h5p-crossword.scss
@@ -252,6 +252,10 @@
     height: var(--h5p-crossword-input-container-height);
     overflow-y: auto;
     width: 50%;
+
+    &.has-scrollbar {
+      padding-right: 1rem;
+    }
   }
 
   .h5p-crossword-input-fields-group {