make file, image viewer wide (#1444)

diff --git a/src/app/organisms/room/message/FileContent.tsx b/src/app/organisms/room/message/FileContent.tsx
index c6bd45d414bcdb6cfa9448dcacf5ac204bf519a4..303c45347870da7893e4c020bcd4496358a9ce1d 100644 (file)
--- 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 485bed4f96ca35d10103e1ffa7fba1978bbd2d4c..9df360b7482ec2d94973ab038d09b18976cd624e 100644 (file)
--- 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 1fe7fe04e6cd93ec209e313354217fb41212eb09..23615709d3fa5d19fb83fd1554e997a937e4d0ec 100644 (file)
--- 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',
 });