From c420cf0c4a99211c9b5355dd53db40983d217842 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Wed, 16 Apr 2025 07:26:31 +0000
Subject: CW: Text-Block (Halbe-Breite) schneidet den CKEditor ab

Closes #5403

Merge request studip/studip!4106
---
 .../components/courseware/blocks/CoursewareTextBlock.vue   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/vue/components/courseware/blocks/CoursewareTextBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTextBlock.vue
index c000371..dd8bd74 100644
--- a/resources/vue/components/courseware/blocks/CoursewareTextBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareTextBlock.vue
@@ -14,7 +14,9 @@
                 <section class="formatted-content ck-content" v-html="currentText" ref="content"></section>
             </template>
             <template v-if="canEdit" #edit>
-                <ckeditor :editor="editor" v-model="currentText" :config="editorConfig" @ready="onReady"></ckeditor>
+                <div ref="ckeditor">
+                    <ckeditor :editor="editor" v-model="currentText" :config="editorConfig" @ready="onReady"></ckeditor>
+                </div>
             </template>
             <template #info>{{ $gettext('Informationen zum Text-Block') }}</template>
         </courseware-default-block>
@@ -74,10 +76,13 @@ export default {
         initCurrent() {
             this.currentText = this.text;
             this.loadMathjax();
+
+            window.addEventListener('resize', this.fixPanelSize);
         },
         onReady(editor) {
             editor.ui.viewportOffset = { top: this.ckeToolbarTop };
             editor.ui.update();
+            this.fixPanelSize();
         },
         async storeText() {
             let attributes = this.block.attributes;
@@ -109,6 +114,13 @@ export default {
                     });
             }
         },
+        fixPanelSize() {
+            const ckeElement = this.$refs.ckeditor.querySelector('.ck-editor');
+            const dropdownPanel = ckeElement?.querySelector('.ck-toolbar__grouped-dropdown .ck-dropdown__panel');
+            if (dropdownPanel) {
+                dropdownPanel.style.maxWidth = `${ckeElement.clientWidth}px`;
+            }
+        }
     },
 };
 </script>
-- 
cgit v1.0