From e9d50eb10d651a8d123edff202876d58e280bd7b Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 24 Feb 2023 10:57:56 +0100
Subject: [PATCH] :bug: Fix problems with position absolute

---
 .../styles/main/partials/sidebar-layers.scss  |  2 +-
 .../styles/main/partials/sidebar.scss         |  1 +
 .../sidebar/options/menus/layout_item.cljs    | 90 ++++++++++---------
 3 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index 7553e49e3..c2c699f95 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -40,7 +40,7 @@
         width: 18px;
         height: 18px;
         fill: $color-gray-20;
-        fill-opacity: 0.3;
+        fill-opacity: 0.5;
       }
     }
   }
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index a165ad7a4..fd41ce521 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -246,6 +246,7 @@
   height: 100%;
   width: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
 
   &.inspect {
     .tab-container-tabs {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index d602fba84..51e55344d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -232,51 +232,53 @@
            :on-change #(on-change-z-index %)
            :value (:layout-item-z-index values)}]]]]
 
-      [:div.layout-row
-       [:div.row-title.sizing "Sizing"]
-       [:& element-behavior {:is-layout-child? is-layout-child?
-                             :is-layout-container? is-layout-container?
-                             :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
-                             :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
-                             :on-change-behavior on-change-behavior}]]
-      
-      (when is-layout-child?
-        [:div.layout-row
-         [:div.row-title "Align"]
-         [:div.btn-wrapper
-          [:& align-self-row {:is-col? is-col?
-                              :align-self align-self
-                              :set-align-self set-align-self}]]])
+      (when (not (:layout-item-absolute values))
+        [:*
+         [:div.layout-row
+          [:div.row-title.sizing "Sizing"]
+          [:& element-behavior {:is-layout-child? is-layout-child?
+                                :is-layout-container? is-layout-container?
+                                :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
+                                :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
+                                :on-change-behavior on-change-behavior}]]
 
-      (when is-layout-child?
-        [:& margin-section {:values values
-                            :change-margin-style change-margin-style
-                            :on-margin-change on-margin-change}])
+         (when is-layout-child?
+           [:div.layout-row
+            [:div.row-title "Align"]
+            [:div.btn-wrapper
+             [:& align-self-row {:is-col? is-col?
+                                 :align-self align-self
+                                 :set-align-self set-align-self}]]])
 
-      [:div.advanced-ops-body
-       [:div.input-wrapper
-        (for  [item (cond-> []
-                      (= (:layout-item-h-sizing values) :fill)
-                      (conj :layout-item-min-w :layout-item-max-w)
+         (when is-layout-child?
+           [:& margin-section {:values values
+                               :change-margin-style change-margin-style
+                               :on-margin-change on-margin-change}])
 
-                      (= (:layout-item-v-sizing values) :fill)
-                      (conj :layout-item-min-h :layout-item-max-h))]
+         [:div.advanced-ops-body
+          [:div.input-wrapper
+           (for  [item (cond-> []
+                         (= (:layout-item-h-sizing values) :fill)
+                         (conj :layout-item-min-w :layout-item-max-w)
 
-          [:div.tooltip.tooltip-bottom
-           {:key   (d/name item)
-            :alt   (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
-            :class (dom/classnames "maxH" (= item :layout-item-max-h)
-                                   "minH" (= item :layout-item-min-h)
-                                   "maxW" (= item :layout-item-max-w)
-                                   "minW" (= item :layout-item-min-w))}
-           [:div.input-element
-            {:alt   (tr (dm/str "workspace.options.layout-item." (d/name item)))}
-            [:> numeric-input
-             {:no-validate true
-              :min 0
-              :data-wrap true
-              :placeholder "--"
-              :on-click #(dom/select-target %)
-              :on-change (partial on-size-change item)
-              :value (get values item)
-              :nillable true}]]])]]]]))
+                         (= (:layout-item-v-sizing values) :fill)
+                         (conj :layout-item-min-h :layout-item-max-h))]
+
+             [:div.tooltip.tooltip-bottom
+              {:key   (d/name item)
+               :alt   (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
+               :class (dom/classnames "maxH" (= item :layout-item-max-h)
+                                      "minH" (= item :layout-item-min-h)
+                                      "maxW" (= item :layout-item-max-w)
+                                      "minW" (= item :layout-item-min-w))}
+              [:div.input-element
+               {:alt   (tr (dm/str "workspace.options.layout-item." (d/name item)))}
+               [:> numeric-input
+                {:no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :on-click #(dom/select-target %)
+                 :on-change (partial on-size-change item)
+                 :value (get values item)
+                 :nillable true}]]])]]])]]))