From c259b8ed46b079e435ffbc011a33e06dbb0ff039 Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Wed, 26 Mar 2025 22:53:35 +0100 Subject: [PATCH] :bug: Fix overflow on tokens sidebar --- .../ui/workspace/tokens/modals/themes.cljs | 15 +++++----- .../ui/workspace/tokens/modals/themes.scss | 29 ++++++++++++------- .../app/main/ui/workspace/tokens/sets.cljs | 3 +- .../app/main/ui/workspace/tokens/sets.scss | 2 ++ .../app/main/ui/workspace/tokens/sidebar.cljs | 3 +- .../app/main/ui/workspace/tokens/sidebar.scss | 6 ++-- .../ui/workspace/tokens/theme_select.cljs | 4 +-- .../ui/workspace/tokens/theme_select.scss | 1 + 8 files changed, 38 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index 1f4c0799a..d6f98ff30 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -106,9 +106,9 @@ [:> heading* {:level 3 :class (stl/css :theme-group-label) :typography "body-large"} - [:span {:class (stl/css :group-title) :title (tr "workspace.token.group-name")} - [:> icon* {:icon-id "group"}] - group]]) + [:div {:class (stl/css :group-title) :title (str (tr "workspace.token.group-name") ": " group)} + [:> icon* {:icon-id "group" :class (stl/css :group-title-icon)}] + [:> text* {:as "span" :typography "body-medium" :class (stl/css :group-title-name)} group]]]) [:ul {:class (stl/css :theme-group-rows-wrapper)} (for [[_ {:keys [group name] :as theme}] themes :let [theme-id (ctob/theme-path theme) @@ -126,7 +126,7 @@ :theme-path [(:id theme) (:group theme) (:name theme)]})))]] [:li {:key theme-id :class (stl/css :theme-row)} - [:div {:class (stl/css :theme-row-left)} + [:div {:class (stl/css :theme-switch-row)} ;; FIXME: FIREEEEEEEEEE THIS [:div {:on-click (fn [e] @@ -135,11 +135,12 @@ (st/emit! (wdt/toggle-token-theme-active? group name)))} [:& switch {:name (tr "workspace.token.theme-name" name) :on-change (constantly nil) - :selected? selected?}]] - [:> text* {:as "span" :typography "body-medium" :class (stl/css :theme-name)} name]] + :selected? selected?}]]] + [:div {:class (stl/css :theme-name-row)} + [:> text* {:as "span" :typography "body-medium" :class (stl/css :theme-name) :title name} name]] - [:div {:class (stl/css :theme-row-right)} + [:div {:class (stl/css :theme-actions-row)} (let [sets-count (some-> theme :sets seq count)] [:> button* {:class (stl/css-case :sets-count-button sets-count :sets-count-empty-button (not sets-count)) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss index bb72ef542..9277b720b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss @@ -32,8 +32,8 @@ } .themes-modal-wrapper { - display: grid; - grid-template-rows: 0fr minmax(0, 1fr); + display: flex; + flex-direction: column; gap: $s-16; max-height: $s-688; } @@ -120,6 +120,15 @@ gap: $s-4; } +.group-title-icon { + flex-shrink: 0; +} + +.group-title-name { + flex-grow: 1; + @include textEllipsis; +} + .theme-group-rows-wrapper { display: flex; flex-direction: column; @@ -136,26 +145,26 @@ } .theme-row { - display: flex; align-items: center; - gap: $s-12; + display: flex; justify-content: space-between; + gap: $s-16; } -.theme-row-left { - display: flex; - align-items: center; - gap: $s-16; +.theme-name-row { + @include textEllipsis; + flex-grow: 1; } .theme-name { color: var(--color-foreground-primary); } -.theme-row-right { - display: flex; +.theme-actions-row { align-items: center; + display: flex; gap: $s-6; + flex-shrink: 0; } .sets-count-button { diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 44785ed57..dc8f5364d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -227,6 +227,7 @@ :on-submit on-edit-submit'}] [:* [:div {:class (stl/css :set-name) + :title label :on-double-click on-double-click :id label-id} label] @@ -499,7 +500,7 @@ (when (fn? on-start-edition) (on-start-edition v))))] - [:fieldset {:class (stl/css :sets-list)} + [:div {:class (stl/css :sets-list)} (if ^boolean empty-state? [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message-sets)} (tr "workspace.token.no-sets-create")] diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index aa783329f..ca1e55d5b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -70,6 +70,7 @@ } .icon { + flex-shrink: 0; display: flex; align-items: center; width: $s-20; @@ -82,6 +83,7 @@ } .checkbox-style { + flex-shrink: 0; display: flex; justify-content: center; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index e4b596a4e..8a3b3d150 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -319,8 +319,7 @@ [:* [:& token-context-menu] - [:& title-bar {:all-clickable true - :title (tr "workspace.token.tokens-section-title" selected-token-set-name)}] + [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)] (for [type filled-group] (let [tokens (get tokens-by-type type)] diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 8c287aee7..6828a4665 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -38,11 +38,11 @@ padding-block-end: $s-16; } -.themes-header { +.themes-header, +.sets-header { @include use-typography("headline-small"); display: block; - margin-bottom: $s-8; - padding-left: $s-8; + padding: $s-8; color: var(--title-foreground-color); word-break: break-word; } diff --git a/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs b/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs index 5ef0fff00..9eaba56d9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs @@ -41,7 +41,7 @@ :sub-item grouped? :is-selected selected?) :on-click select-theme} - [:> text* {:as "span" :typography "body-small" :class (stl/css :label)} name] + [:> text* {:as "span" :typography "body-small" :class (stl/css :label) :title name} name] [:> icon* {:icon-id i/tick :aria-hidden true :class (stl/css-case :check-icon true @@ -58,7 +58,7 @@ :aria-labelledby (dm/str group "-label") :role "group"} (when (seq group) - [:> text* {:as "span" :typography "headline-small" :class (stl/css :group) :id (dm/str group "-label")} group]) + [:> text* {:as "span" :typography "headline-small" :class (stl/css :group) :id (dm/str (str/kebab group) "-label") :title group} group]) [:& themes-list {:themes themes :active-theme-paths active-theme-paths :on-close on-close diff --git a/frontend/src/app/main/ui/workspace/tokens/theme_select.scss b/frontend/src/app/main/ui/workspace/tokens/theme_select.scss index 170213a36..7819cfb62 100644 --- a/frontend/src/app/main/ui/workspace/tokens/theme_select.scss +++ b/frontend/src/app/main/ui/workspace/tokens/theme_select.scss @@ -41,6 +41,7 @@ } .group { + @include textEllipsis; display: block; padding: $s-8; color: var(--color-foreground-secondary);