🐛 Fix typography dropdown menus being clipped out in the left sidebar

Co-authored-by: Belén Albeza <belen@hey.com>
2025-02-10 17:18:21 -05:00 · 2024-01-15 13:59:55 +01:00 · 2024-01-15 13:59:55 +01:00 · 5cfc135791
commit 5cfc135791
parent a84b23168d
18 changed files with 118 additions and 123 deletions
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@ -159,11 +159,6 @@
        }
      }
    }
-
-    .assets-bar .tool-window {
-      flex: none;
-      height: auto;
-    }
  }

  .empty {
--- a/frontend/src/app/main/ui/components/tab_container.cljs
+++ b/frontend/src/app/main/ui/components/tab_container.cljs
@ -19,7 +19,7 @@
 (mf/defc tab-element
  {::mf/wrap-props false}
  [{:keys [children]}]
-  [:div {:class (stl/css :tab-element)} children])
+  children)

 (mf/defc tab-container
  {::mf/wrap-props false}
@ -41,8 +41,8 @@
                       (when (fn? on-change-tab)
                         (on-change-tab id)))))]

-    [:div {:class (stl/css :tab-container)}
-     [:div {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
+    [:section {:class (stl/css :tab-container)}
+     [:header {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
      (when ^boolean collapsable
        [:button
         {:on-click handle-collapse
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@ -7,28 +7,15 @@

 .tab-container {
  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 100%;
+  grid-template-rows: $s-32 1fr;
  height: 100%;
-
-  .tab-container-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .tab-element {
-    flex: 1;
-    height: 100%;
-  }
 }
+
 .tab-container-tabs {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: $s-2;
-  height: $s-32;
  border-radius: $br-8;
  background: var(--color-background-secondary);
  padding: $s-2;
@ -72,6 +59,7 @@
      }
    }
  }
+
  .collapse-sidebar {
    @include flexCenter;
    @include buttonStyle;
@ -103,3 +91,10 @@
    }
  }
 }
+
+.tab-container-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
--- a/frontend/src/app/main/ui/modal.scss
+++ b/frontend/src/app/main/ui/modal.scss
@ -2,7 +2,6 @@

 :global(:root) {
  --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 5);
 }

 .modal-wrapper {
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@ -16,14 +16,16 @@

 :global(:root) {
  --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 5);
+  --layer-indentation-size: calc(var(--s-4) * 6);
 }

 .workspace {
  @extend .new-scrollbar;
  width: 100vw;
-  height: 100%;
-  user-select: none;
+  height: 100vh;
+  max-height: 100vh;
+  overflow: auto; // TODO: change to hidden
+  user-select: one;
  display: grid;
  grid-template-areas: "left-sidebar viewport right-sidebar";
  grid-template-rows: 1fr;
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.left-header
  (:require-macros [app.main.style :as stl])
  (:require
+   [app.common.data.macros :as dm]
   [app.common.files.helpers :as cfh]
   [app.common.uuid :as uuid]
   [app.config :as cf]
@ -724,7 +725,7 @@

 (mf/defc left-header
  {::mf/wrap-props false}
-  [{:keys [file layout project page-id]}]
+  [{:keys [file layout project page-id class]}]
  (let [file-id     (:id file)
        file-name   (:name file)
        project-id  (:id project)
@ -780,7 +781,7 @@
    (mf/with-effect [editing?]
      (when ^boolean editing?
        (dom/select-text! (mf/ref-val input-ref))))
-    [:header {:class (stl/css :workspace-header-left)}
+    [:header {:class (dm/str class " " (stl/css :workspace-header-left))}
     [:a {:on-click go-back
          :class (stl/css :main-icon)} i/logo-icon]
     [:div {:alt (tr "workspace.sitemap")
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@ -9,7 +9,6 @@
 .workspace-header-left {
  display: flex;
  align-items: center;
-  height: $s-48;
  padding: $s-8 $s-8 $s-4 $s-8;
 }

--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@ -41,6 +41,7 @@

        section        (cond (or mode-inspect? (contains? layout :layers)) :layers
                             (contains? layout :assets) :assets)
+
        shortcuts?     (contains? layout :shortcuts)
        show-debug?    (contains? layout :debug-panel)

@ -65,44 +66,54 @@
                                  :global/three-row (and (> size 300) (<= size 400))
                                  :global/four-row  (> size 400))
             :style #js {"--width" (dm/str size "px")}}
-     [:& left-header {:file file :layout layout :project project :page-id page-id}]
+
+     [:& left-header {:file file :layout layout :project project :page-id page-id
+                      :class (stl/css :left-header)}]
+
     [:div {:on-pointer-down on-pointer-down
            :on-lost-pointer-capture on-lost-pointer-capture
            :on-pointer-move on-pointer-move
            :class (stl/css :resize-area)}]
-     [:div {:class (stl/css :settings-bar-inside)}
+     [:*
      (cond
        (true? shortcuts?)
-        [:& shortcuts-container]
+        [:& shortcuts-container {:class (stl/css :settings-bar-content)}]

        (true? show-debug?)
-        [:& debug-panel]
+        [:& debug-panel {:class (stl/css :settings-bar-content)}]

        :else
-        [:div  {:class (stl/css :tabs-wrapper)}
+        [:div {:class (stl/css  :settings-bar-content)}
         [:& tab-container
          {:on-change-tab on-tab-change
           :selected section
           :collapsable true
           :handle-collapse handle-collapse
           :header-class (stl/css :tab-spacing)}
-          [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
-           [:div {:class (stl/css :layers-tab)
-                  :style #js {"--height" (str size-pages "px")}}
+
+          [:& tab-element {:id :layers
+                           :title (tr "workspace.sidebar.layers")}
+           [:article {:class (stl/css :layers-tab)
+                      :style #js {"--height" (str size-pages "px")}}
+
            [:& sitemap {:layout layout
                         :toggle-pages toggle-pages
                         :show-pages? @show-pages?
                         :size size-pages}]
+
            (when @show-pages?
              [: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}])
+
            [:& layers-toolbox {:size-parent size
                                :size size-pages}]]]

+
          (when-not ^boolean mode-inspect?
-            [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
+            [:& tab-element {:id :assets
+                             :title (tr "workspace.toolbar.assets")}
             [:& assets-toolbox]])]])]]))

 ;; --- Right Sidebar (Component)
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@ -10,52 +10,50 @@ $width-settings-bar: $s-276;
 $width-settings-bar-max: $s-500;

 .left-settings-bar {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "content resize";
+  grid-template-rows: $s-48 1fr;
+  grid-template-columns: 1fr 0;
  position: relative;
  grid-area: left-sidebar;
  min-width: $width-settings-bar;
  max-width: $width-settings-bar-max;
  width: var(--width, $width-settings-bar);
-  height: 100%;
  background-color: var(--panel-background-color);
+  height: 100vh;
+  max-height: 100vh;

  .resize-area {
-    position: absolute;
-    right: calc(-1 * $s-8);
-    z-index: $z-index-3;
-    width: $s-8;
-    height: calc(100vh - $s-52);
-    cursor: ew-resize;
-  }
-  .resize-area-horiz {
-    position: absolute;
-    top: calc($s-80 + var(--height, 200px));
-    left: 0;
-    width: 100%;
-    height: $s-12;
-    border-top: $s-2 solid var(--resize-area-border-color);
-    background-color: var(--resize-area-background-color);
-    cursor: ns-resize;
-  }
-  .settings-bar-inside {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 100%;
-    height: calc(100vh - $s-52);
-    overflow: hidden;
-    .tabs-wrapper {
-      .layers-tab {
-        display: grid;
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-    }
+    grid-area: resize;
  }
 }
+
+.left-header {
+  grid-area: header;
+}
+
+.settings-bar-content {
+  grid-area: content;
+  right: calc(-1 * $s-8);
+}
+
+
+.resize-area {
+  position: absolute;
+  top: 0;
+  left: unset;
+  z-index: $z-index-3;
+  width: $s-8;
+  cursor: ew-resize;
+  height: 100%;
+}
+
 .tab-spacing {
-  margin: $s-4 $s-8 0 $s-8;
+  margin-inline: $s-8;
 }
+
 .right-settings-bar {
  grid-area: right-sidebar;
  width: $width-settings-bar;
@ -69,14 +67,25 @@ $width-settings-bar-max: $s-500;
  &.expanded {
    width: var(--width, $width-settings-bar);
  }
-  .resize-area {
-    position: absolute;
-    height: 100%;
-    width: $s-8;
-    z-index: $z-index-3;
-    cursor: ew-resize;
-  }
+
  .settings-bar-inside {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+
+    height: calc(100vh - $s-52);
+    overflow: hidden;
    height: calc(100vh - $s-52);
  }
 }
+
+.resize-area-horiz {
+  position: absolute;
+  top: calc($s-80 + var(--height, 200px));
+  left: 0;
+  width: 100%;
+  height: $s-12;
+  border-top: $s-2 solid var(--resize-area-border-color);
+  background-color: var(--resize-area-background-color);
+  cursor: ns-resize;
+}
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@ -153,7 +153,7 @@
                                   :option-handler on-section-filter-change
                                   :data-test      "typographies"}]))]

-    [:div  {:class (stl/css :assets-bar)}
+    [:article  {:class (stl/css :assets-bar)}
     [:div {:class (stl/css :assets-header)}
      (when-not ^boolean read-only?
        [:button {:class (stl/css :libraries-button)
@ -190,6 +190,6 @@
     [:& (mf/provider cmm/assets-filters) {:value filters}
      [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
       [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
-        [:div {:class (stl/css :libraries-wrapper)}
+        [:*
         [:& assets-local-library {:filters filters}]
         [:& assets-libraries {:filters filters}]]]]]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss";

 .assets-bar {
-  position: relative;
+  display: grid;
  height: 100%;
-  overflow: hidden;
+  grid-template-rows: auto 1fr;
+  // TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height
+  max-height: calc(100vh - $s-80);
 }

 .libraries-button {
@ -108,16 +110,6 @@
  @include buttonStyle;
 }

-.libraries-wrapper {
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  display: flex;
-  flex-direction: column;
-  padding-left: $s-8;
-  height: calc(100vh - $s-180);
-}
-
 .assets-header {
  padding: $s-8 $s-12 $s-12 $s-12;
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
@ -6,7 +6,12 @@

@import "refactor/common-refactor.scss";
 .tool-window {
-  margin-bottom: $s-24;
+  margin-block-end: $s-24;
+  padding-inline-start: $s-12;
+  overflow-y: auto;
+  display: grid;
+  grid-auto-rows: max-content;
+  scrollbar-gutter: stable;
 }

 .file-name {
@ -38,13 +43,7 @@
 }

 .library-content {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - $s-36);
  width: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  margin-top: $s-4;
 }

 .asset-title {
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
@ -8,6 +8,7 @@
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.data :as d]
+   [app.common.data.macros :as dm]
   [app.main.data.workspace :as dw]
   [app.main.store :as st]
   [app.main.ui.icons :as i]
@ -16,7 +17,7 @@
   [rumext.v2 :as mf]))

 (mf/defc debug-panel
-  []
+  [{:keys [class] :as props}]
  (let [on-toggle-enabled
        (mf/use-fn
         (fn [event option]
@ -30,7 +31,7 @@
         (fn []
           (st/emit! (dw/remove-layout-flag :debug-panel))))]

-    [:div {:class (stl/css :debug-panel)}
+    [:div {:class (dm/str class " " (stl/css :debug-panel))}
     [:div {:class (stl/css :panel-title)}
      [:span "Debugging tools"]
      [:div {:class (stl/css :close-button) :on-click handle-close}
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
@ -74,11 +74,12 @@
 }

 .element-list-body {
-  display: flex;
  align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  column-gap: $s-4;
  height: $s-32;
  width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
-  padding-right: $s-12;
  cursor: pointer;

  &.filtered {
@ -111,7 +112,7 @@
  width: $s-16;
  height: 100%;
  width: $s-24;
-  padding: 0 $s-8 0 $s-4;
+  padding-inline-start: $s-4;
  svg {
    @extend .button-icon-small;
    stroke: var(--icon-foreground);
@ -169,7 +170,7 @@
  align-items: center;
  height: 100%;
  width: $s-24;
-  padding: 0 $s-4 0 $s-8;
+  padding-inline-start: $s-8;

  svg {
    @extend .button-icon-small;
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@ -458,7 +458,7 @@
        (mf/use-fn
         #(st/emit! (dw/toggle-focus-mode)))]

-    [:div#layers {:class (stl/css :layers)}
+    [:div#layers
     (if (d/not-empty? focus)
       [:div {:class (stl/css :tool-window-bar)}
        [:button {:class (stl/css :focus-title)
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@ -6,14 +6,6 @@

@import "refactor/common-refactor.scss";

-.layers {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
 .tool-window-bar {
  display: flex;
  align-items: center;
@ -246,7 +238,8 @@
 }

 .tool-window-content {
-  --calculated-height: calc($s-128 + var(--height, $s-200));
+  // TODO: sass variables are not being interpolated here, find why
+  --calculated-height: calc(128px + var(--height, 200px));
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--calculated-height));
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@ -363,15 +363,13 @@
    }
    .fonts-list {
      @include menuShadow;
-      position: absolute;
-      top: $s-36;
-      left: 0;
+      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 100%;
-      height: $s-216;
      width: 100%;
+      height: 100%;
      padding: $s-2;
      border-radius: $br-8;
      background-color: var(--dropdown-background-color);
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
@ -341,7 +341,7 @@
                                 :filter-term     filter-term}]]])))

 (mf/defc shortcuts-container
-  []
+  [{:keys [class] :as props}]
  (let [workspace-shortcuts          app.main.data.workspace.shortcuts/shortcuts
        path-shortcuts               app.main.data.workspace.path.shortcuts/shortcuts
        all-workspace-shortcuts      (->> (d/deep-merge path-shortcuts workspace-shortcuts)
@ -468,7 +468,7 @@
    (mf/with-effect []
      (dom/focus! (dom/get-element "shortcut-search")))

-    [:div {:class (stl/css :shortcuts)}
+    [:div {:class (dm/str class " " (stl/css :shortcuts))}
     [:div {:class (stl/css :shortcuts-header)}
      [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
      [:div {:class (stl/css :shortcuts-close-button)