Revert "fix #4033"

This reverts commit 8dae601a.

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

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

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

@@ -14,7 +14,8 @@
         min-height: 100%;
         border: solid thin var(--content-color-40);
         background-color: var(--white);
-        overflow: hidden;
+        overflow-y: auto;
+        overflow-x: hidden;
         position: relative;
         padding: 0 4px;
         top: 0;
@@ -32,11 +33,6 @@
             right: 0;
         }
 
-        .cw-toolbar-tool-content {
-            overflow-y: auto;
-            padding-right: 8px;
-        }
-
         .cw-toolbar-blocks {
             .input-group.files-search {
                 &.search {
@@ -100,12 +96,6 @@
             }
 
         }
-
-        .cw-toolbar-clipboard {
-            .cw-collapsible {
-                margin-bottom: 4px;
-            }
-        }
     }
     .cw-toolbar-folded-wrapper {
         display: flex;
@@ -134,7 +124,6 @@
 
         &.cw-toolbar-button-toggle {
             text-align: end;
-            flex-grow: 1;
         }
 
         &.active {
@@ -153,7 +142,7 @@
     .cw-toolbar-tools.hd {
         .cw-toolbar-button-wrapper {
             .cw-toolbar-button {
-                min-width: 110px;
+                width: 128px;
                 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 id="cw-toolbar-nav" class="cw-toolbar-button-wrapper">
+                <div class="cw-toolbar-button-wrapper">
                     <button
                         class="cw-toolbar-button"
                         :class="{ active: activeTool === 'blockAdder' }"
@@ -35,19 +35,9 @@
                         <studip-icon shape="arr_2right" :size="24" />
                     </button>
                 </div>
-                <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>
+                <courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" />
+                <courseware-toolbar-containers v-if="activeTool === 'containerAdder'" />
+                <courseware-toolbar-clipboard v-if="activeTool === 'clipboard'" />
             </div>
             <div v-else class="cw-toolbar-folded-wrapper">
                 <button
@@ -107,26 +97,20 @@ export default {
             toolbarActive: 'toolbarActive',
             hideEditLayout: 'hideEditLayout',
         }),
-        scrollTopStyles() {
-            return window.getComputedStyle(document.getElementById('scroll-to-top'));
-        },
-        toolbarHeight() {
+        toolbarStyle() {
+            const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top'));
             const scrollTopHeight =
-                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(
+                parseInt(scrollTopStyles['height'], 10) +
+                parseInt(scrollTopStyles['padding-top'], 10) +
+                parseInt(scrollTopStyles['padding-bottom'], 10) +
+                parseInt(scrollTopStyles['margin-bottom'], 10);
+            let height = parseInt(
                 Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
             );
-        },
-        toolbarContentHeight() {
-            return this.toolbarHeight - 55;
-        },
-        toolbarStyle() {
+
             return {
-                height: this.toolbarHeight + 'px',
-                minHeight: this.toolbarHeight + 'px',
+                height: height + 'px',
+                minHeight: height + '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
@@ -47,8 +46,7 @@
                 {{ 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"
@@ -83,7 +81,6 @@
             mood="pointing"
         />
     </div>
-    </div>
 </template>
 
 <script>
@@ -102,12 +99,6 @@ export default {
         CoursewareCompanionBox,
         draggable,
     },
-    props: {
-        toolbarContentHeight: {
-            type: Number,
-            required: true,
-        },
-    },
     data() {
         return {
             searchInput: '',
@@ -141,13 +132,6 @@ 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 cw-toolbar-tool-content" :style="toolContentStyle">
+    <div class="cw-toolbar-clipboard">
         <courseware-collapsible-box :title="$gettext('Blöcke')" :open="clipboardBlocks.length > 0">
             <template v-if="clipboardBlocks.length > 0">
                 <div class="cw-element-inserter-wrapper">
@@ -101,12 +101,7 @@ export default {
         StudipDialog,
         draggable,
     },
-    props: {
-        toolbarContentHeight: {
-            type: Number,
-            required: true,
-        },
-    },
+
     data() {
         return {
             showDeleteClipboardDialog: false,
@@ -148,11 +143,6 @@ export default {
             }
             return '';
         },
-        toolContentStyle() {
-            return {
-                height: this.toolbarContentHeight + 'px',
-            };
-        },
     },
     methods: {
         ...mapActions({