From 10191f538051dfc1a804980864d97bc9b19da5f4 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Mon, 7 Oct 2024 23:56:43 +0200
Subject: [PATCH] improve mobile layout

---
 src/App.tsx                  | 8 ++++----
 src/objects/movie-wall.tsx   | 3 ++-
 src/objects/whereToWatch.tsx | 1 +
 tailwind.config.js           | 3 +++
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 53c0aee..f7d204f 100644
--- a/src/App.tsx
+++ b/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}
diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx
index d2d6c24..5b058c9 100644
--- a/src/objects/movie-wall.tsx
+++ b/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}
diff --git a/src/objects/whereToWatch.tsx b/src/objects/whereToWatch.tsx
index 86647eb..d60d604 100644
--- a/src/objects/whereToWatch.tsx
+++ b/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}>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4fabeaf..d33c8da 100644
--- a/tailwind.config.js
+++ b/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",