From b1451ad367d998650d45f064efffb3cf737767e9 Mon Sep 17 00:00:00 2001
From: LucasC <lucas.charpentier@xwiki.com>
Date: Wed, 7 May 2025 11:19:31 +0200
Subject: [PATCH 1/6] XWIKI-12824: Add buttons to hide/show panels * Changed
 the nature of the hint fgor panel toggles. * Added controls on the standalone
 edition sheet. * Made sure everything that worked with rightPanels also works
 with editPanels.

---
 .../src/main/resources/flamingo/flamingo.js            |  2 +-
 .../src/main/resources/flamingo/less/layout.less       | 10 ++++++++--
 .../src/main/resources/templates/editpanels.vm         |  9 ++++++++-
 .../src/main/resources/templates/leftpanels.vm         |  2 +-
 .../src/main/resources/templates/rightpanels.vm        |  2 +-
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
index 9a817cd62c58..e14f6e6a30bb 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
@@ -174,7 +174,7 @@ require(['jquery', 'jquery-ui'], function($) {
     // We set the one we want when displayed in the flex layout.
     document.body.style.setProperty('--panel-column-' + side + '-width', ui.size.width + 'px');
   };
-  $("#rightPanels").resizable({
+  $("#rightPanels, #editPanels").resizable({
     handles: 'w',
     resize: resizeCustomFunction.bind(null, right)
   });
diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
index 487e639a61d3..b90d5c05e412 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
@@ -86,7 +86,7 @@
     -/**/-panel-column-left-width: 0;
     -/**/-panel-column-right-width: 0;
 
-    & #leftPanels, & #rightPanels {
+    & #leftPanels, & #rightPanels, & #editPanels {
       display: none;
     }
   }
@@ -205,6 +205,7 @@ again or the page is reloaded (because the toggler is hidden until then). */
   #rightPanelsToggle[aria-expanded="false"],
   #contentcontainer:hover #contentcolumn:not(:hover) ~ #rightPanelsToggle,
   #rightPanelsToggle:has(+ #rightPanels:focus-within),
+  #rightPanelsToggle:has(+ #editPanels:focus-within),
   #rightPanelsToggle:hover, #rightPanelsToggle:focus {
     opacity: 1;
   }
@@ -244,6 +245,7 @@ body#body #leftPanelsToggle {
 
 /* Resize handles */
 #rightPanels > .ui-resizable-w,
+#editPanels > .ui-resizable-w,
 #leftPanels > .ui-resizable-e {
   position: absolute;
   top: 0;
@@ -270,7 +272,7 @@ body#body #leftPanelsToggle {
   background-image: linear-gradient( 90deg, transparent 0%, transparent 90%, @navbar-default-bg 90%, @navbar-default-bg 90%);
 }
 
-#rightPanels > .ui-resizable-w {
+#rightPanels > .ui-resizable-w, #editPanels > .ui-resizable-w {
   left: 0;
   /* We want the click zone to be large, but the display to be discreete. 
     90% of the button is transparent and the 10% on the left are highlighted on hover. */
@@ -281,6 +283,10 @@ body#body #leftPanelsToggle {
 #rightPanels > .ui-resizable-w:hover,
 #rightPanels > .ui-resizable-w:active,
 #rightPanels.ui-resizable-resizing > .ui-resizable-w,
+#editPanels > .ui-resizable-w:focus,
+#editPanels > .ui-resizable-w:hover,
+#editPanels > .ui-resizable-w:active,
+#editPanels.ui-resizable-resizing > .ui-resizable-w,
 #leftPanels > .ui-resizable-e:focus,
 #leftPanels > .ui-resizable-e:hover,
 #leftPanels > .ui-resizable-e:active,
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm
index 11ac79f504a5..2cc0d63e774b 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm
@@ -35,6 +35,11 @@
   #set ($editorPanels = $editorPanelsHistory)
 #end
 #if ($!editorPanels != '')
