Merge pull request #4151 from penpot/ladybenko-6900-fix-palette-toolbar

🐛 Fix collapsed toolbar/palette position

frontend/src/app/main/ui/workspace/palette.scss

@@ -39,10 +39,7 @@
   &.wide {
     width: 100%;
   }
-  &.mid-palette,
+
-  &.small-palette {
-    grid-template-columns: $s-64 auto 1fr;
-  }
   .resize-area {
     grid-area: resize;
     height: $s-8;
@@ -108,56 +105,62 @@
     width: 100%;
     min-width: 0;
   }
-  .handler {
+}
-    @include buttonStyle;
+
-    @include flexCenter;
+.handler {
-    width: $s-12;
+  @include buttonStyle;
+  @include flexCenter;
+  width: $s-12;
+  height: 100%;
+  .handler-btn {
+    width: $s-4;
     height: 100%;
-    .handler-btn {
+    max-height: $s-40;
-      width: $s-4;
+    margin: $s-8 $s-4;
-      height: 100%;
-      max-height: $s-40;
-      margin: $s-8 $s-4;
-      padding: 0;
-      border-radius: $s-4;
-      background-color: var(--palette-handler-background-color);
-    }
-  }
-  &.hidden-bts {
-    right: 10px;
-    z-index: 1;
-    width: 22px;
-    grid-template-columns: $s-8 auto 1fr;
     padding: 0;
-    &.small-palette,
+    border-radius: $s-4;
-    &.mid-palette {
+    background-color: var(--palette-handler-background-color);
-      right: 10px;
+  }
-    }
+}
-    .palette-btn-list {
+
-      opacity: $op-0;
+.mid-palette,
-      visibility: hidden;
+.small-palette {
-      width: 0;
+  grid-template-columns: $s-64 auto 1fr;
-      .palette-item {
+}
-        opacity: $op-0;
+
-        visibility: hidden;
+.hidden-bts {
-        z-index: 0;
+  right: $s-2;
-      }
+  z-index: $z-index-1;
-    }
+  width: 22px;
-    .resize-area {
+  grid-template-columns: $s-8 auto 1fr;
-      visibility: hidden;
+  padding: 0;
-      z-index: 0;
+  border-inline-start: 0;
-      width: 0;
+  border-start-start-radius: 0;
-    }
+  border-end-start-radius: 0;
-    .palette-actions {
+  .palette-btn-list {
-      visibility: hidden;
+    opacity: $op-0;
-      z-index: 0;
+    visibility: hidden;
-    }
+    width: 0;
-    .palette {
+    .palette-item {
-      visibility: hidden;
+      opacity: $op-0;
-      z-index: 0;
+      visibility: hidden;
-    }
+      z-index: 0;
-    .handler {
+    }
-      padding-bottom: $s-8;
+  }
-    }
+  .resize-area {
+    visibility: hidden;
+    z-index: 0;
+    width: 0;
+  }
+  .palette-actions {
+    visibility: hidden;
+    z-index: 0;
+  }
+  .palette {
+    visibility: hidden;
+    z-index: 0;
+  }
+  .handler {
+    padding-bottom: $s-8;
   }
 }

frontend/src/app/main/ui/workspace/text_palette.scss

@@ -124,9 +124,6 @@
     }
   }
   &.small-item {
-    .typography-name {
-      height: $s-12;
-    }
     .typography-data,
     .typography-font {
       display: none;

frontend/src/app/main/ui/workspace/top_toolbar.cljs

@@ -108,7 +108,7 @@
     (when-not ^boolean read-only?
       [:aside {:class (stl/css-case :main-toolbar true
                                     :not-rulers-present (not rulers?)
-                                    :hidden-toolbar hide-toolbar?)}
+                                    :main-toolbar-hidden hide-toolbar?)}
        [:ul {:class (stl/css :main-toolbar-options)}
         [:li
          [:button

frontend/src/app/main/ui/workspace/top_toolbar.scss

@@ -9,7 +9,6 @@
 .main-toolbar {
   cursor: initial;
   position: absolute;
-  top: $s-28;
   left: calc(50% - $s-160);
   display: flex;
   align-items: center;
@@ -24,6 +23,20 @@
     top 0.3s,
     height 0.3s,
     opacity 0.3s;
+  &:not(.main-toolbar-hidden) {
+    top: $s-28;
+  }
+}
+
+.main-toolbar-hidden {
+  top: $s-24;
+  height: $s-16;
+  z-index: $z-index-1;
+  border-radius: 0 0 $s-8 $s-8;
+  border-block-start: 0;
+  .main-toolbar-options {
+    opacity: $op-0;
+  }
 }
 
 .main-toolbar-options {
@@ -76,16 +89,6 @@
   }
 }
 
-.main-toolbar.hidden-toolbar {
-  top: $s-20;
-  height: $s-16;
-  z-index: $z-index-1;
-  border-radius: 0 0 $s-8 $s-8;
-  .main-toolbar-options {
-    opacity: $op-0;
-  }
-}
-
 .main-toolbar.not-rulers-present {
   top: $s-8;
   &.hidden-toolbar {