From e7f0921e6ed52ec25d60f70c61d19cddcfd2a656 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 14 Dec 2021 09:30:38 +0100
Subject: [PATCH 1/3] 85862: Handling very long strings for metadata/files on
 item page, edit metadata/bitstreams page

---
 .../item-edit-bitstream.component.html         |  6 ++++--
 .../edit-in-place-field.component.html         |  2 +-
 .../metadata-uri-values.component.html         |  2 +-
 .../metadata-values.component.html             |  2 +-
 .../file-download-link.component.html          |  2 +-
 src/styles/_global-styles.scss                 | 18 ++++++++++++++++++
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
index 62014f06bd..5794288018 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
@@ -1,8 +1,10 @@
 <ng-template #bitstreamView>
   <div class="{{columnSizes.columns[0].buildClasses()}} row-element d-flex">
     <ng-content select="[slot=drag-handle]"></ng-content>
-    <div class="float-left d-flex align-items-center">
-      {{ bitstreamName }}
+    <div class="float-left d-flex align-items-center overflow-hidden">
+      <span class="text-truncate">
+        {{ bitstreamName }}
+      </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[1].buildClasses()}} row-element d-flex align-items-center">
diff --git a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
index fe46906f47..f5543af971 100644
--- a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
+++ b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
@@ -26,7 +26,7 @@
 <td class="w-100">
     <div class="value-field">
         <div *ngIf="!(editable | async)">
-            <span>{{metadata?.value}}</span>
+            <span class="dont-break-out">{{metadata?.value}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
             <textarea class="form-control" type="textarea" attr.aria-labelledby="fieldValue" [(ngModel)]="metadata.value" [dsDebounce]
diff --git a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
index b5d7c118dd..9091beb6c7 100644
--- a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
+++ b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <a *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value">
+    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value">
        {{ linktext || mdValue.value }}<span *ngIf="!last" [innerHTML]="separator"></span>
     </a>
 </ds-metadata-field-wrapper>
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.html b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
index 980c940255..2dc841bc1b 100644
--- a/src/app/item-page/field-components/metadata-values/metadata-values.component.html
+++ b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <span *ngFor="let mdValue of mdValues; let last=last;">
+    <span class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;">
         {{mdValue.value}}<span *ngIf="!last" [innerHTML]="separator"></span>
     </span>
 </ds-metadata-field-wrapper>
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html
index 0155c40b0a..ba81ee3d20 100644
--- a/src/app/shared/file-download-link/file-download-link.component.html
+++ b/src/app/shared/file-download-link/file-download-link.component.html
@@ -1,4 +1,4 @@
-<a [routerLink]="(bitstreamPath$| async)?.routerLink" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
+<a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
   <span *ngIf="!(canDownload$ |async)"><i class="fas fa-lock"></i></span>
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index f7f38f77cd..e337539c15 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -74,3 +74,21 @@ ngb-modal-backdrop {
   }
 }
 
+.dont-break-out {
+  /* These are technically the same, but use both */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+
+}

From c2b5ce191ad9479dfdc0d4e9af902c25f306876a Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 16 Dec 2021 13:15:45 +0100
Subject: [PATCH 2/3] 85862: Added .dont-break-out to truncatable part, item
 list titles and fixed breadcrumb overflow

---
 src/app/breadcrumbs/breadcrumbs.component.html     |  4 ++--
 src/app/breadcrumbs/breadcrumbs.component.scss     | 14 ++++++++++++++
 ...issue-search-result-list-element.component.html |  4 ++--
 ...olume-search-result-list-element.component.html |  4 ++--
 ...urnal-search-result-list-element.component.html |  4 ++--
 ...oject-search-result-list-element.component.html |  4 ++--
 .../item-edit-bitstream.component.html             |  6 +++++-
 ...plain-text-metadata-list-element.component.html |  2 +-
 .../item-search-result-list-element.component.html |  4 ++--
 .../truncatable-part.component.html                |  2 +-
 src/styles/_custom_variables.scss                  |  1 +
 11 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
