window size hook

src/App.tsx

@@ -64,6 +64,9 @@ function App() {
     minHeight: "100%",
     aspectRatio: "16/9"
   }
+  function setMoviesHandler(movies: Movie[]) {
+  }
+
   return (
     <>
       <div id="background" className="-z-10 absolute">
@@ -72,8 +75,10 @@ function App() {
       <HamburgerMenu setConfig={setConfig} />
       <main className="flex justify-center gap-8">
         <Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+        <Sidebar className="flex flex-col max-w-sm" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
         <MovieWall
           className="flex flex-wrap gap-2 max-w-6xl"
+          className="flex flex-wrap gap-2 max-w-5xl justify-center"
           movies={movies}
           setMovies={setMovies}
           config={config}

src/hooks/useWindowDimensions.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+	const { innerWidth: width, innerHeight: height } = window;
+	return {
+		width,
+		height
+	};
+}
+
+export default function useWindowDimensions() {
+	const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowDimensions(getWindowDimensions());
+		}
+
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return windowDimensions;
+}