+  ## Similar to the toggle defined in rightpanels.vm
+  <button id="rightPanelsToggle" class="btn btn-default" title="$escapetool.xml($services.localization.render('panels.column.right.toggle.hint'))">
+    $services.icon.renderHTML('caret-right')
+    <span class="sr-only">$services.localization.render('panels.column.right.toggle.hint')</span>
+  </button>
   #set ($editorPanels = $editorPanels.split(','))
   <div id="editPanels" class="panels editor">
 
@@ -57,7 +62,9 @@
       $services.rendering.render($panelUIExtension.execute(), "xhtml/1.0")
     #end
   #end
-
+  ## Similar to the resize handle defined in rightpanels.vm
+  <span role="button" tabindex="0" class="ui-resizable-handle ui-resizable-w"
+       title="$escapetool.xml($services.localization.render('panels.column.right.resizeHandle.hint'))"></span>
   </div>
 #end
 #end
\ No newline at end of file
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/leftpanels.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/leftpanels.vm
index f1bdfc16f353..996e8d6a1efe 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/leftpanels.vm
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/leftpanels.vm
@@ -21,7 +21,7 @@
 #if(!$request.getParameter("forceLeftPanels"))
   <button id="leftPanelsToggle" class="btn btn-default" title="$escapetool.xml($services.localization.render('panels.column.left.toggle.hint'))">
     $services.icon.renderHTML('caret-right')
-    <div class="sr-only">$services.localization.render('panels.column.left.toggle.hint')</div>
+    <span class="sr-only">$services.localization.render('panels.column.left.toggle.hint')</span>
   </button>
 #end
 <div id="leftPanels" class="panels left panel-width-$!{leftPanelsWidth}"#if($showLeftPanels != "1" && $request.getParameter("forceLeftPanels")) style="display: none;"#end>
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/rightpanels.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/rightpanels.vm
index 706794137602..dfb0ecc2a4b4 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/rightpanels.vm
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/rightpanels.vm
@@ -22,7 +22,7 @@
 #if(!$request.getParameter("forceRightPanels"))
   <button id="rightPanelsToggle" class="btn btn-default" title="$escapetool.xml($services.localization.render('panels.column.right.toggle.hint'))">
     $services.icon.renderHTML('caret-right')
-    <div class="sr-only">$services.localization.render('panels.column.right.toggle.hint')</div>
+    <span class="sr-only">$services.localization.render('panels.column.right.toggle.hint')</span>
   </button>
 #end
 <div id="rightPanels" class="panels right panel-width-$!{rightPanelsWidth}"#if($showRightPanels != "1" && $request.getParameter("forceRightPanels")) style="display: none;"#end>

From cecaf3b85b46d0110f6f06bef7cf5772d570e74d Mon Sep 17 00:00:00 2001
From: LucasC <lucas.charpentier@xwiki.com>
Date: Wed, 7 May 2025 14:22:20 +0200
Subject: [PATCH 2/6] XWIKI-12824: Add buttons to hide/show panels * Fixed the
 solution for the edit button. It triggered the form unexpectedly... * Updated
 the styles to keep them clear * Updated the visibility of panels to always be
 shown when the device has not enough width.

