Account for scrollabar width

src/App.css

@@ -138,10 +138,6 @@ button:active {
   color: rgb(73, 83, 112);
 }
 
-#infinite-skins {
-  margin-top: 46px; /* This matches the height of #search */
-}
-
 #webamp {
   opacity: 0;
   transition: opacity 400ms ease-in-out;

src/App.js

@@ -8,7 +8,7 @@ import SkinTable from "./SkinTable";
 import FocusedSkin from "./FocusedSkin";
 import * as Selectors from "./redux/selectors";
 import { ABOUT_PAGE } from "./constants";
-import { useWindowSize } from "./hooks";
+import { useWindowSize, useScrollbarWidth } from "./hooks";
 import { SCREENSHOT_WIDTH, SKIN_RATIO } from "./constants";
 
 // Render your table
@@ -21,9 +21,14 @@ const getTableDimensions = (windowWidth, scale) => {
 };
 
 function App(props) {
-  const { windowWidth, windowHeight } = useWindowSize();
+  const scrollbarWidth = useScrollbarWidth();
+  const {
+    windowWidth: windowWidthWithScrollabar,
+    windowHeight,
+  } = useWindowSize();
+
   const { columnWidth, rowHeight, columnCount } = getTableDimensions(
-    windowWidth,
+    windowWidthWithScrollabar - scrollbarWidth,
     props.scale
   );
   return (
@@ -35,7 +40,7 @@ function App(props) {
         columnWidth={columnWidth}
         rowHeight={rowHeight}
         windowHeight={windowHeight}
-        windowWidth={windowWidth}
+        windowWidth={windowWidthWithScrollabar}
       />
       {props.aboutPage ? (
         <Overlay>

src/SkinTable.js

@@ -6,6 +6,8 @@ import * as Actions from "./redux/actionCreators";
 import { FixedSizeGrid as Grid } from "react-window";
 import Cell from "./Cell";
 
+const HEADING_HEIGHT = 46;
+
 const SkinTable = ({
   columnCount,
   columnWidth,
@@ -35,7 +37,7 @@ const SkinTable = ({
     gridRef.current.scrollTo({ scrollLeft: 0, scrollTop: 0 });
   }, [skinCount]);
   return (
-    <div id="infinite-skins">
+    <div id="infinite-skins" style={{ marginTop: HEADING_HEIGHT }}>
       {skinCount > 0 || searchQuery === "" ? (
         <Grid
           ref={gridRef}
@@ -43,11 +45,12 @@ const SkinTable = ({
           itemData={{ columnCount, width: columnWidth, height: rowHeight }}
           columnCount={columnCount}
           columnWidth={columnWidth}
-          height={windowHeight}
+          height={windowHeight - HEADING_HEIGHT}
           rowCount={Math.ceil(skinCount / columnCount)}
           rowHeight={rowHeight}
           width={windowWidth}
           overscanRowsCount={5}
+          style={{ overflowY: "scroll" }}
         >
           {Cell}
         </Grid>

src/hooks.js

@@ -1,9 +1,9 @@
 import * as Utils from "./utils";
-import React from "react";
+import { useMemo, useState, useEffect } from "react";
 
 export function useWindowSize() {
-  const [windowSize, setWindowSize] = React.useState(Utils.getWindowSize());
-  React.useEffect(() => {
+  const [windowSize, setWindowSize] = useState(Utils.getWindowSize());
+  useEffect(() => {
     // TODO: Consider thottle
     const handleResize = () => {
       setWindowSize(Utils.getWindowSize());
@@ -13,3 +13,28 @@ export function useWindowSize() {
   }, []);
   return windowSize;
 }
+
+// https://stackoverflow.com/a/13382873/1263117
+export function useScrollbarWidth() {
+  // TODO: Can this change over the lifetime of the window?
+  return useMemo(() => {
+    // Creating invisible container
+    const outer = document.createElement("div");
+    outer.style.visibility = "hidden";
+    outer.style.overflow = "scroll"; // forcing scrollbar to appear
+    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
+    document.body.appendChild(outer);
+
+    // Creating inner element and placing it in the container
+    const inner = document.createElement("div");
+    outer.appendChild(inner);
+
+    // Calculating difference between container's full width and the child width
+    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+    // Removing temporary elements from the DOM
+    outer.parentNode.removeChild(outer);
+
+    return scrollbarWidth;
+  }, []);
+}