Fix/glitched watchlist card

.env.example

@@ -1 +1 @@
-TMDB_API_TOKEN=
+VITE_TMDB_API_TOKEN=

README.md

@@ -1,49 +1,49 @@
-![vilm banner](./public/vilm-banner.jpg)
-
-# Vilm
-
-## Guide Instalation
-
-### Requirments
-
-1. Node.js >= 18
-2. Typescript
-3. PNPM
-
-### Steps
-
-1. Clone the repository
-
-```bash
-git clone https://github.com/nnivxix/vilm.git
-```
-
-```bash
-cd vilm
-```
-
-```bash
-pnpm install
-```
-
-2. Copy the `.env` file
-
-```bash
-cp .env.example .env
-```
-
-3. Change value the `.env` file
-
-Go to `.env` file and fill the value `TMDB_API_TOKEN=` with key from [TMDB API](https://developer.themoviedb.org/docs/getting-started)
-
-4. Run the Application
-
-```bash
-pnpm dev
-```
-
-Happy Coding
-
-## Contributions 🎉👋
-
-All contributions and suggestions are welcome.
+![vilm banner](./public/vilm-banner.jpg)
+
+# Vilm
+
+## Guide Instalation
+
+### Requirments
+
+1. Node.js >= 18
+2. Typescript
+3. PNPM
+
+### Steps
+
+1. Clone the repository
+
+```bash
+git clone https://github.com/nnivxix/vilm.git
+```
+
+```bash
+cd vilm
+```
+
+```bash
+pnpm install
+```
+
+2. Copy the `.env` file
+
+```bash
+cp .env.example .env
+```
+
+3. Change value the `.env` file
+
+Go to `.env` file and fill the value `VITE_TMDB_API_TOKEN=` with key from [TMDB API](https://developer.themoviedb.org/docs/getting-started)
+
+4. Run the Application
+
+```bash
+pnpm dev
+```
+
+Happy Coding
+
+## Contributions 🎉👋
+
+All contributions and suggestions are welcome.

src/App.tsx

@@ -1,27 +1,27 @@
-import "./App.css";
-
-function App() {
-  return (
-    <ThemeProvider defaultTheme="dark" storageKey="vilm-theme">
-      <AccountProvider>
-        <Router>
-          <Navbar />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/show/tv/:id" element={<Tv />} />
-            <Route path="/show/movie/:id" element={<Movie />} />
-            <Route path="/search" element={<Search />} />
-            <Route path="/setting" element={<Setting />} />
-            <Route path="/watchlist/movie" element={<Movies />} />
-            <Route path="/watchlist/tv" element={<TvShows />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-          <Toaster />
-          <Footer />
-        </Router>
-      </AccountProvider>
-    </ThemeProvider>
-  );
-}
-
-export default App;
+import "./App.css";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vilm-theme">
+      <AccountProvider>
+        <Router>
+          <Navbar />
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/show/tv/:id" element={<Tv />} />
+            <Route path="/show/movie/:id" element={<Movie />} />
+            <Route path="/search" element={<Search />} />
+            <Route path="/setting" element={<Setting />} />
+            <Route path="/watchlist/movie" element={<Movies />} />
+            <Route path="/watchlist/tv" element={<TvShows />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+          <Toaster />
+          <Footer />
+        </Router>
+      </AccountProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;

src/components/BackdropCard.tsx

@@ -23,18 +23,22 @@ export default function BackdropCard<T extends SimpleBaseMedia>({ media, title,
   const isMovieType = Object.prototype.hasOwnProperty.call(media, 'video');
 
   return (
-    <div {...props} className={`${props.className} rounded-md group transition-transform overflow-clip  hover:scale-110`}>
-      <RImage src={imageUrl({
-        path: media.backdrop_path,
-        size: 'w300',
-        type: 'backdrop'
-      })}
-        type="backdrop"
-        alt={media.overview}
-      />
-      <div className="block lg:hidden group-hover:block">
-        <Link to={`/show/${isMovieType ? 'movie' : 'tv'}/${media.id}`}>{title}</Link>
-      </div>
+    <div title={title} {...props} className={`${props.className} rounded-md group transition-transform overflow-clip  hover:scale-110`}
+    >
+      <Link to={`/show/${isMovieType ? 'movie' : 'tv'}/${media.id}`}>
+        <RImage src={imageUrl({
+          path: media.backdrop_path,
+          size: 'w300',
+          type: 'backdrop'
+
+        })}
+          type="backdrop"
+          alt={media.overview}
+        />
+        <div className="lg:opacity-0 group-hover:opacity-100 line-clamp-2">
+          {title}
+        </div>
+      </Link>
     </div>
   )
 }

src/config/index.ts

@@ -1,8 +1,8 @@
-const tokenStorage = localStorage.getItem("token");
-
-const config = {
-  apiUrl: "https://api.themoviedb.org/3",
-  token: tokenStorage ?? import.meta.env.VITE_TMDB_API_TOKEN,
-};
-
-export default config;
+const tokenStorage = localStorage.getItem("token");
+
+const config = {
+  apiUrl: "https://api.themoviedb.org/3",
+  token: tokenStorage ?? import.meta.env.VITE_TMDB_API_TOKEN,
+};
+
+export default config;