From beb035b3e10b4aa7613adf08bd608e5c71c450b8 Mon Sep 17 00:00:00 2001
From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com>
Date: Tue, 17 Oct 2023 10:22:49 -0400
Subject: [PATCH] fix  file upload thumbnails (#629)

Internal issue: https://2u-internal.atlassian.net/browse/TNL-11085

File upload gallery cards had distorted thumbnails. The goal is to fix this.
I centered the thumbnails instead of stretching them. I had to change the card layout a bit to do that, so in order to make everything look fine, I worked a bit on margins and paddings and font-size in order to bring this close to the figma mockups. It's not perfect because when you resize the browser window, the grid does some resizing that doesn't look as good as in figma, but I think it should be good enough for now.
---
 .../table-components/GalleryCard.jsx          | 17 ++++++++------
 .../table-components/GalleryCard.scss         | 23 +++++++++++++++++++
 src/index.scss                                |  1 +
 3 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 src/files-and-uploads/table-components/GalleryCard.scss

diff --git a/src/files-and-uploads/table-components/GalleryCard.jsx b/src/files-and-uploads/table-components/GalleryCard.jsx
index 5728f2b3d..19d62ab58 100644
--- a/src/files-and-uploads/table-components/GalleryCard.jsx
+++ b/src/files-and-uploads/table-components/GalleryCard.jsx
@@ -32,8 +32,9 @@ const GalleryCard = ({
   });
 
   return (
-    <Card className={className} data-testid={`grid-card-${original.id}`}>
+    <Card className={`${className} w-100 gallery-card`} data-testid={`grid-card-${original.id}`}>
       <Card.Header
+        className="pr-0 pt-2 pb-2"
         actions={(
           <ActionRow>
             <FileMenu
@@ -52,23 +53,25 @@ const GalleryCard = ({
           </ActionRow>
         )}
       />
-      <Card.Section>
-        <div className="row align-items-center justify-content-center m-0">
+      <Card.Section className="pr-3 pl-3 pt-0 pb-0">
+        <div
+          className="row align-items-center justify-content-center m-0 thumbnail-container border rounded p-1"
+        >
           {original.thumbnail ? (
-            <Image src={src} style={{ height: '76px', width: '135.71px' }} className="border rounded p-1" />
+            <Image src={src} className="w-auto mw-100 mh-100 thumbnail-image" />
           ) : (
-            <div className="row border justify-content-center align-items-center rounded m-0" style={{ height: '76px', width: '135.71px' }}>
+            <div className="row justify-content-center align-items-center m-0">
               <Icon src={src} style={{ height: '48px', width: '48px' }} />
             </div>
           )}
         </div>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1} className="font-weight-bold small mt-3">
+          <Truncate lines={1} className="font-weight-bold mt-2 picture-title">
             {original.displayName}
           </Truncate>
         </div>
       </Card.Section>
-      <Card.Footer>
+      <Card.Footer className="p-3 pt-4">
         <Chip>
           {original.wrapperType}
         </Chip>
diff --git a/src/files-and-uploads/table-components/GalleryCard.scss b/src/files-and-uploads/table-components/GalleryCard.scss
new file mode 100644
index 000000000..318659b79
--- /dev/null
+++ b/src/files-and-uploads/table-components/GalleryCard.scss
@@ -0,0 +1,23 @@
+.gallery-card {
+  .thumbnail-container {
+    aspect-ratio: 16 / 9;
+
+    .thumbnail-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &.pgn__card {
+    .pgn__card-header {
+      .pgn__card-header-actions {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .picture-title {
+    font-size: 12px;
+  }
+}
diff --git a/src/index.scss b/src/index.scss
index bc0a403f1..f35f14087 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -19,3 +19,4 @@
 @import "course-updates/CourseUpdates";
 @import "export-page/CourseExportPage";
 @import "import-page/CourseImportPage";
+@import "files-and-uploads/table-components/GalleryCard";