From f1685f6e754c8a30a53e9794c12477c83c3a650f Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 10 Apr 2024 17:21:26 +0200
Subject: [PATCH] :bug: Fix text length on tabs

---
 CHANGES.md                                    |   1 +
 .../app/main/ui/components/tab_container.cljs |   4 +-
 .../app/main/ui/components/tab_container.scss | 134 ++++++++++--------
 .../src/app/main/ui/workspace/sidebar.cljs    |   2 +-
 4 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index be9785f21..ed15bda2d 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -132,6 +132,7 @@
 - Fix problem when changing typography assets [Github #3683](https://github.com/penpot/penpot/issues/3683)
 - Internal error when you copy and paste some main components between files [Taiga #7397](https://tree.taiga.io/project/penpot/issue/7397)
 - Fix toolbar disappearing [Taiga #7411](https://tree.taiga.io/project/penpot/issue/7411)
+- Fix long text on tab breaks UI [Taiga Issue #7421](https://tree.taiga.io/project/penpot/issue/7421)
 
 ## 1.19.5
 
diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs
index 4dae9d52b..bd3ff6727 100644
--- a/frontend/src/app/main/ui/components/tab_container.cljs
+++ b/frontend/src/app/main/ui/components/tab_container.cljs
@@ -56,12 +56,14 @@
                title (.-title props)
                sid   (d/name id)]
            [:div {:key (str/concat "tab-" sid)
+                  :title title
                   :data-id sid
                   :on-click on-click
                   :class  (stl/css-case
                            :tab-container-tab-title true
                            :current (= selected id))}
-            title]))]]
+            [:span {:class (stl/css :content)}
+             title]]))]]
 
      [:div {:class (dm/str content-class " " (stl/css  :tab-container-content))}
       (d/seek #(= selected (-> % .-props .-id))
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index 7c9b08b52..80e5b3ea6 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -21,74 +21,82 @@
   cursor: pointer;
   font-size: $fs-12;
   height: 100%;
-  .tab-container-tab-wrapper {
-    @include flexCenter;
-    flex-direction: row;
-    height: 100%;
-    width: 100%;
-    .tab-container-tab-title {
-      @include flexCenter;
-      @include headlineSmallTypography;
-      height: 100%;
-      width: 100%;
-      padding: 0 $s-8;
-      margin: 0;
-      border-radius: $br-8;
-      background-color: transparent;
-      color: var(--tab-foreground-color);
-      white-space: nowrap;
-      border: $s-2 solid var(--tab-border-color);
-      svg {
-        @extend .button-icon;
-        stroke: var(--tab-foreground-color);
-      }
+}
 
-      &.current,
-      &.current:hover {
-        background: var(--tab-background-color-selected);
-        border-color: var(--tab-border-color-selected);
-        color: var(--tab-foreground-color-selected);
-        svg {
-          stroke: var(--tab-foreground-color-selected);
-        }
-      }
-      &:hover {
-        color: var(--tab-foreground-color-hover);
-        svg {
-          stroke: var(--tab-foreground-color-hover);
-        }
-      }
+.tab-container-tab-wrapper {
+  display: grid;
+  grid-auto-flow: column;
+  height: 100%;
+  width: 100%;
+}
+
+.tab-container-tab-title {
+  @include flexCenter;
+  height: 100%;
+  width: 100%;
+  padding: 0 $s-8;
+  margin: 0;
+  border-radius: $br-8;
+  background-color: transparent;
+  color: var(--tab-foreground-color);
+  border: $s-2 solid var(--tab-border-color);
+  min-width: 0;
+
+  svg {
+    @extend .button-icon;
+    stroke: var(--tab-foreground-color);
+  }
+  .content {
+    @include headlineSmallTypography;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &.current,
+  &.current:hover {
+    background: var(--tab-background-color-selected);
+    border-color: var(--tab-border-color-selected);
+    color: var(--tab-foreground-color-selected);
+    svg {
+      stroke: var(--tab-foreground-color-selected);
+    }
+  }
+  &:hover {
+    color: var(--tab-foreground-color-hover);
+    svg {
+      stroke: var(--tab-foreground-color-hover);
+    }
+  }
+}
+
+.collapse-sidebar {
+  @include flexCenter;
+  @include buttonStyle;
+  height: 100%;
+  width: $s-24;
+  min-width: $s-24;
+  padding: 0 $s-6;
+  border-radius: $br-5;
+  svg {
+    @include flexCenter;
+    height: $s-16;
+    width: $s-16;
+    stroke: var(--icon-foreground);
+    transform: rotate(180deg);
+    fill: none;
+    color: transparent;
+  }
+  &:hover {
+    svg {
+      stroke: var(--icon-foreground-hover);
     }
   }
 
-  .collapse-sidebar {
-    @include flexCenter;
-    @include buttonStyle;
-    height: 100%;
-    width: $s-24;
-    min-width: $s-24;
-    padding: 0 $s-6;
-    border-radius: $br-5;
+  &.collapsed {
     svg {
-      @include flexCenter;
-      height: $s-16;
-      width: $s-16;
-      stroke: var(--icon-foreground);
-      transform: rotate(180deg);
-      fill: none;
-      color: transparent;
-    }
-    &:hover {
-      svg {
-        stroke: var(--icon-foreground-hover);
-      }
-    }
-
-    &.collapsed {
-      svg {
-        transform: rotate(0deg);
-        padding: 0 0 0 $s-6;
-      }
+      transform: rotate(0deg);
+      padding: 0 0 0 $s-6;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 2e2ab4a39..d64842075 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -167,7 +167,7 @@
 
               :id "right-sidebar-aside"
               :data-size (str size)
-              :style #js {"--width" (when can-be-expanded? (dm/str size "px"))}}
+              :style #js {"--width" (if can-be-expanded? (dm/str size "px") 276)}}
       (when can-be-expanded?
         [:div {:class (stl/css :resize-area)
                :on-pointer-down on-pointer-down