From e8a3d753e3f36fd6c615e9c86f0fca35ad7f77f0 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Tue, 18 Feb 2025 15:44:45 +0000
Subject: [PATCH] Refactor minimap styles

---
 client/src/components/Minimap/CollapseAll.scss |  4 ++--
 client/src/components/Minimap/Minimap.scss     | 13 +++++--------
 client/src/components/Minimap/MinimapItem.scss |  1 -
 client/tailwind.config.js                      |  1 +
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Minimap/CollapseAll.scss b/client/src/components/Minimap/CollapseAll.scss
index e537624791..5016d1de64 100644
--- a/client/src/components/Minimap/CollapseAll.scss
+++ b/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');
diff --git a/client/src/components/Minimap/Minimap.scss b/client/src/components/Minimap/Minimap.scss
index 689e7149cd..2148b7443a 100644
--- a/client/src/components/Minimap/Minimap.scss
+++ b/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';
-@import './MinimapItem';
+@use './CollapseAll';
+@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;
   }
diff --git a/client/src/components/Minimap/MinimapItem.scss b/client/src/components/Minimap/MinimapItem.scss
index 8aaaf41572..f4b933150a 100644
--- a/client/src/components/Minimap/MinimapItem.scss
+++ b/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');
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 00fe062d23..70c1bb13a5 100644
--- a/client/tailwind.config.js
+++ b/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',