Web:Viewer Fixed navigation button

packages/common/components/MediaViewer/StyledComponents/StyledSwitchToolbar.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 type StyledSwitchToolbarProps = {
   left?: boolean;
+  isPdfFIle?: boolean;
 };
 
 const StyledSwitchToolbar = styled.div<StyledSwitchToolbarProps>`
@@ -13,7 +14,8 @@ const StyledSwitchToolbar = styled.div<StyledSwitchToolbarProps>`
   display: block;
   opacity: 0;
   transition: all 0.3s;
-  ${(props) => (props.left ? "left: 0" : "right: 0")};
+  ${(props) =>
+    props.left ? "left: 0" : props.isPdfFIle ? "right: 20px" : "right: 0"};
   &:hover {
     cursor: pointer;
     opacity: 1;

packages/common/components/MediaViewer/sub-components/NextButton/index.tsx

@@ -8,11 +8,12 @@ import MediaNextIcon from "PUBLIC_DIR/images/viewer.next.react.svg";
 
 type NextButtonProps = {
   nextClick: VoidFunction;
+  isPdfFIle: boolean;
 };
 
-function NextButton({ nextClick }: NextButtonProps) {
+function NextButton({ nextClick, isPdfFIle }: NextButtonProps) {
   return (
-    <StyledSwitchToolbar onClick={nextClick}>
+    <StyledSwitchToolbar onClick={nextClick} isPdfFIle={isPdfFIle}>
       <StyledButtonScroll orientation="right">
         <MediaNextIcon />
       </StyledButtonScroll>

packages/common/components/MediaViewer/sub-components/Viewer/index.tsx

@@ -172,7 +172,9 @@ function Viewer(props: ViewerProps) {
       {props.playlist.length > 1 && !isFullscreen && !isMobile && (
         <>
           {isNotFirstElement && <PrevButton prevClick={prevClick} />}
-          {isNotLastElement && <NextButton nextClick={nextClick} />}
+          {isNotLastElement && (
+            <NextButton isPdfFIle={props.isPdf} nextClick={nextClick} />
+          )}
         </>
       )}