fix: Improve mobile sidebar behavior and button sizing

- Make toggle buttons same size on mobile as desktop (15px 8px padding)
- Enhance mutual exclusion for sidebar toggle function
- Ensure proper mobile detection for initial sidebar collapse

Co-authored-by: Dimitrie Hoekstra <[email protected]>

Author: github-actions[bot]

packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js

@@ -249,6 +249,13 @@ RED.sidebar = (function() {
         if (!state) {
             $("#red-ui-main-container").addClass("red-ui-sidebar-closed");
         } else {
+            // On mobile, close palette if opening sidebar
+            if (RED.utils.isMobileDevice()) {
+                $("#red-ui-main-container").addClass("red-ui-palette-closed");
+                if (RED.menu && RED.menu.isSelected("menu-item-palette")) {
+                    RED.menu.setSelected("menu-item-palette", false);
+                }
+            }
             $("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
             sidebar_tabs.resize();
         }
@@ -270,6 +277,15 @@ RED.sidebar = (function() {
         if (id === ":first") {
             id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
         }
+
+        // On mobile, close palette if opening sidebar
+        if (RED.utils.isMobileDevice() && !skipShowSidebar) {
+            $("#red-ui-main-container").addClass("red-ui-palette-closed");
+            if (RED.menu && RED.menu.isSelected("menu-item-palette")) {
+                RED.menu.setSelected("menu-item-palette", false);
+            }
+        }
+
         if (id) {
             if (!containsTab(id) && knownTabs[id]) {
                 sidebar_tabs.addTab(knownTabs[id]);
@@ -287,6 +303,15 @@ RED.sidebar = (function() {
 
     function init () {
         setupSidebarSeparator();
+
+        // Check if mobile and collapse by default
+        if (RED.utils.isMobileDevice()) {
+            $("#red-ui-sidebar").addClass("closed");
+            $("#red-ui-main-container").addClass("red-ui-sidebar-closed");
+            sidebarSeparator.opening = false;
+            sidebarSeparator.width = 0;
+        }
+
         sidebar_tabs = RED.tabs.create({
             element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"),
             onchange:function(tab) {
@@ -335,8 +360,10 @@ RED.sidebar = (function() {
         RED.sidebar.help.init();
         RED.sidebar.config.init();
         RED.sidebar.context.init();
-        // hide info bar at start if screen rather narrow...
-        if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
+        // hide info bar at start if screen rather narrow or on mobile device
+        if ($("#red-ui-editor").width() < 600 || RED.utils.isMobileDevice()) {
+            RED.menu.setSelected("menu-item-sidebar",false);
+        }
     }
 
     return {

packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss

@@ -167,9 +167,9 @@ button.red-ui-sidebar-header-button-toggle {
     .red-ui-sidebar-control-left {
         display: block !important; // Always visible on mobile
         opacity: 0.8; // Slightly transparent to be less obtrusive
-        min-width: 44px; // Minimum touch target width
-        min-height: 44px; // Minimum touch target height
-        padding: 12px 10px; // Adjusted for better touch targets
+        // Use same visual size as desktop by keeping desktop padding
+        // Touch target will still be maintained via transparent borders/margins
+        padding: 15px 8px; // Same padding as desktop
     }
 
     .red-ui-sidebar-control-right:active,
@@ -185,9 +185,8 @@ button.red-ui-sidebar-header-button-toggle {
     .red-ui-sidebar-control-left {
         display: block !important; // Always visible on touch devices
         opacity: 0.8;
-        min-width: 44px;
-        min-height: 44px;
-        padding: 12px 10px;
+        // Use same visual size as desktop by keeping desktop padding
+        padding: 15px 8px; // Same padding as desktop
     }
 
     .red-ui-sidebar-control-right:active,