🐛 Fix available resize area (#6186)

CHANGES.md

@@ -44,6 +44,7 @@
 - Fix assets name on inspect tab [Taiga #10630](https://tree.taiga.io/project/penpot/issue/10630)
 - Fix chat icon overlaps "Show" button in carrousel section [Taiga #10542](https://tree.taiga.io/project/penpot/issue/10542)
 - Fix incorrect handling of background task result (now task rows are properly marked as completed)
+- Fix available size of resize handler [Taiga #10639](https://tree.taiga.io/project/penpot/issue/10639)
 
 
 ## 2.5.4

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

@@ -110,7 +110,9 @@
             [:div {:class (stl/css :resize-area-horiz)
                    :on-pointer-down on-pointer-down-pages
                    :on-lost-pointer-capture on-lost-pointer-capture-pages
-                   :on-pointer-move on-pointer-move-pages}])
+                   :on-pointer-move on-pointer-move-pages}
+
+             [:div {:class (stl/css :resize-handle-horiz)}]])
 
           [:& layers-toolbox {:size-parent size
                               :size size-pages}]])

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

@@ -88,6 +88,12 @@ $width-settings-bar-max: $s-500;
   position: absolute;
   left: 0;
   width: 100%;
+  padding: $s-3 0 $s-1 0;
+  height: $s-6;
+  cursor: ns-resize;
+}
+
+.resize-handle-horiz {
   border-bottom: $s-2 solid var(--resize-area-border-color);
   cursor: ns-resize;
 }

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -439,6 +439,7 @@
       [:div {:class (stl/css :resize-area-horiz)
              :on-pointer-down on-pointer-down-pages
              :on-lost-pointer-capture on-lost-pointer-capture-pages
-             :on-pointer-move on-pointer-move-pages}]
+             :on-pointer-move on-pointer-move-pages}
+       [:div {:class (stl/css :resize-handle-horiz)}]]
       [:> tokens-section* {:tokens-lib tokens-lib}]]
      [:> import-export-button*]]))

frontend/src/app/main/ui/workspace/tokens/sidebar.scss

@@ -170,6 +170,12 @@
   position: absolute;
   left: 0;
   width: 100%;
+  padding: $s-3 0 $s-1 0;
+  height: $s-6;
+  cursor: ns-resize;
+}
+
+.resize-handle-horiz {
   border-bottom: $s-2 solid var(--resize-area-border-color);
   cursor: ns-resize;
 }