fix: allow word breaking for long file names

[Samk13]

❤️ Thank you for your contribution!

Description

• long file names breaks records landing page, this commit fix it.
• closes UI: Long file names break layout on landing page UI #3195

Screen.Recording.2025-10-09.at.15.47.13.mov

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

• I'm aware of the code of conduct.
• I've created logical separate commits and followed the commit message format.
• I've added relevant test cases.
• I've added relevant documentation.
• I've marked translation strings.
• I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
• I've NOT included third-party code (copy/pasted source code or new dependencies).
  • If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect on Discord.

Frontend

• I've followed the CSS/JS and React guidelines.
• I've followed the web accessibility guidelines.
• I've followed the user interface guidelines.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

1. You license your contribution under the same terms as the current repository’s license.
2. You agree that you have the right to license your contribution under the current repository’s license.

[fenekku]

Good find, at first I thought this was a regression of #2158, but actually that one only worked with filenames that had spaces in them allowing for default word breaks.

The recommended approach has been to create a utility class and then apply that class to the elements. See comments. @kpsherva can also validate if this is the appropriate way.

[fenekku]

Utility classes is favored if I remember correctly:

Suggested change

	#preview-file-title,
	td.ten.wide a {
	word-break: break-word;
	overflow-wrap: break-word;
	}
	.overflow-break-and-wrap-word { // or another catchy name
	word-break: break-word;
	overflow-wrap: break-word;
	}

Then place it on <td class="ten wide overflow-break-and-wrap-word"> and the #preview-file-title element.

[Samk13]

Thanks, @fenekku, I think the change fixes the issue (affects Zenodo too).
Since this file already includes similar one-off overrides, keeping the rule here makes sense and keeps it scoped to the affected elements.
If there’s interest in turning it into a utility class later, that’s fine but it’s not really needed for this case.

[github-actions]

This PR was automatically marked as stale.