Refactor minimap styles

client/src/components/Minimap/CollapseAll.scss

@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: space-between;
   border-color: theme('colors.border-button-small-outline-default');
-  z-index: calc($minimap-z-index + 1);
+  z-index: calc(theme('zIndex.minimap') + 1);
 
   @include more-contrast-interactive();
 
@@ -33,7 +33,7 @@
 
   &--floating {
     position: absolute;
-    top: $minimap-top-offset;
+    top: var(--offset-top);
     inset-inline-end: 0;
     margin-top: theme('spacing.5');
     margin-inline-end: theme('spacing.10');

client/src/components/Minimap/Minimap.scss

@@ -1,24 +1,21 @@
-// If unset, default to the "mobile" height of the slim header.
-$minimap-top-offset: var(--offset-top, calc(theme('spacing.slim-header') * 2));
 $minimap-width: 260px;
 $minimap-collapsed-width-mobile: 20px;
 $minimap-collapsed-width: 30px;
 $minimap-overflow: theme('spacing.2');
-$minimap-z-index: calc(theme('zIndex.header') - 20);
 
 @use '../../../scss/tools' as *;
 
-@import './CollapseAll';
+@use './CollapseAll';
-@import './MinimapItem';
+@use './MinimapItem';
 
 .w-minimap {
   position: absolute;
-  top: $minimap-top-offset;
+  top: var(--offset-top);
   inset-inline-end: 0;
   display: flex;
   flex-direction: column;
   height: calc(100vh - 100%);
-  z-index: $minimap-z-index;
+  z-index: theme('zIndex.minimap');
   width: $minimap-width;
   transform: translateX(
     calc(var(--w-direction-factor) * (100% - $minimap-collapsed-width-mobile))
@@ -37,7 +34,7 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   &--expanded {
     transform: translateX(0);
     // Take up the whole height so overlap with the page looks better.
-    height: calc(100vh - $minimap-top-offset);
+    height: calc(100vh - var(--offset-top));
     // Only transition when opening, so the closing animation doesn’t interfere with "hover to open".
     transition: transform 0.3s ease;
   }

client/src/components/Minimap/MinimapItem.scss

@@ -4,7 +4,6 @@
   @apply w-label-3 w-outline-offset-inside;
   display: inline-flex;
   align-items: center;
-  width: $minimap-width;
   height: theme('spacing.8');
   gap: theme('spacing[2.5]');
   font-weight: theme('fontWeight.normal');

client/tailwind.config.js

@@ -113,6 +113,7 @@ module.exports = {
           'inset-inline-start, padding-inline-start, width, transform, margin-top, min-height',
       },
       zIndex: {
+        'minimap': '80',
         'header': '100',
         'sidebar': '110',
         'sidebar-toggle': '120',