From 2f9af4594525c834d0108eb0d751dde9e15f724a Mon Sep 17 00:00:00 2001
From: Marco Schumacher <marco@schumacher.dev>
Date: Tue, 15 Mar 2022 14:38:33 +0100
Subject: [PATCH] docs: some fixes

---
 docs/src/pages/index.tsx       | 9 ++++-----
 src/components/virtualized.tsx | 2 ++
 2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 4b36350..6e781de 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -38,14 +38,13 @@ export default function Home(): JSX.Element {
     <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
       <HomepageHeader />
 
-      <div css={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+      <div css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         <div
           css={{
-            alignSelf: 'center',
             margin: `40px 0 80px`,
-            maxWidth: 960,
+            maxWidth: 'min(960px, 100%)',
             display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 300px))',
             gap: 30,
           }}
         >
@@ -65,7 +64,7 @@ export default function Home(): JSX.Element {
           />
         </div>
 
-        <main className={styles.main}>
+        <main className={styles.main} css={{ overflowX: 'auto' }}>
           <h2 css={{ justifySelf: 'center', color: 'gray', margin: '5rem 0' }}>Demo</h2>
 
           <ExampleTable stickyHeader={{ top: 60 }} />
diff --git a/src/components/virtualized.tsx b/src/components/virtualized.tsx
index 05f95c8..e44bdd8 100644
--- a/src/components/virtualized.tsx
+++ b/src/components/virtualized.tsx
@@ -87,8 +87,10 @@ export function Virtualized<T>({
     if (!virtual || !probeRef.current) return;
 
     window.addEventListener('scroll', incCounter, true);
+    window.addEventListener('resize', incCounter, true);
     return () => {
       window.removeEventListener('scroll', incCounter, true);
+      window.removeEventListener('resize', incCounter, true);
     };
   }, [probeRef.current, incCounter]);
 
