From 62d98ad265ae1a36069bb2e7b1ecebe23e3f648e Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 4 Dec 2020 15:22:59 +0100
Subject: [PATCH] :bug: Fixed styles for typography advanced options

---
 .../main/partials/sidebar-element-options.scss       | 12 +++---------
 frontend/resources/styles/main/partials/sidebar.scss |  2 +-
 .../main/ui/workspace/sidebar/options/common.cljs    | 12 ++++++++++--
 .../ui/workspace/sidebar/options/typography.cljs     |  2 +-
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 4465ef2c3..ed324a469 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -760,30 +760,23 @@
   left: 0;
   position: absolute;
   top: 0;
-  width: 100%;
+  width: calc(100% - 8px);
   opacity: 0.4;
   z-index: 10;
 }
 
 .advanced-options-wrapper {
-  position: absolute;
   width: 100%;
-  padding-right: 1.5rem;
   padding-left: 0.25rem;
 }
 
-.element-options .advanced-options-wrapper {
-  padding-right: 1rem;
-}
-
 .advanced-options {
   background-color: #303236;
   border-radius: 4px;
-  left: -8px;
   padding: 0.5rem;
   position: relative;
   top: 2px;
-  width: calc(100% + 16px);
+  width: 100%;
   z-index: 20;
 }
 
@@ -918,6 +911,7 @@
         flex-grow: 1;
         font-size: 11px;
         margin-top: 4px;
+        white-space: nowrap;
     }
 
     .element-set-actions-button svg {
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index e03353aec..3c11fe105 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -171,7 +171,7 @@ $width-settings-bar: 16rem;
 .tool-window-content {
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  // overflow-y: auto;
   height: 100%;
   width: 100%;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
index a37caa009..91f0eb438 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
@@ -13,13 +13,21 @@
    [app.util.dom :as dom]))
 
 (mf/defc advanced-options [{:keys [visible? on-close children]}]
-  (let [handle-click (fn [event] (when on-close
+  (let [ref (mf/use-ref nil)
+        handle-click (fn [event] (when on-close
                                    (do (dom/stop-propagation event)
                                        (on-close))))]
+    (mf/use-effect
+     (mf/deps visible?)
+     (fn []
+       (when-let [node (mf/ref-val ref)]
+         (when visible?
+           (.scrollIntoViewIfNeeded ^js node)))))
+
     (when visible?
       [:*
        [:div.focus-overlay {:on-click handle-click}]
-       [:div.advanced-options-wrapper
+       [:div.advanced-options-wrapper {:ref ref}
         [:div.advanced-options {}
          children]]])))
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
index b7a9b8200..5af24e253 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
@@ -270,7 +270,7 @@
       (if read-only?
         [:div.element-set-content.typography-read-only-data
          [:div.row-flex.typography-name
-          [:spang (:name typography)]]
+          [:span (:name typography)]]
 
          [:div.row-flex
           [:span.label (t locale "workspace.assets.typography.font-id")]