fix: incorrect zoom styling on maps

Some changes for zoom control css

Author: AntoineRelief

libs/safe/src/lib/components/ui/map/map-zoom/map-zoom.component.html

@@ -1,28 +1,28 @@
 <!-- Component wrapper -->
 <div class="relative flex flex-col items-center">
   <button
-    class="w-6 h-6 top-1 relative flex items-center justify-center bg-white rounded-md border-2 border-solid border-black border-opacity-20"
+    class="w-6 h-6 relative flex items-center justify-center bg-white rounded-md border-2 border-solid border-black border-opacity-20"
     (click)="zoomIn()"
   >
     <span class="font-bold">+</span>
   </button>
   <!-- Actual input range -->
-  <input
-    name="slider"
-    style="--value:{{ currentZoom }}; --min:{{ minZoom }}; --max:{{
-      maxZoom
-    }}"
-    class="h-full w-1"
-    type="range"
-    min="{{ minZoom }}"
-    max="{{ maxZoom }}"
-    value="{{ currentZoom }}"
-    step="1"
-    orient="vertical"
-    (input)="onChangeFunction($event.target)"
-  />
+  <div class="h-24 w-6 flex items-center justify-center">
+    <input
+      name="slider"
+      style="--value:{{ currentZoom }}; --min:{{ minZoom }}; --max:{{
+        maxZoom
+      }}"
+      type="range"
+      min="{{ minZoom }}"
+      max="{{ maxZoom }}"
+      value="{{ currentZoom }}"
+      step="1"
+      (input)="onChangeFunction($event.target)"
+    />
+  </div>
   <button
-    class="w-6 h-6 bottom-1 relative flex items-center justify-center bg-white rounded-md border-2 border-solid border-black border-opacity-20"
+    class="w-6 h-6 relative flex items-center justify-center bg-white rounded-md border-2 border-solid border-black border-opacity-20"
     (click)="zoomOut()"
   >
     <span class="font-bold">-</span>

libs/safe/src/lib/components/ui/map/map-zoom/map-zoom.component.scss

@@ -1,26 +1,31 @@
+input[type='range'] {
+  -webkit-appearance: none;
+  width: 96px !important;
+  min-width: 96px !important;
+  max-width: 96px !important;
+  height: 4px;
+  transform: rotate(270deg);
+  transform-origin: center;
 
-
-input[type=range][orient=vertical]
-{
-    writing-mode: bt-lr !important; /* IE */
-    -webkit-appearance: slider-vertical !important; /* Chromium */
 }
 
 /** Chrome*/
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   input[type='range'] {
     overflow: hidden;
-    accent-color: theme('colors.primary.500');
+    // accent-color: theme('colors.primary.500');
   }
 
   input[type=range]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
     background-color: #CCCCCC;
-    border: 0.2px solid #CCCCCC;
   }
 
   input[type='range']::-webkit-slider-thumb {
-    background: theme('colors.primary.500');
-    box-shadow: -10px 80px 0 80px theme('colors.primary.500');
+    -webkit-appearance: none;
+    width: 0px;
+    height: 4px;
+    box-shadow: -80px 0 0 80px theme('colors.primary.500');
   }
 }
 
@@ -34,8 +39,7 @@ input[type="range"]::-moz-range-track {
   border: 0.2px solid #CCCCCC;
 }
 input[type=range]::-moz-range-thumb {
-  background: theme('colors.primary.500');
-  border: 0.2px solid theme('colors.primary.500');
+  opacity: 0;
 }
 
 /* Internet explorer*/
@@ -48,6 +52,5 @@ input[type="range"]::-ms-fill-upper {
   border: 0.2px solid #CCCCCC;
 }
 input[type=range]::-ms-thumb {
-  background: theme('colors.primary.500');
-  border: 0.2px solid theme('colors.primary.500');
+  opacity: 0;
 }