misc styling

src/App.tsx

@@ -7,6 +7,7 @@ import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
 import CrossfadeImage from 'react-crossfade-image'
 import { WatchProviders } from './objects/whereToWatch'
+import useWindowDimensions from './hooks/useWindowDimensions'
 
 export type Config = {
   language: string,
@@ -64,16 +65,24 @@ function App() {
     minHeight: "100%",
     aspectRatio: "16/9"
   }
+
+  const { width } = useWindowDimensions()
+
+  function setMoviesHandler(movies: Movie[]) {
+
+  }
+
   return (
     <>
       <div id="background" className="-z-10 absolute">
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
       <HamburgerMenu setConfig={setConfig} />
-      <main className="flex justify-center gap-8">
+      <main className="flex justify-center items-center gap-8">
-        <Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+        WIDTH: {width}
+        <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;
+}

src/objects/movie-wall.tsx

@@ -82,9 +82,7 @@ function Poster({ className, movie, config, listSimilar, setMovies, setChosenMov
     {isLoading ?
       <div className="m-auto text-center h-full w-full fixed">
         <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
-      : <div className="z-10 h-full w-full absolute cursor-pointer" onClick={() => clickHandler()}>
+      : <div className="z-10 h-full w-full absolute cursor-pointer" onClick={() => clickHandler()}></div>
-        hello
-      </div>
     }
     {hasError ?? <div className="m-auto text-center">⚠️</div>}
     <img

src/objects/sidebar.tsx

@@ -24,7 +24,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
       <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
     </a>
     {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-    <p id="summary">{movie.overview === null ? "Loading"
+    <p id="summary" className="">{movie.overview === null ? "Loading"
       : movie.overview === "" ? apology
         : movie.overview}
     </p>