fix #4033

Closes #4033

Merge request studip/studip!2900

resources/assets/stylesheets/scss/courseware/blockadder.scss

@@ -136,7 +136,7 @@
 }
 .cw-element-inserter-wrapper {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 4px;
     margin-bottom: 8px;

resources/assets/stylesheets/scss/courseware/toolbar.scss

@@ -14,8 +14,7 @@
         min-height: 100%;
         border: solid thin var(--content-color-40);
         background-color: var(--white);
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden;
         position: relative;
         padding: 0 4px;
         top: 0;
@@ -33,6 +32,11 @@
             right: 0;
         }
 
+        .cw-toolbar-tool-content {
+            overflow-y: auto;
+            padding-right: 8px;
+        }
+
         .cw-toolbar-blocks {
             .input-group.files-search {
                 &.search {
@@ -96,6 +100,12 @@
             }
 
         }
+
+        .cw-toolbar-clipboard {
+            .cw-collapsible {
+                margin-bottom: 4px;
+            }
+        }
     }
     .cw-toolbar-folded-wrapper {
         display: flex;
@@ -124,6 +134,7 @@
 
         &.cw-toolbar-button-toggle {
             text-align: end;
+            flex-grow: 1;
         }
 
         &.active {
@@ -142,7 +153,7 @@
     .cw-toolbar-tools.hd {
         .cw-toolbar-button-wrapper {
             .cw-toolbar-button {
-                width: 128px;
+                min-width: 110px;
                 padding: 2px 16px 0 16px;
                 &.cw-toolbar-button-toggle {
                     text-align: end;

resources/vue/components/courseware/toolbar/CoursewareToolbar.vue

@@ -2,7 +2,7 @@
     <div class="cw-toolbar-wrapper">
         <div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle">
             <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd }">
-                <div class="cw-toolbar-button-wrapper">
+                <div id="cw-toolbar-nav" class="cw-toolbar-button-wrapper">
                     <button
                         class="cw-toolbar-button"
                         :class="{ active: activeTool === 'blockAdder' }"
@@ -35,9 +35,19 @@
                         <studip-icon shape="arr_2right" :size="24" />
                     </button>
                 </div>
-                <courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" />
-                <courseware-toolbar-containers v-if="activeTool === 'containerAdder'" />
-                <courseware-toolbar-clipboard v-if="activeTool === 'clipboard'" />
+                <div class="cw-toolbar-tool-wrapper">
+                    <CoursewareToolbarBlocks
+                        v-if="activeTool === 'blockAdder'"
+                        :toolbarContentHeight="toolbarContentHeight"
+                    />
+                    <CoursewareToolbarContainers
+                        v-if="activeTool === 'containerAdder'"
+                    />
+                    <CoursewareToolbarClipboard
+                        v-if="activeTool === 'clipboard'"
+                        :toolbarContentHeight="toolbarContentHeight"
+                    />
+                </div>
             </div>
             <div v-else class="cw-toolbar-folded-wrapper">
                 <button
@@ -97,20 +107,26 @@ export default {
             toolbarActive: 'toolbarActive',
             hideEditLayout: 'hideEditLayout',
         }),
-        toolbarStyle() {
-            const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top'));
+        scrollTopStyles() {
+            return window.getComputedStyle(document.getElementById('scroll-to-top'));
+        },
+        toolbarHeight() {
             const scrollTopHeight =
-                parseInt(scrollTopStyles['height'], 10) +
-                parseInt(scrollTopStyles['padding-top'], 10) +
-                parseInt(scrollTopStyles['padding-bottom'], 10) +
-                parseInt(scrollTopStyles['margin-bottom'], 10);
-            let height = parseInt(
+                parseInt(this.scrollTopStyles['height'], 10) +
+                parseInt(this.scrollTopStyles['padding-top'], 10) +
+                parseInt(this.scrollTopStyles['padding-bottom'], 10) +
+                parseInt(this.scrollTopStyles['margin-bottom'], 10);
+            return parseInt(
                 Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
             );
-
+        },
+        toolbarContentHeight() {
+            return this.toolbarHeight - 55;
+        },
+        toolbarStyle() {
             return {
-                height: height + 'px',
-                minHeight: height + 'px',
+                height: this.toolbarHeight + 'px',
+                minHeight: this.toolbarHeight + 'px',
                 top: this.toolbarTop + 'px',
             };
         },

resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue

 <template>
     <div class="cw-toolbar-blocks">
+        <div id="cw-toolbar-blocks-header" class="cw-toolbar-tool-header">
             <form @submit.prevent="loadSearch">
                 <div class="input-group files-search search cw-block-search">
                     <input
@@ -46,7 +47,8 @@
                     {{ category.title }}
                 </button>
             </div>
-
+        </div>
+        <div class="cw-toolbar-tool-content" :style="toolContentStyle">
             <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
                 <draggable
                     v-if="filteredBlockTypes.length > 0"
@@ -81,6 +83,7 @@
                 mood="pointing"
             />
         </div>
+    </div>
 </template>
 
 <script>
@@ -99,6 +102,12 @@ export default {
         CoursewareCompanionBox,
         draggable,
     },
+    props: {
+        toolbarContentHeight: {
+            type: Number,
+            required: true,
+        },
+    },
     data() {
         return {
             searchInput: '',
@@ -132,6 +141,13 @@ export default {
                 { title: this.$gettext('Biografie'), type: 'biography' },
             ];
         },
+        toolContentStyle() {
+            const height = this.toolbarContentHeight - 115;
+
+            return {
+                height: height + 'px',
+            };
+        },
     },
     methods: {
         ...mapActions({

resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue

 <template>
-    <div class="cw-toolbar-clipboard">
+    <div class="cw-toolbar-clipboard cw-toolbar-tool-content" :style="toolContentStyle">
         <courseware-collapsible-box :title="$gettext('Blöcke')" :open="clipboardBlocks.length > 0">
             <template v-if="clipboardBlocks.length > 0">
                 <div class="cw-element-inserter-wrapper">
@@ -101,7 +101,12 @@ export default {
         StudipDialog,
         draggable,
     },
-
+    props: {
+        toolbarContentHeight: {
+            type: Number,
+            required: true,
+        },
+    },
     data() {
         return {
             showDeleteClipboardDialog: false,
@@ -143,6 +148,11 @@ export default {
             }
             return '';
         },
+        toolContentStyle() {
+            return {
+                height: this.toolbarContentHeight + 'px',
+            };
+        },
     },
     methods: {
         ...mapActions({