🐛 Show view mode buttons correctly centered in viewer

CHANGES.md

@@ -66,6 +66,7 @@
 - Fix import/export with SVG edge cases [Taiga #2389](https://tree.taiga.io/project/penpot/issue/2389)
 - Avoid modifying component when moving into a group [Taiga #2534](https://tree.taiga.io/project/penpot/issue/2534)
 - Show correctly group types label in handoff [Taiga #2482](https://tree.taiga.io/project/penpot/issue/2482)
+- Display view mode buttons always centered in viewer [#Taiga 2466](https://tree.taiga.io/project/penpot/issue/2466)
 
 ### :arrow_up: Deps updates
 

frontend/resources/styles/main/layouts/handoff.scss

@@ -3,7 +3,7 @@ $width-settings-bar: 16rem;
 .handoff-layout {
   height: 100vh;
   display: grid;
-  grid-template-rows: 40px auto;
+  grid-template-rows: 48px auto;
   grid-template-columns: 1fr;
   user-select: none;
 

frontend/resources/styles/main/partials/viewer-header.scss

@@ -2,7 +2,8 @@
   align-items: center;
   background-color: $color-gray-50;
   border-bottom: 1px solid $color-gray-60;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   height: 48px;
   padding: 0 $size-4 0 55px;
   position: relative;
@@ -12,6 +13,10 @@
     font-size: $fs12;
   }
 
+  .nav-zone {
+    justify-content: flex-start;
+  }
+
   .main-icon {
     align-items: center;
     background-color: $color-gray-60;
@@ -19,8 +24,8 @@
     display: flex;
     height: 100%;
     justify-content: center;
-    left: 0;
     position: absolute;
+    left: 0;
     top: 0;
     width: 48px;
 
@@ -44,7 +49,6 @@
   .options-zone {
     align-items: center;
     display: flex;
-    // width: 384px;
     justify-content: flex-end;
     position: relative;
 

frontend/src/app/main/ui/viewer/header.cljs

@@ -177,12 +177,13 @@
           (st/emit! (dv/go-to-section section)))]
 
     [:header.viewer-header
-     [:div.main-icon
-      [:a {:on-click go-to-dashboard
-           ;; If the user doesn't have permission we disable the link
-           :style {:pointer-events (when-not permissions "none")}} i/logo-icon]]
+     [:div.nav-zone
+      [:div.main-icon
+       [:a {:on-click go-to-dashboard
+            ;; If the user doesn't have permission we disable the link
+            :style {:pointer-events (when-not permissions "none")}} i/logo-icon]]
 
-     [:& header-sitemap {:project project :file file :page page :frame frame :index index}]
+      [:& header-sitemap {:project project :file file :page page :frame frame :index index}]]
 
      [:div.mode-zone
       [:button.mode-zone-button.tooltip.tooltip-bottom
@@ -213,4 +214,3 @@
                          :file file
                          :index index
                          :zoom zoom}]]))
-