---
 .../src/main/resources/flamingo/flamingo.js   |  2 +-
 .../main/resources/flamingo/less/layout.less  | 49 ++++++++++---------
 .../main/resources/templates/editpanels.vm    |  5 +-
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
index e14f6e6a30bb..9a817cd62c58 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
@@ -174,7 +174,7 @@ require(['jquery', 'jquery-ui'], function($) {
     // We set the one we want when displayed in the flex layout.
     document.body.style.setProperty('--panel-column-' + side + '-width', ui.size.width + 'px');
   };
-  $("#rightPanels, #editPanels").resizable({
+  $("#rightPanels").resizable({
     handles: 'w',
     resize: resizeCustomFunction.bind(null, right)
   });
diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
index b90d5c05e412..652d06bfa86e 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
@@ -39,7 +39,7 @@
     padding-right: ~"calc(var(--grid-gutter-width) / 2)";
   }
 
-  & #rightPanels, & #editPanels {
+  & #rightPanels {
     order: 3;
     width: ~"var(--panel-column-right-width)";
     padding-left: ~"calc(var(--grid-gutter-width) / 2)";
@@ -51,10 +51,14 @@
      We add a HIDDEN block in between the two dashes. With the LESS4J lexer, inline comments are good for this.
      Once this file is migrated to native CSS, this hack can be removed. */
   &.hideleft {
-    -/**/-panel-column-left-width: 0;
-    
-    & #leftPanels {
-      display: none;
+    /* We hide panels only when the screen is small enough.
+        Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. */
+    @media (min-width: @screen-md-min) {
+      -/**/-panel-column-left-width: 0;
+
+      & #leftPanels {
+        display: none;
+      }
     }
   }
 
@@ -67,10 +71,14 @@
   }
 
   &.hideright {
-    -/**/-panel-column-right-width: 0;
+    /* We hide panels only when the screen is small enough.
+        Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. */
+    @media (min-width: @screen-md-min) {
+      -/**/-panel-column-right-width: 0;
 
-    & #rightPanels {
-      display: none;
+      & #rightPanels {
+        display: none;
+      }
     }
   }
 
@@ -83,11 +91,15 @@
   }
 
   &.hidelefthideright {
-    -/**/-panel-column-left-width: 0;
-    -/**/-panel-column-right-width: 0;
-
-    & #leftPanels, & #rightPanels, & #editPanels {
-      display: none;
+    /* We hide panels only when the screen is small enough.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. */
+    @media (min-width: @screen-md-min) {
+      -/**/-panel-column-left-width: 0;
+      -/**/-panel-column-right-width: 0;
+  
+      & #leftPanels, & #rightPanels {
+        display: none;
+      }
     }
   }
 
@@ -157,8 +169,7 @@
   resize: vertical;
 }
 
-.main, #editcolumn,
-#leftPanels, #rightPanels, #editPanels {
+.main, #editcolumn, #leftPanels, #rightPanels {
   position: relative;
   padding-top: (@grid-gutter-width / 2);
   padding-bottom: (@grid-gutter-width / 2);
@@ -205,7 +216,6 @@ again or the page is reloaded (because the toggler is hidden until then). */
   #rightPanelsToggle[aria-expanded="false"],
   #contentcontainer:hover #contentcolumn:not(:hover) ~ #rightPanelsToggle,
   #rightPanelsToggle:has(+ #rightPanels:focus-within),
-  #rightPanelsToggle:has(+ #editPanels:focus-within),
   #rightPanelsToggle:hover, #rightPanelsToggle:focus {
     opacity: 1;
   }
@@ -245,7 +255,6 @@ body#body #leftPanelsToggle {
 
 /* Resize handles */
 #rightPanels > .ui-resizable-w,
-#editPanels > .ui-resizable-w,
 #leftPanels > .ui-resizable-e {
   position: absolute;
   top: 0;
@@ -272,7 +281,7 @@ body#body #leftPanelsToggle {
   background-image: linear-gradient( 90deg, transparent 0%, transparent 90%, @navbar-default-bg 90%, @navbar-default-bg 90%);
 }
 
-#rightPanels > .ui-resizable-w, #editPanels > .ui-resizable-w {
+#rightPanels > .ui-resizable-w {
   left: 0;
   /* We want the click zone to be large, but the display to be discreete. 
     90% of the button is transparent and the 10% on the left are highlighted on hover. */
@@ -283,10 +292,6 @@ body#body #leftPanelsToggle {
 #rightPanels > .ui-resizable-w:hover,
 #rightPanels > .ui-resizable-w:active,
 #rightPanels.ui-resizable-resizing > .ui-resizable-w,
