fix: wrap long resource names when truncation is disabled

packages/web-pkg/src/components/FilesList/ResourceName.vue

@@ -18,10 +18,14 @@
       /></span>
     </template>
     <span v-else class="min-w-0 leading-snug"
-      ><span class="oc-resource-basename break-normal text-role-on-surface"
-        ><oc-filter-highlight :text="displayName" :term="term" /></span
-      ><span v-if="showExtension" class="oc-resource-extension whitespace-pre text-role-on-surface"
-        ><oc-filter-highlight :text="displayExtension" :term="term" /></span
+      ><span class="oc-resource-basename wrap-anywhere text-role-on-surface"
+        ><template v-if="showExtension"
+          ><oc-filter-highlight :text="displayNameHead" :term="term" /><span
+            class="whitespace-nowrap"
+            ><oc-filter-highlight :text="displayNameTail" :term="term" /><span
+              class="oc-resource-extension text-role-on-surface"
+              ><oc-filter-highlight :text="displayExtension" :term="term" /></span></span></template
+        ><oc-filter-highlight v-else :text="displayName" :term="term" /></span
     ></span>
     <oc-icon
       v-if="isFavoriteDisplayed && isFavorite"
@@ -77,6 +81,11 @@ const displayName = computed(() => {
   return name
 })
 
+// last char of the basename is kept together with the extension so it never wraps alone
+const displayNameChars = computed(() => Array.from(unref(displayName)))
+const displayNameHead = computed(() => unref(displayNameChars).slice(0, -1).join(''))
+const displayNameTail = computed(() => unref(displayNameChars).slice(-1).join(''))
+
 const showExtension = computed(() => {
   return unref(isFile) && extension && isExtensionDisplayed && !name.startsWith('.')
 })

packages/web-pkg/tests/unit/components/FilesList/ResourceName.spec.ts

@@ -88,20 +88,23 @@ describe('OcResourceName', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('does not truncate a very long name when disabled', () => {
+  it('allows the basename to wrap anywhere when truncation is disabled', () => {
     const wrapper = shallowMount(Name, {
       props: {
-        fullPath:
-          'super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt',
-        name: '.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt',
-        extension: 'txt',
+        fullPath: 'photos/PXL_20260703_163401420.jpg',
+        name: 'PXL_20260703_163401420.jpg',
+        extension: 'jpg',
         type: 'file',
         truncateName: false
       },
       global: { stubs: { OcFilterHighlight: false } }
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const basename = wrapper.find('.oc-resource-basename')
+    expect(basename.text()).toBe('PXL_20260703_163401420.jpg')
+    expect(basename.classes()).toContain('wrap-anywhere')
+    expect(wrapper.find('.truncate').exists()).toBeFalsy()
+    expect(wrapper.find('.oc-resource-extension').text()).toBe('.jpg')
   })
 
   it('shows the name as HTML title if the path is not displayed', () => {

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap

@@ -6,12 +6,6 @@ exports[`OcResourceName > does not show the name as HTML title if the path is be
 <!--v-if--></span>"
 `;
 
-exports[`OcResourceName > does not truncate a very long name when disabled 1`] = `
-"<span class="oc-resource-name flex items-center min-w-0" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="min-w-0 leading-snug"><span class="oc-resource-basename break-normal text-role-on-surface"><span class="oc-filter-highlight">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt</span></span>
-<!--v-if--></span>
-<!--v-if--></span>"
-`;
-
 exports[`OcResourceName > doesn't add extension to hidden folder 1`] = `
 "<span class="oc-resource-name flex items-center min-w-0" data-test-resource-path=".hidden" data-test-resource-name=".hidden" data-test-resource-type="folder" title=".hidden"><span class="truncate leading-snug"><span class="oc-resource-basename whitespace-pre text-role-on-surface"><span class="oc-filter-highlight">.hidden</span></span></span>
 <!--v-if-->