Merge pull request #857 from IQSS/839-wrappers-break-when-entering-long-descriptions-without-spacing-on-datasets

Fix: add line break to all items' title and description for long text w/o spacing

Author: ofahimIQSS

CHANGELOG.md

@@ -14,6 +14,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 
 ### Fixed
 
+- Add word-break to items text to prevent layout issues when long descriptions without spaces are entered. (#839)
 - Show toast notification when API token is copied to clipboard.
 
 ### Removed

src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetsFilters.module.scss

@@ -9,6 +9,7 @@
 
 .facets-list {
   padding-top: 1rem;
+  word-break: break-word;
 
   &:empty {
     padding-top: 0;

src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss

@@ -15,6 +15,7 @@
   display: flex;
   gap: 1rem;
   justify-content: space-between;
+  word-break: break-word;
 
   a {
     @include link-hover-underlined;

src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss

@@ -10,6 +10,7 @@
   padding: 6px 10px;
   border: 1px solid $dv-dataset-border-color;
   border-radius: 4px;
+  word-break: break-word;
 }
 
 .card-header-container {

src/sections/collection/collection-items-panel/items-list/file-card/FileCard.module.scss

@@ -10,6 +10,7 @@
   padding: 6px 10px;
   border: 1px solid $dv-file-border-color;
   border-radius: 4px;
+  word-break: break-word;
 }
 
 .card-header-container {

src/sections/shared/citation/Citation.module.scss

@@ -2,6 +2,7 @@
 
 .description {
   margin-bottom: 1em;
+  word-break: break-word;
 }
 
 .text {

src/sections/shared/hierarchy/BreadcrumbsGenerator.module.scss

@@ -1,3 +1,4 @@
 .breadcrumb-generator {
   padding-top: 0.5rem;
+  word-break: break-word;
 }

tests/component/sections/collection/collection-items-panel/collection-card/CollectionCard.spec.tsx

@@ -27,6 +27,7 @@ describe('CollectionCard', () => {
 
     cy.findByAltText(collectionPreview.name).should('exist')
   })
+
   it('should render the card with user roles', () => {
     const userRoles = ['Admin', 'Contributor', 'Curator']
     const collectionPreview = CollectionItemTypePreviewMother.create({ userRoles: userRoles })
@@ -37,4 +38,22 @@ describe('CollectionCard', () => {
       cy.findByText(role).should('exist')
     })
   })
+
+  it('should not overflow horizontally with long unspaced titles', () => {
+    const longName = 'abc'.repeat(50)
+    const collectionPreview = CollectionItemTypePreviewMother.create({
+      name: longName
+    })
+
+    cy.customMount(
+      <CollectionCard collectionPreview={collectionPreview} parentCollectionAlias="" />
+    )
+
+    cy.contains(longName).should('exist')
+    // Ensure the title wraps within the available width (no horizontal overflow)
+    cy.get('[data-testid="collection-card"] header a').then(($a) => {
+      const el = $a[0]
+      expect(el.scrollWidth).to.be.lte(el.clientWidth)
+    })
+  })
 })