From 1a61c855ca2af4a1b0cbac38549780fdf3d84786 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 4 Oct 2021 16:49:28 +0200
Subject: [PATCH] :bug: Fix problem with overflow dropdown on stroke-cap

---
 CHANGES.md                                                   | 3 +++
 .../styles/main/partials/sidebar-element-options.scss        | 4 ++--
 .../app/main/ui/workspace/sidebar/options/menus/stroke.cljs  | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index adfe0d38b..34a49d12e 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -9,6 +9,9 @@
 - Add advanced prototyping [#244](https://tree.taiga.io/project/penpot/us/244).
 
 ### :bug: Bugs fixed
+
+- Fix problem with overflow dropdown on stroke-cap [#1216](https://github.com/penpot/penpot/issues/1216)
+
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes
 ### :heart: Community contributions by (Thank you!)
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index a659d469c..b3f555d76 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -874,7 +874,6 @@
   position: relative;
   top: 2px;
   width: 100%;
-  z-index: 20;
 }
 
 .btn-options {
@@ -1539,7 +1538,8 @@
   right: 5px;
   top: 30px;
   z-index: 12;
-  min-width: 200px;
+  width: 200px;
+  height: 320px;
   position: fixed;
 
   & li.separator {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
index a5698e4c0..c5cfbb6cb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -141,7 +141,10 @@
                   target (dom/get-current-target event)
                   rect   (dom/get-bounding-rect target)
 
-                  top (+ (:bottom rect) 5)
+                  top (if (< (+ (:bottom rect) 320) (:height window-size))
+                        (+ (:bottom rect) 5)
+                        (- (:height window-size) 325))
+
                   left (if (< (+ (:left rect) 200) (:width window-size))
                          (:left rect)
                          (- (:width window-size) 205))]