From d0f2a865bc57e7d41cce99acb2ad47b226983e8b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 10 Oct 2023 17:07:03 +1100
Subject: [PATCH] make file, image viewer wide (#1444)

---
 src/app/organisms/room/message/FileContent.tsx  | 13 +++++++++++--
 src/app/organisms/room/message/ImageContent.tsx |  6 +++++-
 src/app/organisms/room/message/styles.css.ts    |  5 +++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/app/organisms/room/message/FileContent.tsx b/src/app/organisms/room/message/FileContent.tsx
index c6bd45d..303c453 100644
--- a/src/app/organisms/room/message/FileContent.tsx
+++ b/src/app/organisms/room/message/FileContent.tsx
@@ -25,6 +25,7 @@ import { bytesToSize } from '../../../utils/common';
 import { TextViewer } from '../../../components/text-viewer';
 import { READABLE_TEXT_MIME_TYPES } from '../../../utils/mimeTypes';
 import { PdfViewer } from '../../../components/Pdf-viewer';
+import * as css from './styles.css';
 
 export type FileContentProps = {
   body: string;
@@ -94,7 +95,11 @@ function ReadTextFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, '
                 clickOutsideDeactivates: true,
               }}
             >
-              <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+              <Modal
+                className={css.ModalWide}
+                size="500"
+                onContextMenu={(evt: any) => evt.stopPropagation()}
+              >
                 <TextViewer
                   name={body}
                   text={textState.data}
@@ -159,7 +164,11 @@ function ReadPdfFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'i
                 clickOutsideDeactivates: true,
               }}
             >
-              <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+              <Modal
+                className={css.ModalWide}
+                size="500"
+                onContextMenu={(evt: any) => evt.stopPropagation()}
+              >
                 <PdfViewer
                   name={body}
                   src={pdfState.data}
diff --git a/src/app/organisms/room/message/ImageContent.tsx b/src/app/organisms/room/message/ImageContent.tsx
index 485bed4..9df360b 100644
--- a/src/app/organisms/room/message/ImageContent.tsx
+++ b/src/app/organisms/room/message/ImageContent.tsx
@@ -81,7 +81,11 @@ export const ImageContent = as<'div', ImageContentProps>(
                   clickOutsideDeactivates: true,
                 }}
               >
-                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+                <Modal
+                  className={css.ModalWide}
+                  size="500"
+                  onContextMenu={(evt: any) => evt.stopPropagation()}
+                >
                   <ImageViewer
                     src={srcState.data}
                     alt={body}
diff --git a/src/app/organisms/room/message/styles.css.ts b/src/app/organisms/room/message/styles.css.ts
index 1fe7fe0..2361570 100644
--- a/src/app/organisms/room/message/styles.css.ts
+++ b/src/app/organisms/room/message/styles.css.ts
@@ -31,6 +31,11 @@ export const AbsoluteFooter = style([
   },
 ]);
 
+export const ModalWide = style({
+  minWidth: '85vw',
+  minHeight: '90vh',
+});
+
 export const MessageBase = style({
   position: 'relative',
 });