🐛 Fixed styles for typography advanced options

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 {

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%;
 }

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]]])))
 

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")]