From f7e690e7002808eaa0631ea4251e06efec4141bc Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Fri, 9 May 2025 16:51:58 +0300
Subject: [PATCH] Fix dynamic resizing #1831

---
 www/common/common-ui-elements.js | 14 ++++++++++++++
 www/form/inner.js                | 12 ++++--------
 www/kanban/inner.js              | 18 ++----------------
 www/profile/inner.js             | 20 +++++++++-----------
 4 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index a2fb77a5b..02a351a10 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1374,6 +1374,20 @@ define([
     
         return $button;
     };
+    UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
+        let toggleButton = null;
+        if (Util.isSmallScreen()) {
+            if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
+                toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
+                $(markdownEditorWrapper).append(toggleButton);
+            }
+            $(toolbar).hide();
+        } else {
+            $(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
+            $(toolbar).show();
+        }
+        return toggleButton; // May return null if not created
+    };
     
 
     /*  Create a usage bar which keeps track of how much storage space is used
diff --git a/www/form/inner.js b/www/form/inner.js
index abb0a8878..d30cc744d 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1127,14 +1127,10 @@ define([
                             });
                             var toggleRow = h('div.cp-markdown-toggle-row');
                             $(block).prepend(markdownTb.toolbar);
-                            if(Util.isSmallScreen()) {
-                                var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
-                                $(toggleRow).append(toggleButton);
-                                $(markdownTb.toolbar).hide();
-                            }
-                            else {
-                                $(markdownTb.toolbar).show();
-                            }
+                            UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+                            $(window).on('resize', function() {
+                                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+                            });
                             $(block).prepend(toggleRow);
                             cm.configureTheme(APP.common, function () {});
                         }
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 656cb72f1..c746cb74c 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -174,20 +174,6 @@ define([
         }
         _updateBoardsThrottle(framework, kanban, boards);
     };
-
-    var updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
-        if (Util.isSmallScreen()) {
-            if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
-                var toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
-                $(markdownEditorWrapper).append(toggleButton);
-            }
-            $(toolbar).hide();
-        } else {
-            $(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
-            $(toolbar).show();
-        }
-    };
-    
     var editModal;
     var PROPERTIES = ['title', 'body', 'tags', 'color'];
     var BOARD_PROPERTIES = ['title', 'color'];
@@ -299,9 +285,9 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
-        updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
         $(window).on('resize', function() {
-            updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+            UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
         });
         $(markdownTb.toolbar).on('keydown', function (e) {
             if (e.which === 27) { // Escape key
diff --git a/www/profile/inner.js b/www/profile/inner.js
index bb6c08a0f..50608fe14 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -540,19 +540,17 @@ define([
 
         var markdownTb = common.createMarkdownToolbar(editor);
         var toggleRow = h('div.cp-markdown-toggle-row');
-        if(Util.isSmallScreen()) {
-            var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
-            $(toggleRow).append(toggleButton);
-            $(markdownTb.toolbar).hide();
-            $(toggleButton).removeClass('btn-toolbar-alt');
-            $(toggleButton).append('<span class="toggle-label">Show tools</span>');
-        }
-        else {
-            $(markdownTb.toolbar).show();
-        }
+        var toggleButton = UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+        $(window).on('resize', function() {
+            UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+        });
+        $(toggleButton).removeClass('btn-toolbar-alt');
+        $(toggleButton).append('<span class="toggle-label">Show tools</span>');
         $(code).prepend(markdownTb.toolbar);
         $(code).prepend(toggleRow); 
-
+        if(!Util.isSmallScreen()) {
+            $(markdownTb.toolbar).show();
+        }
         $(button).click(function () {
             $(code).show();
             APP.editor.refresh();