fix offset issue when opening a document

ui2/src/components/Viewer/ActionButtons.tsx

@@ -29,7 +29,7 @@ export default function ActionButtons() {
   }, [width, height])
 
   return (
-    <Group justify="space-between">
+    <Group ref={ref} justify="space-between">
       <Group>
         <EditTitleButton />
       </Group>

ui2/src/components/Viewer/Thumbnails/Thumbnails.module.css

@@ -3,10 +3,16 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: #666;
+  background-color: #3d3b3b;
   color: white;
+  padding: 0.5rem 1rem;
   img {
     padding: 1rem 1rem 0rem 1rem;
     width: 150px;
   }
 }
+
+.thumbnails:over {
+  overflow-y: auto;
+  overflow-x: hidden;
+}

ui2/src/components/Viewer/ThumbnailsToggle/ThumbnailsToggle.module.css

@@ -1,4 +1,7 @@
 .thumbnailsToggle {
   background-color: #666;
-  color: white;
+  color: #dadada;
+  button:focus {
+    outline: none;
+  }
 }

ui2/src/components/Viewer/ThumbnailsToggle/ThumbnailsToggle.tsx

@@ -1,24 +1,44 @@
 import {useContext} from "react"
-import {useDispatch} from "react-redux"
+import {useDispatch, useSelector} from "react-redux"
 import {UnstyledButton, Flex} from "@mantine/core"
-import {IconMenu2} from "@tabler/icons-react"
+import {
+  IconLayoutSidebarRightExpand,
+  IconLayoutSidebarRightCollapse
+} from "@tabler/icons-react"
 import classes from "./ThumbnailsToggle.module.css"
-import {toggleThumbnailsPanel} from "@/slices/dualPanel/dualPanel"
+import {
+  toggleThumbnailsPanel,
+  selectThumbnailsPanelOpen
+} from "@/slices/dualPanel/dualPanel"
 import PanelContext from "@/contexts/PanelContext"
 import {PanelMode} from "@/types"
+import {RootState} from "@/app/types"
 
 export default function ThumbnailsToggle() {
   const dispatch = useDispatch()
   const mode: PanelMode = useContext(PanelContext)
+  const isOpen = useSelector((state: RootState) =>
+    selectThumbnailsPanelOpen(state, mode)
+  )
 
   const onClick = () => {
     dispatch(toggleThumbnailsPanel(mode))
   }
 
+  if (isOpen) {
+    return (
+      <Flex align={"flex-start"} className={classes.thumbnailsToggle}>
+        <UnstyledButton onClick={() => onClick()}>
+          <IconLayoutSidebarRightExpand />
+        </UnstyledButton>
+      </Flex>
+    )
+  }
+
   return (
     <Flex align={"flex-start"} className={classes.thumbnailsToggle}>
       <UnstyledButton onClick={() => onClick()}>
-        <IconMenu2 />
+        <IconLayoutSidebarRightCollapse />
       </UnstyledButton>
     </Flex>
   )

ui2/src/slices/dualPanel/dualPanel.ts

@@ -70,7 +70,6 @@ export const fetchPaginatedDocument = createAsyncThunk<DocumentType, ThunkArgs>(
   "paginatedDocument/fetchDocument",
   // @ts-ignore
   async ({nodeId, urlParams, page}: ThunkArgs) => {
-    console.log(urlParams)
     const response = await axios.get(`/api/documents/${nodeId}`, {
       validateStatus: () => true
     })