fix: create shared class to add bottom spacing (#3269)

Fallenbagel · Jan 24, 2023 · 5d1c6f7 · 5d1c6f7
1 parent 3db010b
commit 5d1c6f7
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
@@ -667,7 +667,7 @@ const IssueDetails = () => {
           </div>
         </div>
       </div>
-      <div className="h-16 sm:h-0" />
+      <div className="extra-bottom-space" />
     </div>
   );
 };

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -834,7 +834,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
         linkUrl={`/movie/${data.id}/similar`}
         hideWhenEmpty
       />
-      <div className="relative h-32 sm:h-8" />
+      <div className="extra-bottom-space relative" />
     </div>
   );
 };

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
@@ -1016,7 +1016,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
         linkUrl={`/tv/${data.id}/similar`}
         hideWhenEmpty
       />
-      <div className="relative h-32 sm:h-8" />
+      <div className="extra-bottom-space relative" />
     </div>
   );
 };

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -507,6 +507,10 @@
       @apply hidden;
     }
   }
+
+  .extra-bottom-space {
+    height: calc(4rem + env(safe-area-inset-bottom));
+  }
 }
 
 .ptr--ptr {