fix: take scrollbar dimensions into account for layout

fix #76
fix #74

src/components/Content/Content.module.scss

@@ -1,7 +1,6 @@
 .content {
   margin-top: var(--header-height);
   height: calc(100vh - var(--header-height));
-  overflow: scroll;
 }
 .padding {
   padding: 0 2rem;

src/components/Content/Content.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './Content.module.scss';
+import ScrollbarDimensionProvider from '../ScrollBarDimensionProvider';
 
 type Props = {
   className?: string;
@@ -21,7 +22,7 @@ export default function Content({
   return (
     <>
       {header}
-      <div
+      <ScrollbarDimensionProvider
         className={classNames(
           className,
           styles.content,
@@ -31,7 +32,7 @@ export default function Content({
         )}
       >
         {children}
-      </div>
+      </ScrollbarDimensionProvider>
     </>
   );
 }

src/components/ScrollBarDimensionProvider.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, useMemo } from 'react';
+
+export default function ScrollBarWidthProvider({
+  children,
+  style,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [elm, setElm] = useState<HTMLDivElement | null>(null);
+  const [scrollBarStyles, setScrollBarStyles] = useState({});
+  const observer = useMemo(
+    () =>
+      new ResizeObserver(([{ target }]) => {
+        requestAnimationFrame(() => {
+          const { width, height } = target.getBoundingClientRect();
+
+          setScrollBarStyles({
+            '--scrollbar-x': `${200 - width}px`,
+            '--scrollbar-y': `${200 - height}px`,
+          });
+        });
+      }),
+    [setScrollBarStyles],
+  );
+  useEffect(() => {
+    if (elm === null) {
+      return;
+    }
+
+    observer.observe(elm);
+
+    return () => {
+      observer.unobserve(elm);
+    };
+  }, [elm, observer]);
+  return (
+    <div {...props} style={{ ...style, ...scrollBarStyles }}>
+      <div style={{ width: 0, height: 0, overflow: 'hidden' }}>
+        <div style={{ width: '200px', height: '200px', overflow: 'scroll' }}>
+          <div style={{ width: '100%', height: '100%' }} ref={setElm} />
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}

src/views/CategorySidebar/CategorySidebar.module.scss

@@ -39,7 +39,9 @@
 .categorySidebar {
   border-right: none;
   height: calc(100% - var(--month-header-height));
-  padding-bottom: calc(300px - var(--month-header-height));
+  padding-bottom: calc(
+    300px - var(--month-header-height) + var(--scrollbar-y, 0)
+  );
   transition: height, padding 200ms ease-out;
   overflow-y: scroll;
   &::-webkit-scrollbar {

src/views/Month/Month.module.scss

@@ -1,17 +1,25 @@
 @import '../../lib/mixins.scss';
 
 .month {
-  min-height: calc(100vh - var(--header-height));
-  min-width: calc(100vw - var(--sidebar-width));
-  max-width: calc(100vw - var(--sidebar-width));
+  min-height: calc(100vh - var(--header-height) - var(--scrollbar-y, 0));
+  min-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0));
+  max-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0));
   height: var(--sidebar-height, 'auto');
   @media (min-width: 800px) {
-    min-width: calc(calc(100vw - var(--sidebar-width)) / 2);
-    max-width: calc(calc(100vw - var(--sidebar-width)) / 2);
+    min-width: calc(
+      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 2
+    );
+    max-width: calc(
+      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 2
+    );
   }
   @media (min-width: 1100px) {
-    min-width: calc(calc(100vw - var(--sidebar-width)) / 3);
-    max-width: calc(calc(100vw - var(--sidebar-width)) / 3);
+    min-width: calc(
+      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 3
+    );
+    max-width: calc(
+      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 3
+    );
   }
 }