From d60e3587667634283922ff96aef059f53ec6bde2 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 14 Mar 2023 22:14:01 +0100
Subject: [PATCH] Fix media viewer thumbnails exceeding max width

---
 .../media-viewer-image.component.scss         | 24 +++++++++++++++----
 .../media-viewer-video.component.scss         | 10 ++++++--
 .../publication/publication.component.html    |  4 ++--
 .../untyped-item/untyped-item.component.html  |  4 ++--
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
index 72ce4b04d9..cba963b6fa 100644
--- a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
+++ b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
@@ -1,6 +1,20 @@
-.ngx-gallery {
-  display: inline-block;
-  margin-bottom: 20px;
-  width: 340px !important;
-  height: 279px !important;
+:host ::ng-deep {
+  .ngx-gallery {
+    width: unset !important;
+    height: unset !important;
+  }
+
+  ngx-gallery-image {
+    max-width: 340px !important;
+
+    .ngx-gallery-image {
+      background-position: left;
+    }
+  }
+
+  ngx-gallery-image:after {
+    padding-top: 75%;
+    display: block;
+    content: '';
+  }
 }
diff --git a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
index 7702da7361..bb8b9d360e 100644
--- a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
+++ b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
@@ -1,4 +1,10 @@
 video {
-  width: 340px;
-  height: 279px;
+  width: 100%;
+  height: auto;
+  max-width: 340px;
+}
+
+.buttons {
+  display: flex;
+  gap: .25rem;
 }
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index bace9fcd0a..658d637107 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -22,9 +22,9 @@
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
-    <ng-container *ngIf="mediaViewer.image">
+    <div *ngIf="mediaViewer.image" class="mb-2">
       <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
-    </ng-container>
+    </div>
     <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-metadata-representation-list class="ds-item-page-mixed-author-field"
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 04794717f1..7a090b1178 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -25,9 +25,9 @@
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
-    <ng-container *ngIf="mediaViewer.image">
+    <div *ngIf="mediaViewer.image" class="mb-2">
       <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
-    </ng-container>
+    </div>
     <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-metadata-representation-list class="ds-item-page-mixed-author-field"