make ToC scrollable

Danue1 · Danue1 · commit 6ebe0551a394 · 2020-02-10T14:43:13.000+09:00
diff --git a/src/components/common/Sticky.tsx b/src/components/common/Sticky.tsx
@@ -49,7 +49,7 @@ const Sticky: React.FC<StickyProps> = ({ className, top, children }) => {
         top: fixed ? top : undefined,
       }}
     >
-      {children}
+      <div>{children}</div>
     </StickyBlock>
   );
 };
diff --git a/src/components/post/PostToc.tsx b/src/components/post/PostToc.tsx
@@ -19,15 +19,21 @@ const Positioner = styled.div`
 `;
 
 const PostTocBlock = styled(Sticky)`
+  overflow-x: hidden;
+  overflow-y: auto;
+  bottom: 0;
   width: 240px;
   margin-left: 5rem;
-  border-left: 2px solid ${palette.gray2};
-  padding-left: 0.75rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   color: ${palette.gray6};
   line-height: 1.5;
   font-size: 0.875rem;
+
+  > div {
+    padding-left: 0.75rem;
+    border-left: 2px solid ${palette.gray2};
+  }
 `;
 
 const TocItem = styled.div<{ active: boolean }>`

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ const Sticky: React.FC<StickyProps> = ({ className, top, children }) => {`
`49`	`49`	`top: fixed ? top : undefined,`
`50`	`50`	`}}`
`51`	`51`	`>`
`52`		`- {children}`
	`52`	`+ <div>{children}</div>`
`53`	`53`	`</StickyBlock>`
`54`	`54`	`);`
`55`	`55`	`};`