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

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>
   );
 };

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>
   );
 };

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>
   );
 };

src/styles/globals.css

@@ -507,6 +507,10 @@
       @apply hidden;
     }
   }
+
+  .extra-bottom-space {
+    height: calc(4rem + env(safe-area-inset-bottom));
+  }
 }
 
 .ptr--ptr {