fix(responsive): responsive for text (#350)

* fix(responsive): responsive for text * fix(fileviewer): remove xlsx and xls preview
OPEN-ENT-NG · Dec 1, 2024 · 5ddf08e · 5ddf08e
1 parent 8a99137
commit 5ddf08e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/frontend/src/components/Preview-modal/PreviewModal.tsx b/frontend/src/components/Preview-modal/PreviewModal.tsx
@@ -15,6 +15,7 @@ import {
 import { CommentPanel } from "../comment-panel/CommentPanel";
 import { PreviewContent } from "../preview-content/PreviewContent";
 import { BOARD_MODAL_TYPE } from "~/core/enums/board-modal-type";
+import { RESOURCE_TYPE } from "~/core/enums/resource-type.enum";
 import { useWindowResize } from "~/hooks/useWindowResize";
 import { useBoard } from "~/providers/BoardProvider";
 
@@ -44,7 +45,11 @@ export const PreviewModal: FC = () => {
       aria-labelledby="modal-card-preview"
       aria-describedby="modal-card-preview"
     >
-      <ModalWrapper ref={commentDivRef} isCommentOpen={COMMENT_PANEL}>
+      <ModalWrapper
+        ref={commentDivRef}
+        isCommentOpen={COMMENT_PANEL}
+        isText={activeCard?.resourceType === RESOURCE_TYPE.TEXT}
+      >
         <Box sx={modalBodyStyle}>
           <IconButton
             onClick={() => closeActiveCardAction(BOARD_MODAL_TYPE.CARD_PREVIEW)}

diff --git a/frontend/src/components/Preview-modal/style.ts b/frontend/src/components/Preview-modal/style.ts
@@ -1,18 +1,16 @@
 import { Box, styled } from "@mui/material";
 
-interface ModalWrapperProps {
-  isCommentOpen?: boolean;
-}
+import { ModalWrapperProps } from "./types";
 
 export const ModalWrapper = styled(Box, {
   shouldForwardProp: (prop) => prop !== "isCommentOpen",
-})<ModalWrapperProps>(({ theme, isCommentOpen }) => ({
+})<ModalWrapperProps>(({ theme, isCommentOpen, isText }) => ({
   position: "absolute",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
   width: "max-content",
-  minWidth: "80rem",
+  minWidth: isText ? "40rem" : "80rem",
   maxWidth: "80%",
   height: isCommentOpen ? "calc(100vh - 10rem)" : "fit-content",
   maxHeight: "calc(100vh - 10rem)",

diff --git a/frontend/src/components/Preview-modal/types.ts b/frontend/src/components/Preview-modal/types.ts
@@ -1,3 +1,4 @@
 export interface ModalWrapperProps {
   isCommentOpen: boolean;
+  isText: boolean;
 }
diff --git a/frontend/src/components/card-content-file/CardContentFile.tsx b/frontend/src/components/card-content-file/CardContentFile.tsx
@@ -43,7 +43,7 @@ export const CardContentFile: FC<CardContentFileProps> = ({ card }) => {
   };
 
   const isOfficeExcelOrCsv = () => {
-    const ext = [FILE_EXTENSION.XLS, FILE_EXTENSION.CSV, FILE_EXTENSION.XLSX];
+    const ext = [FILE_EXTENSION.CSV];
     return ext.includes(card.metadata.extension as FILE_EXTENSION);
   };