From e28dfadaf57d47887013c31dc5006332473156e3 Mon Sep 17 00:00:00 2001
From: Brandon Cohen <cohbrandon@gmail.com>
Date: Wed, 17 Feb 2021 03:39:21 -0500
Subject: [PATCH] fix(frontend): request and cog button would be misaligned
 without play on plex/watch trailer button (#956)

* fix(frontend): request and cog button would be misaligned without play on plex/watch trailer button

* fix(frontend): request and cog button would be misaligned without play on plex/watch trailer button

* Update src/components/TvDetails/index.tsx

Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com>

* fix(frontend): removed z-index from buttonWithDropdown div

Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
---
 src/components/MovieDetails/index.tsx | 8 ++++----
 src/components/TvDetails/index.tsx    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 9d64d2fe6..30159ec16 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -350,9 +350,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           />
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
-          <div className="mb-2">
+          <div className="mb-2 space-x-2">
             {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
-              <span className="lg:mr-2">
+              <span className="ml-2 lg:ml-0">
                 <StatusBadge
                   status={data.mediaInfo?.status}
                   inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
@@ -394,11 +394,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 ))}
           </span>
         </div>
-        <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-2 space-y-2 sm:space-y-0 sm:justify-end sm:flex-nowrap sm:mt-4">
+        <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
           {(trailerUrl ||
             data.mediaInfo?.plexUrl ||
             data.mediaInfo?.plexUrl4k) && (
-            <div className="mt-2 sm:mt-0">
+            <div className="mb-3 sm:mb-0">
               <ButtonWithDropdown
                 buttonType="ghost"
                 text={
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 727b01a2e..286beb547 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -376,9 +376,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           />
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
-          <div className="mb-2">
+          <div className="mb-2 space-x-2">
             {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
-              <span className="lg:mr-2">
+              <span className="ml-2 lg:ml-0">
                 <StatusBadge
                   status={data.mediaInfo?.status}
                   inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
@@ -422,11 +422,11 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 ))}
           </span>
         </div>
-        <div className="flex flex-wrap justify-center flex-shrink-0 mt-2 space-y-2 sm:space-y-0 sm:flex-nowrap sm:justify-end sm:mt-4">
+        <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
           {(trailerUrl ||
             data.mediaInfo?.plexUrl ||
             data.mediaInfo?.plexUrl4k) && (
-            <div className="mt-2 sm:mt-0">
+            <div className="mb-3 sm:mb-0">
               <ButtonWithDropdown
                 buttonType="ghost"
                 text={