runfix(cells): address multipart file preview issues [WPB-19357] (#19433)

* runfix(cells): address multipart file preview issues [WPB-19357]

* remove extraneous css

* add self closing tag

Author: V-Gira

src/script/components/MessagesList/Message/ContentMessage/asset/MultipartAssets/FileAssetCard/FileAssetSmall/FileAssetSmall.tsx

@@ -59,33 +59,32 @@ export const FileAssetSmall = ({
   };
 
   return (
-    <button
-      onClick={showModal}
-      css={hollowWrapperButtonStyles}
-      aria-label={t('cells.filePreviewButton.ariaLabel', {name})}
-    >
-      <FileCard.Root extension={extension} name={name} size={size}>
-        <FileCard.Header>
-          <FileCard.Icon type={isError ? 'unavailable' : 'file'} />
-          {!isError && <FileCard.Type />}
-          <FileAssetOptions src={src} name={name} extension={extension} onOpen={showModal} />
-        </FileCard.Header>
-        <FileCard.Name variant={isError ? 'secondary' : 'primary'} truncateAfterLines={2} />
-        <FilePreviewModal
-          id={id}
-          fileUrl={src}
-          filePdfPreviewUrl={pdfPreviewUrl}
-          fileImagePreviewUrl={imagePreviewUrl}
-          fileName={name}
-          fileExtension={extension}
-          senderName={senderName}
-          timestamp={timestamp}
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          isError={isError}
-          isLoading={isLoading}
-        />
-      </FileCard.Root>
-    </button>
+    <FileCard.Root extension={extension} name={name} size={size}>
+      <button
+        onClick={showModal}
+        css={hollowWrapperButtonStyles}
+        aria-label={t('cells.filePreviewButton.ariaLabel', {name})}
+      />
+      <FileCard.Header>
+        <FileCard.Icon type={isError ? 'unavailable' : 'file'} />
+        {!isError && <FileCard.Type />}
+        <FileAssetOptions src={src} name={name} extension={extension} onOpen={showModal} />
+      </FileCard.Header>
+      <FileCard.Name variant={isError ? 'secondary' : 'primary'} truncateAfterLines={2} />
+      <FilePreviewModal
+        id={id}
+        fileUrl={src}
+        filePdfPreviewUrl={pdfPreviewUrl}
+        fileImagePreviewUrl={imagePreviewUrl}
+        fileName={name}
+        fileExtension={extension}
+        senderName={senderName}
+        timestamp={timestamp}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        isError={isError}
+        isLoading={isLoading}
+      />
+    </FileCard.Root>
   );
 };

src/script/components/MessagesList/Message/ContentMessage/asset/MultipartAssets/MultipartAssets.styles.ts

@@ -63,8 +63,11 @@ export const fileCardStyles = {
 
 export const hollowWrapperButtonStyles: CSSObject = {
   padding: '0',
+  position: 'absolute',
+  left: '0',
+  width: '100%',
+  height: '100%',
   border: 'none',
   background: 'none',
-  textAlign: 'unset',
   cursor: 'pointer',
 };

src/script/components/MessagesList/Message/ContentMessage/asset/MultipartAssets/VideoAssetCard/VideoAssetSmall/VideoAssetSmall.tsx

@@ -52,21 +52,21 @@ export const VideoAssetSmall = ({
 
   return (
     <>
-      <button
-        css={hollowWrapperButtonStyles}
-        onClick={() => setIsOpen(true)}
-        aria-label={t('accessibility.conversationAssetImageAlt', {
-          username: senderName,
-          messageDate: timestamp,
-        })}
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-        aria-controls={id}
+      <MediaFilePreviewCard
+        label={src ? t('conversationFileVideoPreviewLabel', {src}) : ''}
+        isLoading={isLoading}
+        isError={isError}
       >
-        <MediaFilePreviewCard
-          label={src ? t('conversationFileVideoPreviewLabel', {src}) : ''}
-          isLoading={isLoading}
-          isError={isError}
+        <button
+          css={hollowWrapperButtonStyles}
+          onClick={() => setIsOpen(true)}
+          aria-label={t('accessibility.conversationAssetImageAlt', {
+            username: senderName,
+            messageDate: timestamp,
+          })}
+          aria-haspopup="dialog"
+          aria-expanded={isOpen}
+          aria-controls={id}
         >
           {!isLoading && !isError && (
             <>
@@ -76,8 +76,8 @@ export const VideoAssetSmall = ({
               </div>
             </>
           )}
-        </MediaFilePreviewCard>
-      </button>
+        </button>
+      </MediaFilePreviewCard>
       <FileFullscreenModal
         id={id}
         isOpen={isOpen}