🐛 Fix overflow on tokens sidebar

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")}
+            [:div {:class (stl/css :group-title) :title (str (tr "workspace.token.group-name") ": " group)}
-             [:> icon* {:icon-id "group"}]
+             [:> icon* {:icon-id "group" :class (stl/css :group-title-icon)}]
-             group]])
+             [:> 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?}]]
+                           :selected? selected?}]]]
-              [:> text* {:as "span"  :typography "body-medium" :class (stl/css :theme-name)} name]]
+             [: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))

frontend/src/app/main/ui/workspace/tokens/modals/themes.scss

@@ -32,8 +32,8 @@
 }
 
 .themes-modal-wrapper {
-  display: grid;
+  display: flex;
-  grid-template-rows: 0fr minmax(0, 1fr);
+  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 {
+.theme-name-row {
-  display: flex;
+  @include textEllipsis;
-  align-items: center;
+  flex-grow: 1;
-  gap: $s-16;
 }
 
 .theme-name {
   color: var(--color-foreground-primary);
 }
 
-.theme-row-right {
+.theme-actions-row {
-  display: flex;
   align-items: center;
+  display: flex;
   gap: $s-6;
+  flex-shrink: 0;
 }
 
 .sets-count-button {

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

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;

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -319,8 +319,7 @@
 
     [:*
      [:& token-context-menu]
-     [:& title-bar {:all-clickable true
+     [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)]
-                    :title (tr "workspace.token.tokens-section-title" selected-token-set-name)}]
 
      (for [type filled-group]
        (let [tokens (get tokens-by-type type)]

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: $s-8;
-  padding-left: $s-8;
   color: var(--title-foreground-color);
   word-break: break-word;
 }

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

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