closes #614

src/gui/src/UI/UIDesktop.js

@@ -215,7 +215,7 @@ async function UIDesktop(options){
 
         // Update matching items
         // set new item name
-        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)).replaceAll(' ', ' '));
+        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)));
 
         // Set new icon
         const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
@@ -419,7 +419,7 @@ async function UIDesktop(options){
 
         // Update matching items
         // Set new item name
-        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)).replaceAll(' ', ' '));
+        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)));
 
         // Set new icon
         const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);

src/gui/src/UI/UIItem.js

@@ -162,7 +162,7 @@ function UIItem(options){
         h += `</div>`;
 
         // name
-        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${options.is_trash ? i18n('trash') : html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;')}</span>`
+        h += `<pre class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${options.is_trash ? i18n('trash') : html_encode(truncate_filename(options.name))}</pre>`
         // name editor
         h += `<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${html_encode(options.name)}</textarea>`
     h += `</div>`;
@@ -653,7 +653,7 @@ function UIItem(options){
                 UIAlert(`The name ".." is not allowed, because it is a reserved name. Please choose another name.`)
             }
 
-            $(el_item_name).html(html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;'));
+            $(el_item_name).html(html_encode(truncate_filename(options.name)));
             $(el_item_name).show();
             $(el_item_name_editor).val($(el_item).attr('data-name'));
             $(el_item_name_editor).hide();
@@ -1412,7 +1412,7 @@ function UIItem(options){
     // --------------------------------------------------------
     $(el_item_name_editor).on('input keypress focus', function(){
         const val = $(el_item_name_editor).val();
-        $('.item-name-shadow').html(html_encode(val).replaceAll(' ', '&nbsp;'));
+        $('.item-name-shadow').html(html_encode(val));
         if(val !== ''){
             const w = $('.item-name-shadow').width();
             const h = $('.item-name-shadow').height();

src/gui/src/css/style.css

@@ -77,7 +77,10 @@
     font-optical-sizing: auto;
     font-style: normal;
     font-variation-settings: "slnt"0;
+}
 
+pre{
+    font-family: "Inter", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
 }
 
 :root {
@@ -617,8 +620,9 @@ span.header-sort-icon img {
     display: inline-block;
     font-weight: bold;
     border-radius: 4px;
-    line-break: anywhere;
     box-sizing: border-box;
+    white-space: pre-wrap;
+    word-break: break-word;
 }
 
 .item-name {

src/gui/src/helpers.js

@@ -2095,7 +2095,7 @@ window.rename_file = async(options, new_name, old_name, old_path, el_item, el_it
             }
 
             // Set new item name
-            $(`.item[data-uid='${$(el_item).attr('data-uid')}'] .item-name`).html(html_encode(truncate_filename(new_name)).replaceAll(' ', ' '));
+            $(`.item[data-uid='${$(el_item).attr('data-uid')}'] .item-name`).html(html_encode(truncate_filename(new_name)));
             $(el_item_name).show();
 
             // Hide item name editor

src/gui/src/helpers/get_html_element_from_options.js

@@ -136,7 +136,7 @@ const get_html_element_from_options = async function(options){
         h += `</div>`;
 
         // name
-        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;')}</span>`
+        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name))}</span>`
         // name editor
         h += `<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${html_encode(options.name)}</textarea>`
     h += `</div>`;