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,7 +65,11 @@ function App() {
     minHeight: "100%",
     aspectRatio: "16/9"
   }
+
+  const { width } = useWindowDimensions()
+
   function setMoviesHandler(movies: Movie[]) {
+
   }
 
   return (
@@ -73,11 +78,10 @@ function App() {
         <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}

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>