🐛 Fix long file names (#6216)

* 🔧 Add truncate str macro

* 🐛 Use truncate instead of prune to prevent title override

* 💄 Use text-overflow ellipsis on file names

* 📎 Add #10662 to 2.7 bugfixes

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 [_]

frontend/src/app/main/ui/exports/assets.scss

@@ -304,6 +304,7 @@
     }
     .file-name-label {
       @include bodyLargeTypography;
+      @include textEllipsis;
     }
   }
   &.loading {

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 {

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

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