-#editPanels > .ui-resizable-w:focus,
-#editPanels > .ui-resizable-w:hover,
-#editPanels > .ui-resizable-w:active,
-#editPanels.ui-resizable-resizing > .ui-resizable-w,
 #leftPanels > .ui-resizable-e:focus,
 #leftPanels > .ui-resizable-e:hover,
 #leftPanels > .ui-resizable-e:active,
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm
index 2cc0d63e774b..77d76d88da03 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm
@@ -36,12 +36,13 @@
 #end
 #if ($!editorPanels != '')
   ## Similar to the toggle defined in rightpanels.vm
-  <button id="rightPanelsToggle" class="btn btn-default" title="$escapetool.xml($services.localization.render('panels.column.right.toggle.hint'))">
+  <button id="rightPanelsToggle" class="btn btn-default" 
+  title="$escapetool.xml($services.localization.render('panels.column.right.toggle.hint'))" type="button">
     $services.icon.renderHTML('caret-right')
     <span class="sr-only">$services.localization.render('panels.column.right.toggle.hint')</span>
   </button>
   #set ($editorPanels = $editorPanels.split(','))
-  <div id="editPanels" class="panels editor">
+  <div id="rightPanels" class="panels editor">
 
   ## Convert the list of panels to panel (UIExtension) IDs
   #set ($panelIDList = [])

From 12cdc694892908070b340e84934ad1bc0ad93011 Mon Sep 17 00:00:00 2001
From: LucasC <lucas.charpentier@xwiki.com>
Date: Wed, 7 May 2025 14:41:14 +0200
Subject: [PATCH 3/6] XWIKI-12824: Add buttons to hide/show panels * Fixed the
 unexpected side margins in mobile mode. * Prevented resetting preferences for
 panel width when passing by a page without panels.

---
 .../src/main/resources/flamingo/flamingo.js           |  7 ++++++-
 .../src/main/resources/flamingo/less/layout.less      | 11 +++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
index 9a817cd62c58..f42f5f579aa1 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
@@ -190,6 +190,9 @@ require(['jquery', 'jquery-ui'], function($) {
       return valueIsSimilarToDefault(document.body.style.getPropertyValue('--panel-column-' + side + '-width'), side);
     };
     let updateLocalStorageValueForSide = function (side) {
+      // If the panel is not here, do not take any action on local storage.
+      // The user cannot act on or view the width preference, it should not be updated.
+      if($( '#' + side + 'Panels' ).length === 0) return;
       // We only update the local storage when the last value is different enough from the default value.
       // This is important to keep this as long as we don't have a proper UI to reset the panel column size.
       // IMO it makes sense to keep it even when we eventually have this reset UI.
@@ -197,7 +200,9 @@ require(['jquery', 'jquery-ui'], function($) {
         localStorage.setItem(localStoragePrefix + side,
           document.body.style.getPropertyValue('--panel-column-' + side + '-width'));
       } else {
-        // If the values are similar, we remove whatever was stored in the localStorage.
+        // If the values are similar and the panel is actually here, we remove whatever was stored in the localStorage.
+        // The panels are not in the DOM if: it's deactivated for everyone by admins or this page layout doesn't contain
+        // panels.
         localStorage.removeItem(localStoragePrefix + side);
       }
     };
diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
index 652d06bfa86e..82a9b1aba3cb 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
@@ -36,13 +36,11 @@
   & #leftPanels {
     order: 1;
     width: ~"var(--panel-column-left-width)";
-    padding-right: ~"calc(var(--grid-gutter-width) / 2)";
   }
 
   & #rightPanels {
     order: 3;
     width: ~"var(--panel-column-right-width)";
-    padding-left: ~"calc(var(--grid-gutter-width) / 2)";
   }
   
   /* Depending on the admin parameters, we want to change the default size. */
@@ -219,6 +217,15 @@ again or the page is reloaded (because the toggler is hidden until then). */
   #rightPanelsToggle:hover, #rightPanelsToggle:focus {
     opacity: 1;
   }
