From 480c224250271d8b0607d3520332f15788cbbef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elena=20Torr=C3=B3?= <elenatorro@gmail.com>
Date: Thu, 3 Apr 2025 16:06:02 +0200
Subject: [PATCH] :bug: Fix long file names (#6216)

* :wrench: Add truncate str macro

* :bug: Use truncate instead of prune to prevent title override

* :lipstick: Use text-overflow ellipsis on file names

* :paperclip: Add #10662 to 2.7 bugfixes
---
 CHANGES.md                                          | 1 +
 common/src/app/common/data/macros.cljc              | 7 ++++++-
 frontend/src/app/main/data/workspace.cljs           | 2 +-
 frontend/src/app/main/ui/exports/assets.scss        | 1 +
 frontend/src/app/main/ui/exports/files.scss         | 2 ++
 frontend/src/app/main/ui/workspace/left_header.cljs | 2 +-
 frontend/src/app/main/ui/workspace/left_header.scss | 4 ++++
 7 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 5b0e9abe8..2abf70c86 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -16,6 +16,7 @@
 - Fix SVG `stroke-linecap` property when importing SVGs [Taiga #9489](https://tree.taiga.io/project/penpot/issue/9489)
 - Fix position problems cutting-pasting a component [Taiga #10677](https://tree.taiga.io/project/penpot/issue/10677)
 - Fix design tab has a horizontal scroll [Taiga #10660](https://tree.taiga.io/project/penpot/issue/10660)
+- Fix long file names being clipped when longer than allowed length [Taiga #10662](https://tree.taiga.io/project/penpot/issue/10662)
 
 ## 2.6.0 (Unreleased)
 
diff --git a/common/src/app/common/data/macros.cljc b/common/src/app/common/data/macros.cljc
index f339a7344..e0096b21c 100644
--- a/common/src/app/common/data/macros.cljc
+++ b/common/src/app/common/data/macros.cljc
@@ -6,7 +6,7 @@
 
 (ns app.common.data.macros
   "Data retrieval & manipulation specific macros."
-  (:refer-clojure :exclude [get-in select-keys str with-open min max])
+  (:refer-clojure :exclude [get-in select-keys str with-open max])
   #?(:cljs (:require-macros [app.common.data.macros]))
   (:require
    #?(:clj [clojure.core :as c]
@@ -144,3 +144,8 @@
                  (str "expr assert: " (pr-str expr)))]
      (when *assert*
        `(runtime-assert ~hint (fn [] ~expr))))))
+
+(defn truncate
+  "Truncates a string to a certain length"
+  [s max-length]
+  (subs s 0 (min max-length (count s))))
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index 23362e93a..c599f9b3a 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -698,7 +698,7 @@
 (defn rename-file
   [id name]
   {:pre [(uuid? id) (string? name)]}
-  (let [name (str/prune name 200)]
+  (let [name (dm/truncate name 200)]
     (ptk/reify ::rename-file
       IDeref
       (-deref [_]
diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss
index d9873cd61..eef0d5516 100644
--- a/frontend/src/app/main/ui/exports/assets.scss
+++ b/frontend/src/app/main/ui/exports/assets.scss
@@ -304,6 +304,7 @@
     }
     .file-name-label {
       @include bodyLargeTypography;
+      @include textEllipsis;
     }
   }
   &.loading {
diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss
index c95f6b64a..adbdf8800 100644
--- a/frontend/src/app/main/ui/exports/files.scss
+++ b/frontend/src/app/main/ui/exports/files.scss
@@ -199,6 +199,7 @@
 .file-entry {
   .file-name {
     @include flexRow;
+
     .file-icon {
       @include flexCenter;
       height: $s-16;
@@ -211,6 +212,7 @@
     }
     .file-name-label {
       @include bodyLargeTypography;
+      @include textEllipsis;
     }
   }
   &.loading {
diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index 757012b97..875907f01 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -132,7 +132,7 @@
             :saved i/status-tick
             :error i/status-wrong
             nil)]
-         file-name])]
+         [:div {:class (stl/css :file-name-label)} file-name]])]
      (when ^boolean shared?
        [:span {:class (stl/css :shared-badge)} i/library])
      [:div {:class (stl/css :menu-section)}
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index df9ea3583..c858941ab 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -54,6 +54,10 @@
   flex-direction: row;
 }
 
+.file-name-label {
+  @include textEllipsis;
+}
+
 .file-name-input {
   @include flexCenter;
   width: 100%;