From 5d1c6f706555613d97ed9e61d8b665543c2f239b Mon Sep 17 00:00:00 2001
From: Ryan Cohen <ryan@sct.dev>
Date: Tue, 24 Jan 2023 19:30:38 +0900
Subject: [PATCH] fix: create shared class to add bottom spacing (#3269)

---
 src/components/IssueDetails/index.tsx | 2 +-
 src/components/MovieDetails/index.tsx | 2 +-
 src/components/TvDetails/index.tsx    | 2 +-
 src/styles/globals.css                | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index 725adc7c54..1a299cd80a 100644
--- 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
index c16dc63c6a..795ab7ded9 100644
--- 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
index 5e50920755..5c59e4fb84 100644
--- 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
index 82518e95fd..7598cb9b1d 100644
--- 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 {