more responsivity improvements

package-lock.json

@@ -12,7 +12,8 @@
         "axios": "^1.6.8",
         "react": "^18.2.0",
         "react-crossfade-image": "^1.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "tailwind-merge": "^2.5.3"
       },
       "devDependencies": {
         "@types/react": "*",
@@ -3999,6 +4000,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz",
+      "integrity": "sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",

package.json

@@ -14,7 +14,8 @@
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-crossfade-image": "^1.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.5.3"
   },
   "devDependencies": {
     "@types/react": "*",

src/App.tsx

@@ -94,10 +94,10 @@ function App() {
         <header className="bg-black py-2">
           <HamburgerMenu setConfig={setConfig} />
         </header>
-        <main className="flex flex-col-reverse sm:flex-row justify-start sm:justify-center items-center sm:gap-8 grow">
+        <main className="flex flex-col-reverse xl: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} />
+          <Sidebar className="flex flex-col justify-around sm:justify-between items-center 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 flex-grow w-fit justify-center items-center sm:max-w-lg xl:max-w-5xl p-2"}
+            className={"flex flex-wrap gap-2 flex-grow w-full md:w-11/12 justify-center items-center xl:max-w-5xl p-2"}
             movies={trimMoviesForScreen(movies)}
             setMovies={setMovies}
             config={config}

src/objects/movie-wall.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { Config } from "../App"
 import tmdb from "./tmdb"
+import { twMerge } from "tailwind-merge"
 
 export interface Movie {
   id: number | null
@@ -45,11 +46,18 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
   for (let i = 0; i < movies.length; i++) {
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
-
+    const widths = [
+      " ",
+      "w-16",
+      "largeMobile:w-20",
+      "sm:w-32",
+      "md:w-36",
+      "lg:w-40"
+    ]
     const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
     posters.push(
       // 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}
+      <Poster className={twMerge("aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor + widths.join(" "))} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}

src/objects/sidebar.tsx

@@ -23,8 +23,8 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
     <div className="sm:h-14 w-fit flex justify-center items-center">
       <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
     </div>
-    <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
+    <div className="flex flex-row sm:flex-col gap-2 justify-center items-center">
-      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
+      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="w-3/12 sm:h-96 aspect-poster flex justify-center">
         <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
           objectFit: "clip",
           height: "100%",
@@ -32,7 +32,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
         }} />
       </a>
       {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-      <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
+      <div className="h-36 sm:h-72 w-8/12 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
         {/* TODO: make the apology vertically centered */}
         {movie.overview === null ?
           <p>Loading...</p>
@@ -43,7 +43,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
         }
       </div>
     </div>
-    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
+    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-32 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
   </div >
 
 

src/objects/whereToWatch.tsx

@@ -69,7 +69,7 @@ function ProviderIcons({ providerList, link }: ProviderIconsProps) {
         <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
     </div>
   })
-  return <div id="logos-container" className="w-full flex">
+  return <div className="w-full flex justify-center">
     {list}
   </div>
 }
@@ -82,7 +82,7 @@ export function WhereToWatch({ watchProviders, config, className }: WhereToWatch
     {watchProvidersExist(watchProviders) ?
       <>
         <div className="flex w-full justify-around">
-          {watchProviders?.flatrate?.length > 0 ? <div className=""><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
+          {watchProviders?.flatrate?.length > 0 ? <div><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
           {watchProviders?.rent?.length > 0 ? <div className=""><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
           {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
         </div>

tailwind.config.js

@@ -4,6 +4,10 @@ export default {
   theme: {
     screens: {
       largeMobile: "390px",
+      sm: "640px",
+      md: "767px",
+      lg: "1023px",
+      xl: "1280px",
     },
     extend: {
       aspectRatio: {