Merge remote-tracking branch 'refs/remotes/origin/dev' into stable

Author: adrians5j

packages/api-file-manager-s3/src/assetDelivery/s3/SharpTransform.ts

@@ -76,7 +76,7 @@ export class SharpTransform implements AssetTransformationStrategy {
                 const buffer = await optimizedImage.getContents();
                 const transformedBuffer = sharp(buffer, { animated: this.isAssetAnimated(asset) })
                     .withMetadata()
-                    .resize({ width })
+                    .resize({ width, withoutEnlargement: true })
                     .toBuffer();
 
                 /**

packages/app-file-manager/src/components/Grid/File.tsx

@@ -74,13 +74,13 @@ export const FileThumbnail = ({ file, selected, onSelect, children }: FileProps)
                 </LazyLoad>
             </FileBody>
             <FileLabel data-testid={"fm-file-wrapper-file-label"}>
-                <Typography className="type" use={"overline"}>
+                <Typography className="type" use={"overline"} tag={"span"}>
                     {file.type}
                 </Typography>
-                <Typography className="name" use={"body2"}>
+                <Typography className="name" use={"body2"} tag={"span"}>
                     {file.name}
                 </Typography>
-                <Typography className="createdOn" use={"caption"}>
+                <Typography className="createdOn" use={"caption"} tag={"span"}>
                     <TimeAgo datetime={file.createdOn} />
                 </Typography>
             </FileLabel>

packages/app-file-manager/src/components/UploadStatus/styled.tsx

@@ -18,12 +18,11 @@ const animateShow = keyframes`
 export const StatusWrapper = styled.div`
     border-radius: 28px;
     width: 320px;
-    transform: translate(-50%, -50%);
     position: absolute;
     box-shadow: 0 2px 6px rgba(170, 185, 200, 0.4);
     color: var(--mdc-theme-on-surface);
     background-color: #fff;
-    left: calc(50vw - 160px);
+    left: calc(50% - 160px);
     bottom: 16px;
     display: flex;
     align-items: center;

packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx

@@ -45,6 +45,7 @@ const t = i18n.ns("app-admin/file-manager/file-manager-view");
 const FileListWrapper = styled("div")({
     zIndex: 60,
     height: "calc(100vh - 94px)",
+    position: "relative",
     ".mdc-data-table": {
         display: "inline-table"
     }