improve mobile layout

src/App.tsx

@@ -74,7 +74,7 @@ function App() {
     let desiredLength = 0
     if (width > 1280) {
       desiredLength = 18
-    } else if (width > 640) {
+    } else if (width > 400) {
       desiredLength = 16
     } else { desiredLength = 15 }
     //ensure movies.length is a multiple of 6 (so it makes an orphanless grid)
@@ -94,10 +94,10 @@ function App() {
         <header className="bg-black py-2">
           <HamburgerMenu setConfig={setConfig} />
         </header>
-        <main className="flex flex-col sm:flex-row sm:justify-center items-center gap-8 grow">
-          <Sidebar className="flex flex-col justify-between items-center max-w-sm bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+        <main className="flex flex-col-reverse sm:flex-row justify-start sm:justify-center items-center sm:gap-8 grow">
+          <Sidebar className="flex flex-col justify-around sm:justify-between items-center max-w-sm bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
           <MovieWall
-            className={"flex flex-wrap gap-2 w-fit justify-center sm:max-w-lg xl:max-w-5xl "}
+            className={"flex flex-wrap gap-2 flex-grow w-fit justify-center items-center sm:max-w-lg xl:max-w-5xl p-2"}
             movies={trimMoviesForScreen(movies)}
             setMovies={setMovies}
             config={config}

src/objects/movie-wall.tsx

@@ -48,7 +48,8 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
 
     const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
     posters.push(
-      <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} movie={movie} key={movie.id} index={i}
+      // TODO: tailwind merge so that these break points actually work
+      <Poster className={"w-16 largeMobile:w-20 sm:w-40 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}

src/objects/whereToWatch.tsx

@@ -62,6 +62,7 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
   link: string;
 }
 function ProviderIcons({ providerList, link }: ProviderIconsProps) {
+  if (!providerList) { return "" }
   const list = providerList.map((e: any, i: number) => {
     return <div className="w-6 aspect-square">
       <a href={link}>

tailwind.config.js

@@ -2,6 +2,9 @@
 export default {
   content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
+    screens: {
+      largeMobile: "390px",
+    },
     extend: {
       aspectRatio: {
         poster: "2 / 3",