From 43e4184dced1e494960ea916f7d8dd0a791bca36 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 15 May 2026 11:17:26 +0200
Subject: [PATCH] 141473: Hide load more/less section completely when the
 buttons are hidden

---
 ...etadata-representation-list.component.html | 37 ++++++++++---------
 .../metadata-representation-list.component.ts |  5 +++
 ...-metadata-representation-list.component.ts | 11 +++++-
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
index 058dd96952b..e527896106e 100644
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
@@ -1,28 +1,31 @@
 <ds-metadata-field-wrapper [label]="label">
-  @for (objectPage of objects; track objectPage; let i = $index) {
+  @for (objectPage of objects; track objectPage; let i = $index; let lastPage = $last) {
     <ng-container *ngVar="(objectPage | async) as representations">
-      @for (rep of representations; track rep) {
+      @for (rep of representations; track rep; let last = $last) {
         <ds-metadata-representation-loader
           [mdRepresentation]="rep">
         </ds-metadata-representation-loader>
+        @if (!last || !lastPage) {
+          <span [innerHTML]="separator"></span>
+        }
       }
-      @if ((i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)) {
+      @if (lastPage && (i > 0) && (!representations || representations?.length === 0)) {
         <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
       }
-      @if ((i + 1) === objects.length && representations?.length > 0) {
-        <div class="d-inline-block w-100 mt-2">
-          @if ((objects.length * incrementBy) < total) {
-            <div class="float-start">
-              <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
-              translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
-            </div>
-          }
-          @if (objects.length > 1) {
-            <div class="float-end">
-              <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
-              translate:{ amount: representations?.length } }}</button>
-            </div>
-          }
+      @if (lastPage && representations?.length > 0 && ((objects.length * incrementBy) < total || objects.length > 1)) {
+        <div class="d-flex justify-content-between w-100 mt-2">
+          <div>
+            @if ((objects.length * incrementBy) < total) {
+                <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+                  translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
+            }
+          </div>
+          <div>
+            @if (objects.length > 1) {
+                <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+                  translate:{ amount: representations?.length } }}</button>
+            }
+          </div>
         </div>
       }
     </ng-container>
diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.ts b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.ts
index 33d981adcc7..228a1de8609 100644
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.ts
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.ts
@@ -72,6 +72,11 @@ export class MetadataRepresentationListComponent extends AbstractIncrementalList
    */
   @Input() incrementBy = 10;
 
+  /**
+   * The separator used to split the metadata values (can contain HTML)
+   */
+  @Input() separator = '<br>';
+
   /**
    * The total amount of metadata values available
    */
diff --git a/src/app/item-page/simple/metadata-representation-list/themed-metadata-representation-list.component.ts b/src/app/item-page/simple/metadata-representation-list/themed-metadata-representation-list.component.ts
index 72ffe9ea7d1..de613f95629 100644
--- a/src/app/item-page/simple/metadata-representation-list/themed-metadata-representation-list.component.ts
+++ b/src/app/item-page/simple/metadata-representation-list/themed-metadata-representation-list.component.ts
@@ -17,7 +17,14 @@ import { MetadataRepresentationListComponent } from './metadata-representation-l
   ],
 })
 export class ThemedMetadataRepresentationListComponent extends ThemedComponent<MetadataRepresentationListComponent> {
-  protected inAndOutputNames: (keyof MetadataRepresentationListComponent & keyof this)[] = ['parentItem', 'itemType', 'metadataFields', 'label', 'incrementBy'];
+  protected inAndOutputNames: (keyof MetadataRepresentationListComponent & keyof this)[] = [
+    'parentItem',
+    'itemType',
+    'metadataFields',
+    'label',
+    'incrementBy',
+    'separator',
+  ];
 
   @Input() parentItem: Item;
 
@@ -29,6 +36,8 @@ export class ThemedMetadataRepresentationListComponent extends ThemedComponent<M
 
   @Input() incrementBy: number;
 
+  @Input() separator: string;
+
   protected getComponentName(): string {
     return 'MetadataRepresentationListComponent';
   }