change number of movies to keep a clean, responsive grid

src/App.tsx

@@ -44,7 +44,7 @@ function App() {
   const [chosenMovie, setChosenMovie] = useState(new MovieClass())
   const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
   const [watchProviders, setWatchProviders] = useState(new WatchProvidersClass())
-  useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
+  useEffect(() => { tmdb.getPopular(config, setMoviesHandler) }, [])
   useEffect(() => {
     const bgString = chosenMovie.backdrop_path ?
       tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
@@ -58,7 +58,7 @@ function App() {
   useEffect(() => {
     console.log("CONFIG CHANGED!!")
     tmdb.getMovie(config, chosenMovie.id, setChosenMovie)
-    tmdb.getSimilar(config, chosenMovie, setMovies, setSimilarMoviesAvailable)
+    tmdb.getSimilar(config, chosenMovie, setMoviesHandler, setSimilarMoviesAvailable)
   }, [config])
   const crossfadeImageStyles = {
     width: "2560px",
@@ -69,7 +69,17 @@ function App() {
   const { width } = useWindowDimensions()
 
   function setMoviesHandler(movies: Movie[]) {
+    setMovies(trimMoviesForScreen(movies))
+  }
 
+  function trimMoviesForScreen(movies: Movie[]) {
+    let desiredLength = 0
+    if (width > 640) {
+      desiredLength = 18
+    } else { desiredLength = 12 }
+    //ensure movies.length is a multiple of 6 (so it makes an orphanless grid)
+    while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 }
+    return movies.slice(0, desiredLength)
   }
 
   return (
@@ -84,7 +94,7 @@ function App() {
         <MovieWall
           className="flex flex-wrap gap-2 max-w-5xl justify-center"
           movies={movies}
-          setMovies={setMovies}
+          setMovies={setMoviesHandler}
           config={config}
           setChosenMovie={setChosenMovie}
           setSimilarMoviesAvailable={setSimilarMoviesAvailable}