Move the minimap to be next to side panels

client/scss/components/_form-side.scss

@@ -18,9 +18,7 @@
   @apply w-absolute
       w-right-0
       w-top-full
-      w-w-full
       w-h-[calc(100vh-100%)]
-      md:w-w-1/3
       w-transform
       w-translate-x-full
       rtl:-w-translate-x-full
@@ -39,6 +37,11 @@
       lg:w-max-w-[31.25rem]
       xl:w-max-w-[46.875rem];
   z-index: calc(theme('zIndex.header') - 10);
+  width: var(--side-panel-width, 100%);
+
+  @include media-breakpoint-up(md) {
+    width: var(--side-panel-width, theme('width.[1/3]'));
+  }
 
   &--open {
     @apply w-translate-x-0 rtl:w-translate-x-0;
@@ -61,13 +64,13 @@
   }
 
   &__resize-grip-container {
-    @apply w-absolute w-place-items-center w-hidden md:w-flex w-z-10 w-left-[-21.5px];
-
-    height: calc(100% - theme('spacing.8'));
+    @apply w-absolute w-place-items-center w-hidden md:w-flex w-z-10 w-left-0;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   &__resize-grip {
-    @apply w-text-primary hover:w-text-primary-200 w-border w-border-transparent w-rounded w-bg-white w-p-3 w-hidden w-touch-pinch-zoom w-cursor-ew-resize;
+    @apply w-text-primary hover:w-text-primary-200 w-border w-border-transparent w-rounded w-bg-white w-p-2.5 w-hidden w-touch-pinch-zoom w-cursor-ew-resize;
 
     .form-side--open & {
       @apply w-flex;

client/scss/components/forms/_form-width.scss

@@ -3,11 +3,18 @@
 }
 
 @include media-breakpoint-up(md) {
-  .side-panel-open {
+  .side-panel-open,
+  .minimap-open {
     .tab-content {
       width: theme('width.[2/3]');
     }
   }
+
+  .side-panel-open.minimap-open {
+    .tab-content {
+      width: theme('width.[3/5]');
+    }
+  }
 }
 
 .fields {

client/src/components/Minimap/CollapseAll.scss

@@ -33,5 +33,9 @@
     inset-inline-end: 0;
     margin-top: theme('spacing.3');
     margin-inline-end: theme('spacing.3');
+
+    .side-panel-open & {
+      inset-inline-end: var(--side-panel-width, 0);
+    }
   }
 }

client/src/components/Minimap/Minimap.scss

@@ -31,6 +31,10 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
     );
   }
 
+  .side-panel-open & {
+    inset-inline-end: var(--side-panel-width, 0);
+  }
+
   &--expanded {
     transform: translateX(0);
     // Take up the whole height so overlap with the page looks better.
@@ -52,18 +56,14 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   background-color: theme('colors.white.DEFAULT');
   color: theme('colors.primary.DEFAULT');
   transform: rotate(180deg);
+  // Expand is available for keyboard users only.
+  opacity: 0;
+  pointer-events: none;
 
   @include media-breakpoint-up(sm) {
     margin-top: theme('spacing.9');
     padding: theme('spacing.[1.5]');
 
-    // On devices supporting hover, this is available for keyboard users only.
-    // Mouse users open the minimap by hovering.
-    @media (hover: hover) {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     *:focus {
       opacity: 1;
       pointer-events: auto;
@@ -90,7 +90,7 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   :where(.w-minimap--expanded) & {
     opacity: 1;
     pointer-events: auto;
-    margin-top: theme('spacing.[0.5]');
+    margin-top: theme('spacing.3');
     margin-inline-start: theme('spacing.3');
     padding: theme('spacing.3');
     transform: rotate(0deg);

client/src/components/Minimap/MinimapItem.scss

@@ -91,3 +91,12 @@
     margin-inline-end: calc($badge-size - theme('spacing.px'));
   }
 }
+
+.w-minimap-item__icon,
+.w-minimap-item__label {
+  opacity: 0;
+
+  :where(.w-minimap--expanded) & {
+    opacity: 1;
+  }
+}

client/src/includes/sidePanel.js

@@ -155,7 +155,10 @@ export default function initSidePanel() {
       newWidth,
     ).replace('%(num)s', newWidth);
 
-    sidePanelWrapper.style.width = `${newWidth}px`;
+    sidePanelWrapper.parentElement.style.setProperty(
+      '--side-panel-width',
+      `${newWidth}px`,
+    );
     const inputPercentage = ((newWidth - minWidth) / range) * 100;
     widthInput.value = getDirectedPercentage(inputPercentage);
     widthInput.setAttribute('aria-valuetext', valueText);

wagtail/admin/templates/wagtailadmin/shared/side_panels.html

@@ -1,5 +1,9 @@
 {% load wagtailadmin_tags i18n %}
 
+{% if not in_explorer %}
+    {# Rendering for the minimap is done with React. #}
+    <aside aria-label="{% trans 'Minimap' %}" data-minimap-container></aside>
+{% endif %}
 <aside class="form-side form-side--initial" aria-label="{% trans 'Side panels' %}" data-form-side{% if in_explorer %} data-form-side-explorer{% endif %}>
     <button type="button" class="form-side__close-button" data-form-side-close-button aria-label="{% trans 'Toggle side panel' %}">
         {% icon name="expand-right" %}
@@ -28,7 +32,3 @@
         </div>
     {% endfor %}
 </aside>
-{% if not in_explorer %}
-    {# Rendering for the minimap is done with React. #}
-    <aside aria-label="{% trans 'Minimap' %}" data-minimap-container></aside>
-{% endif %}