fix: (#102) ugly scrollbars

3 files changed, 59 insertions, 42 deletions

diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index 49fe9cf..97b4189 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -51,6 +51,7 @@ export interface NormalLinkProps {
 import { hexToRGBA, getThemeColor } from '../../pages/index'
 import noteStyle from './noteStyle'
 import { OrgImage } from './OrgImage'
+import { Scrollbars } from 'react-custom-scrollbars-2'
 
 export const NormalLink = (props: NormalLinkProps) => {
   const { setSidebarHighlightedNode, setPreviewNode, nodeById, openContextMenu, href, children } =
@@ -202,6 +203,7 @@ export const PreviewLink = (props: LinkProps) => {
           </PopoverTrigger>
           <Portal>
             <PopoverContent
+              transform="scale(1)"
               key={nodeById[id]?.title ?? id}
               boxShadow="xl"
               position="relative"
@@ -217,15 +219,31 @@ export const PreviewLink = (props: LinkProps) => {
               <PopoverBody
                 pb={5}
                 fontSize="xs"
-                px={5}
                 position="relative"
                 zIndex="tooltip"
-                maxHeight={300}
-                overflow="scroll"
+                transform="scale(1)"
+                width="100%"
               >
-                <Box color="black" sx={noteStyle}>
-                  {orgText}
-                </Box>
+                <Scrollbars
+                  autoHeight
+                  autoHeightMax={300}
+                  autoHide
+                  renderThumbVertical={({ style, ...props }) => (
+                    <Box
+                      style={{
+                        ...style,
+                        borderRadius: 0,
+                        // backgroundColor: highlightColor,
+                      }}
+                      //color="alt.100"
+                      {...props}
+                    />
+                  )}
+                >
+                  <Box w="100%" color="black" px={3} sx={noteStyle} overflowY="scroll">
+                    {orgText}
+                  </Box>
+                </Scrollbars>
               </PopoverBody>
             </PopoverContent>
           </Portal>
diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index 37e836d..ec267a3 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -34,7 +34,6 @@ export const Note = (props: NoteProps) => {
   return (
     <Box
       pr={8}
-      overflow="scroll"
       height="100%"
       className="org"
       sx={{
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 957669c..0b7c9f2 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -209,41 +209,41 @@ const Sidebar = (props: SidebarProps) => {
               nextPreviewNode,
             }}
           />
-          {/* <Scrollbars
-           *   //autoHeight
-           *   autoHeightMax={600}
-           *   autoHide
-           *   renderThumbVertical={({ style, ...props }) => (
-           *     <Box
-           *       style={{
-           *         ...style,
-           *         borderRadius: 0,
-           *         // backgroundColor: highlightColor,
-           *       }}
-           *       //color="alt.100"
-           *       {...props}
-           *     />
-           *   )}
-           * > */}
-          <VStack flexGrow={1} overflow="scroll" alignItems="left" bg="alt.100" paddingLeft={4}>
-            <TagBar
-              {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }}
-            />
-            <Note
-              {...{
-                setPreviewNode,
-                previewNode,
-                nodeById,
-                nodeByCite,
-                setSidebarHighlightedNode,
-                justification,
-                justificationList,
-                linksByNodeId,
-                openContextMenu,
-              }}
-            />
-          </VStack>
-          {/*</Scrollbars>*/}
+          <Scrollbars
+            //autoHeight
+            //autoHeightMax={600}
+            autoHide
+            renderThumbVertical={({ style, ...props }) => (
+              <Box
+                style={{
+                  ...style,
+                  borderRadius: 0,
+                  // backgroundColor: highlightColor,
+                }}
+                //color="alt.100"
+                {...props}
+              />
+            )}
+          >
+            <VStack flexGrow={1} overflowY="scroll" alignItems="left" bg="alt.100" paddingLeft={4}>
+              <TagBar
+                {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }}
+              />
+              <Note
+                {...{
+                  setPreviewNode,
+                  previewNode,
+                  nodeById,
+                  nodeByCite,
+                  setSidebarHighlightedNode,
+                  justification,
+                  justificationList,
+                  linksByNodeId,
+                  openContextMenu,
+                }}
+              />
+            </VStack>
+          </Scrollbars>
         </Flex>
       </Resizable>
     </Collapse>