85862: Added .dont-break-out to truncatable part, item list titles and fixed breadcrumb overflow

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>
 

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;
 }

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">

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">

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">

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">-->

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">

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>

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">

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>

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;