fix(web): fix-file-viewer-styling

Author: tractorss

web/src/components/FileViewer/index.tsx

@@ -7,12 +7,7 @@ import "@cyntler/react-doc-viewer/dist/index.css";
 import MarkdownRenderer from "./Viewers/MarkdownViewer";
 
 const StyledDocViewer = styled(DocViewer)`
-  padding: 0px 8px;
   background-color: ${({ theme }) => theme.whiteBackground} !important;
-
-  #pdf-controls {
-    z-index: 0;
-  }
 `;
 
 /**
@@ -32,8 +27,8 @@ const FileViewer: React.FC<{ url: string }> = ({ url }) => {
           disableFileName: true,
         },
         pdfZoom: {
-          defaultZoom: 1.1, // 1 as default,
-          zoomJump: 0.2, // 0.1 as default,
+          defaultZoom: 0.8,
+          zoomJump: 0.1,
         },
         pdfVerticalScrollByDefault: true, // false as default
       }}

web/src/layout/Header/index.tsx

@@ -9,7 +9,7 @@ import { TestnetBanner } from "./TestnetBanner";
 
 const Container = styled.div`
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   top: 0;
   width: 100%;
   background-color: ${({ theme }) => theme.primaryPurple};

web/src/pages/Cases/AttachmentDisplay/index.tsx

@@ -20,7 +20,8 @@ const DisplayContainer = styled.div`
   background-color: ${({ theme }) => theme.whiteBackground};
   border-radius: 3px;
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
-  overflow: scroll hidden;
+  overflow: scroll;
+  max-height: 750px;
 `;
 
 const LoaderContainer = styled.div`

web/src/styles/global-style.ts

@@ -115,4 +115,9 @@ export const GlobalStyle = createGlobalStyle`
     --os-handle-bg-hover: ${({ theme }) => theme.secondaryPurple};
     --os-handle-bg-active: ${({ theme }) => theme.lavenderPurple};
   }
+
+  // @cyntler/react-doc-viewer injects a canvas to load pdf, this is alters the height of body tag, so set to hidden
+  .hiddenCanvasElement{
+    display: none;
+  }
 `;