+  
+  /* When the display is large enough, we add padding on the outer sides of the panel columns. */
+  #leftPanels {
+    padding-right: ~"calc(var(--grid-gutter-width) / 2)";
+  }
+  
+  #rightPanels {
+    padding-left: ~"calc(var(--grid-gutter-width) / 2)";
+  }
 }
 
 body#body #rightPanelsToggle {

From 6f5ff4218c384c0abc10a00583086c5c3423caed Mon Sep 17 00:00:00 2001
From: LucasC <lucas.charpentier@xwiki.com>
Date: Wed, 11 Jun 2025 10:34:09 +0200
Subject: [PATCH 4/6] XWIKI-12824: Add buttons to hide/show panels * Updated
 the comment to be clearer

---
 .../src/main/resources/flamingo/less/layout.less  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
index 82a9b1aba3cb..7e3af4e0b2bb 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
@@ -49,8 +49,9 @@
      We add a HIDDEN block in between the two dashes. With the LESS4J lexer, inline comments are good for this.
      Once this file is migrated to native CSS, this hack can be removed. */
   &.hideleft {
-    /* We hide panels only when the screen is small enough.
-        Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. */
+    /* When the screen is small enough, we keep panels shown.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. 
+      ie. this media query does not short-circuit the admin preference. */
     @media (min-width: @screen-md-min) {
       -/**/-panel-column-left-width: 0;
 
@@ -69,8 +70,9 @@
   }
 
   &.hideright {
-    /* We hide panels only when the screen is small enough.
-        Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. */
+    /* When the screen is small enough, we keep panels shown.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. 
+      ie. this media query does not short-circuit the admin preference. */
     @media (min-width: @screen-md-min) {
       -/**/-panel-column-right-width: 0;
 
@@ -89,8 +91,9 @@
   }
 
   &.hidelefthideright {
-    /* We hide panels only when the screen is small enough.
-      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. */
+    /* When the screen is small enough, we keep panels shown.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. 
+      ie. this media query does not short-circuit the admin preference. */
     @media (min-width: @screen-md-min) {
       -/**/-panel-column-left-width: 0;
       -/**/-panel-column-right-width: 0;

From d4aa6e88703bfb72ad427077af133d6b0791d4d7 Mon Sep 17 00:00:00 2001
From: LucasC <lucas.charpentier@xwiki.com>
Date: Fri, 13 Jun 2025 16:09:15 +0200
Subject: [PATCH 5/6] XWIKI-23286: Panel toggles and handles inconsistencies

* Fixed codestyle

Co-authored-by: Michael Hamann <michael@content-space.de>
---
 .../src/main/resources/flamingo/flamingo.js                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
index f42f5f579aa1..f9eac38fda68 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
@@ -192,7 +192,7 @@ require(['jquery', 'jquery-ui'], function($) {
     let updateLocalStorageValueForSide = function (side) {
       // If the panel is not here, do not take any action on local storage.
       // The user cannot act on or view the width preference, it should not be updated.
-      if($( '#' + side + 'Panels' ).length === 0) return;
+      if ($('#' + side + 'Panels').length === 0) return;
       // We only update the local storage when the last value is different enough from the default value.
       // This is important to keep this as long as we don't have a proper UI to reset the panel column size.
       // IMO it makes sense to keep it even when we eventually have this reset UI.

From 5dffed84e18b494b9c00400b1ca69d22072fdb79 Mon Sep 17 00:00:00 2001
From: LucasC <lucas.charpentier@xwiki.com>
Date: Fri, 13 Jun 2025 16:21:58 +0200
Subject: [PATCH 6/6] XWIKI-23286: Panel toggles and handles inconsistencies *
 Removed an unwanted change added mistakenly at conflict resolution

---
 .../src/main/resources/flamingo/less/layout.less                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
index f2315409240a..25d056a706f5 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
@@ -79,7 +79,7 @@
   &.panel-right-width-Large {
     -/**/-panel-column-right-width: 24vw;
   }
-    
+
   /* The functionality to hide the panel takes precedence over the panel size defaults. 
     This ruleset should come after the rules for .panel-right-width-<WIDTH> */
   &.hideright {