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.

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>

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

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