reduce layout shift

plang-psm · Jun 17, 2024 · d9a0829 · d9a0829
1 parent e46d4d4
commit d9a0829
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 17 deletions.
diff --git a/frontend/src/components/home components/FamilyMovieCarousel.jsx b/frontend/src/components/home components/FamilyMovieCarousel.jsx
@@ -42,10 +42,10 @@ function FamilyMovieCarousel() {
   };
 
   return (
-    <div className="trending-container py-5">
+    <div className="trending-container h-[338px] py-5">
       <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
       {/* Swiper configuration settings for carousel */}
-      <div className="h-[250px]">
+      <div className="">
         {loading ? (
           <CardSkeleton />
         ) : (

diff --git a/frontend/src/components/home components/Header.jsx b/frontend/src/components/home components/Header.jsx
@@ -76,7 +76,7 @@ function Header() {
           )}
         </div>
       ) : (
-        <div className="title p-5 text-center h-full">
+        <div className="title p-5 text-center h-[400px]">
           <h1 className="my-2 text-6xl font-bold uppercase text-red-700">Welcome</h1>
           <h2 className="my-2 text-xl uppercase">Grab some popcorn and</h2>
           <h3 className="my-2 text-xl uppercase">

diff --git a/frontend/src/components/home components/ScifiMovieCarousel.jsx b/frontend/src/components/home components/ScifiMovieCarousel.jsx
@@ -43,9 +43,9 @@ function ScifiMovieCarousel() {
   };
 
   return (
-    <div className="trending-container py-5">
+    <div className="trending-container h-[338px] py-5">
       <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
-      <div className="h-[250px]">
+      <div className="">
         {/* Swiper configuration settings for carousel */}
         {loading ? (
           <CardSkeleton />

diff --git a/frontend/src/components/home components/TrendingMovieCarousel.jsx b/frontend/src/components/home components/TrendingMovieCarousel.jsx
@@ -41,9 +41,9 @@ function TrendingMovieCarousel() {
   };
 
   return (
-    <div className="trending-container py-5">
+    <div className="trending-container h-[338px] py-5">
       <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
-      <div className="h-[250px]">
+      <div className="">
         {/* Swiper configuration settings for carousel */}
         {loading ? (
           <CardSkeleton />

diff --git a/frontend/src/components/home components/TrendingTvCarousel.jsx b/frontend/src/components/home components/TrendingTvCarousel.jsx
@@ -41,9 +41,9 @@ function TrendingTvCarousel() {
   };
 
   return (
-    <div className="trending-container">
+    <div className="trending-container h-[338px]">
       <h1 className="pb-4 text-2xl">Trending Shows</h1>
-      <div className="h-[250px]">
+      <div className="">
         {/* Swiper configuration settings for carousel */}
         {loading ? (
           <CardSkeleton />

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -10,14 +10,11 @@ function MovieHome() {
   return (
     <>
       <NowPlaying />
-
-      <div className="min-h-screen h-full pb-14 px-4">
-        <Header />
-        <TrendingMovieCarousel />
-        <TrendingTvCarousel />
-        <ScifiMovieCarousel />
-        <FamilyMovieCarousel />
-      </div>
+      <Header />
+      <TrendingMovieCarousel />
+      <TrendingTvCarousel />
+      <ScifiMovieCarousel />
+      <FamilyMovieCarousel />
     </>
   );
 }