From 1e9c6f3ebe89b36b8ff9d2a8758f9be3712e89b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Fri, 15 Mar 2024 11:19:37 +0100
Subject: [PATCH] :bug: Fix main toolbar positioning when rulers are hidden

---
 .../app/main/ui/workspace/top_toolbar.cljs    |  2 +-
 .../app/main/ui/workspace/top_toolbar.scss    | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs
index 406d28fcb..979c84e19 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs
@@ -119,7 +119,7 @@
 
     (when-not ^boolean read-only?
       [:aside {:class (stl/css-case :main-toolbar true
-                                    :not-rulers-present (not rulers?)
+                                    :main-toolbar-no-rulers (not rulers?)
                                     :main-toolbar-hidden hide-toolbar?)}
        [:ul {:class (stl/css :main-toolbar-options)}
         [:li
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss
index bc7850c72..625e5384e 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.scss
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss
@@ -9,7 +9,8 @@
 .main-toolbar {
   cursor: initial;
   position: absolute;
-  left: calc(50% - $s-160);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -23,13 +24,19 @@
     top 0.3s,
     height 0.3s,
     opacity 0.3s;
-  &:not(.main-toolbar-hidden) {
-    top: $s-28;
-  }
+
+  --toolbar-position-y: #{$s-28};
+  --toolbar-offset-y: 0px;
+  top: calc(var(--toolbar-position-y) + var(--toolbar-offset-y));
+}
+
+.main-toolbar-no-rulers {
+  --toolbar-position-y: 0px;
+  --toolbar-offset-y: #{$s-8};
 }
 
 .main-toolbar-hidden {
-  top: $s-24;
+  --toolbar-offset-y: -#{$s-4};
   height: $s-16;
   z-index: $z-index-1;
   border-radius: 0 0 $s-8 $s-8;
@@ -88,13 +95,6 @@
   }
 }
 
-.main-toolbar.not-rulers-present {
-  top: $s-8;
-  &.hidden-toolbar {
-    top: $s-0;
-  }
-}
-
 ul.main-toolbar-panels {
   display: none;
 }