index beb5039178..51524fde48 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -10,11 +10,11 @@
     </nav>
 
     <ng-template #breadcrumb let-text="text" let-url="url">
-        <li class="breadcrumb-item"><a [routerLink]="url">{{text | translate}}</a></li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate">{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">
-        <li class="breadcrumb-item active" aria-current="page">{{text | translate}}</li>
+        <li class="breadcrumb-item active" aria-current="page"><div class="breadcrumb-item-limiter"><div class="text-truncate">{{text | translate}}</div></div></li>
     </ng-template>
 </ng-container>
 
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
index 6967b53de1..412dca87db 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -10,6 +10,19 @@
   background-color: var(--ds-breadcrumb-bg);
 }
 
+li.breadcrumb-item {
+  display: flex;
+}
+
+.breadcrumb-item-limiter {
+  display: inline-block;
+  max-width: var(--ds-breadcrumb-max-length);
+  > * {
+    max-width: 100%;
+    display: block;
+  }
+}
+
 li.breadcrumb-item > a {
   color: var(--ds-breadcrumb-link-color) !important;
 }
@@ -18,5 +31,6 @@ li.breadcrumb-item.active {
 }
 
 .breadcrumb-item+ .breadcrumb-item::before {
+  display: block;
   content: quote("•") !important;
 }
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
index fa4c06d36a..6d88c9761b 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
index 71aeb79c35..b7cb645e31 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
index 05db5b8702..988fb2d4b5 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
index ae1d8c7510..d711ad7c18 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-truncatable [id]="dso.id">
     <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title"
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
        [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <!--<span class="text-muted">-->
     <!--<ds-truncatable-part [id]="dso.id" [minLines]="1">-->
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
index 5794288018..ccb37eb6ac 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
@@ -9,12 +9,16 @@
   </div>
   <div class="{{columnSizes.columns[1].buildClasses()}} row-element d-flex align-items-center">
     <div class="w-100">
+      <span class="text-truncate">
       {{ bitstream?.firstMetadataValue('dc.description') }}
+      </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[2].buildClasses()}} row-element d-flex align-items-center">
     <div class="text-center w-100">
-      {{ (format$ | async)?.shortDescription }}
+        <span class="text-truncate">
+            {{ (format$ | async)?.shortDescription }}
+        </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[3].buildClasses()}} row-element d-flex align-items-center">
diff --git a/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html b/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html
index 3e017e1ae8..31b670b1a3 100644
--- a/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html
+++ b/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html
@@ -1,3 +1,3 @@
 <div>
-  <span>{{metadataRepresentation.getValue()}}</span>
+  <span class="dont-break-out">{{metadataRepresentation.getValue()}}</span>
 </div>
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
index 80a4fd81fd..8898632eb5 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
@@ -2,9 +2,9 @@
 
 <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title"
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
        [innerHTML]="dsoTitle"></a>
-    <span *ngIf="linkType == linkTypes.None" class="lead item-list-title"
+    <span *ngIf="linkType == linkTypes.None" class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
       <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
index bf1212a6bf..76595c901f 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -1,5 +1,5 @@
 <div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
-    <div class="content">
+    <div class="content dont-break-out">
         <ng-content></ng-content>
     </div>
 </div>
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index b5e5cd6f25..66e0e87f93 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -79,6 +79,7 @@
   --ds-breadcrumb-bg: #{$gray-200} !important;
   --ds-breadcrumb-link-color: #{$cyan};
   --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
+  --ds-breadcrumb-max-length: 200px;
 
   --ds-slider-color: #{$green};
   --ds-slider-handle-width: 18px;

From 0592e9a32d43722daf9985ba2083db7065a71bfb Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 16 Dec 2021 17:28:34 +0100
Subject: [PATCH 3/3] 85862: fixed test

---
 src/app/breadcrumbs/breadcrumbs.component.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
index b63a7cee20..69387e7534 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
@@ -72,7 +72,7 @@ describe('BreadcrumbsComponent', () => {
     expect(breadcrumbs.length).toBe(3);
     expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
     expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
-    expectBreadcrumb(breadcrumbs[2], 'bc 2', null);
+    expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
   });
 
 });