From f1c335815f2f17465cdd36ceb223e78a58149b3b Mon Sep 17 00:00:00 2001
From: Brandon Cohen <cohbrandon@gmail.com>
Date: Tue, 16 Feb 2021 02:16:14 -0500
Subject: [PATCH] fix(frontend): changed plex, request, and cog buttons to
 align properly on smaller mobile UIs (#928)

---
 src/components/MovieDetails/index.tsx | 154 ++++++++++++------------
 src/components/TvDetails/index.tsx    | 164 +++++++++++++-------------
 2 files changed, 161 insertions(+), 157 deletions(-)

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index e8af7eeb5..9d64d2fe6 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -352,7 +352,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         <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">
             {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
-              <span className="mr-2">
+              <span className="lg:mr-2">
                 <StatusBadge
                   status={data.mediaInfo?.status}
                   inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
@@ -394,93 +394,95 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 ))}
           </span>
         </div>
-        <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
+        <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">
           {(trailerUrl ||
             data.mediaInfo?.plexUrl ||
             data.mediaInfo?.plexUrl4k) && (
-            <ButtonWithDropdown
-              buttonType="ghost"
-              text={
-                <>
-                  <svg
-                    className="w-5 h-5 mr-1"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <span>
-                    {data.mediaInfo?.plexUrl
-                      ? intl.formatMessage(messages.playonplex)
-                      : data.mediaInfo?.plexUrl4k &&
-                        (hasPermission(Permission.REQUEST_4K) ||
-                          hasPermission(Permission.REQUEST_4K_MOVIE))
-                      ? intl.formatMessage(messages.playonplex)
-                      : intl.formatMessage(messages.watchtrailer)}
-                  </span>
-                </>
-              }
-              onClick={() => {
-                if (data.mediaInfo?.plexUrl) {
-                  window.open(data.mediaInfo?.plexUrl, '_blank');
-                } else if (data.mediaInfo?.plexUrl4k) {
-                  window.open(data.mediaInfo?.plexUrl4k, '_blank');
-                } else if (trailerUrl) {
-                  window.open(trailerUrl, '_blank');
+            <div className="mt-2 sm:mt-0">
+              <ButtonWithDropdown
+                buttonType="ghost"
+                text={
+                  <>
+                    <svg
+                      className="w-5 h-5 mr-1"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span>
+                      {data.mediaInfo?.plexUrl
+                        ? intl.formatMessage(messages.playonplex)
+                        : data.mediaInfo?.plexUrl4k &&
+                          (hasPermission(Permission.REQUEST_4K) ||
+                            hasPermission(Permission.REQUEST_4K_MOVIE))
+                        ? intl.formatMessage(messages.playonplex)
+                        : intl.formatMessage(messages.watchtrailer)}
+                    </span>
+                  </>
                 }
-              }}
-            >
-              {(
-                trailerUrl
-                  ? data.mediaInfo?.plexUrl ||
-                    (data.mediaInfo?.plexUrl4k &&
+                onClick={() => {
+                  if (data.mediaInfo?.plexUrl) {
+                    window.open(data.mediaInfo?.plexUrl, '_blank');
+                  } else if (data.mediaInfo?.plexUrl4k) {
+                    window.open(data.mediaInfo?.plexUrl4k, '_blank');
+                  } else if (trailerUrl) {
+                    window.open(trailerUrl, '_blank');
+                  }
+                }}
+              >
+                {(
+                  trailerUrl
+                    ? data.mediaInfo?.plexUrl ||
+                      (data.mediaInfo?.plexUrl4k &&
+                        (hasPermission(Permission.REQUEST_4K) ||
+                          hasPermission(Permission.REQUEST_4K_MOVIE)))
+                    : data.mediaInfo?.plexUrl &&
+                      data.mediaInfo?.plexUrl4k &&
                       (hasPermission(Permission.REQUEST_4K) ||
-                        hasPermission(Permission.REQUEST_4K_MOVIE)))
-                  : data.mediaInfo?.plexUrl &&
-                    data.mediaInfo?.plexUrl4k &&
-                    (hasPermission(Permission.REQUEST_4K) ||
-                      hasPermission(Permission.REQUEST_4K_MOVIE))
-              ) ? (
-                <>
-                  {data.mediaInfo?.plexUrl &&
-                    data.mediaInfo?.plexUrl4k &&
-                    (hasPermission(Permission.REQUEST_4K) ||
-                      hasPermission(Permission.REQUEST_4K_MOVIE)) && (
+                        hasPermission(Permission.REQUEST_4K_MOVIE))
+                ) ? (
+                  <>
+                    {data.mediaInfo?.plexUrl &&
+                      data.mediaInfo?.plexUrl4k &&
+                      (hasPermission(Permission.REQUEST_4K) ||
+                        hasPermission(Permission.REQUEST_4K_MOVIE)) && (
+                        <ButtonWithDropdown.Item
+                          onClick={() => {
+                            window.open(data.mediaInfo?.plexUrl4k, '_blank');
+                          }}
+                          buttonType="ghost"
+                        >
+                          {intl.formatMessage(messages.play4konplex)}
+                        </ButtonWithDropdown.Item>
+                      )}
+                    {trailerUrl && (
                       <ButtonWithDropdown.Item
                         onClick={() => {
-                          window.open(data.mediaInfo?.plexUrl4k, '_blank');
+                          window.open(trailerUrl, '_blank');
                         }}
                         buttonType="ghost"
                       >
-                        {intl.formatMessage(messages.play4konplex)}
+                        {intl.formatMessage(messages.watchtrailer)}
                       </ButtonWithDropdown.Item>
                     )}
-                  {trailerUrl && (
-                    <ButtonWithDropdown.Item
-                      onClick={() => {
-                        window.open(trailerUrl, '_blank');
-                      }}
-                      buttonType="ghost"
-                    >
-                      {intl.formatMessage(messages.watchtrailer)}
-                    </ButtonWithDropdown.Item>
-                  )}
-                </>
-              ) : null}
-            </ButtonWithDropdown>
+                  </>
+                ) : null}
+              </ButtonWithDropdown>
+            </div>
           )}
           <div className="mb-3 sm:mb-0">
             <RequestButton
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 65e19528b..727b01a2e 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -378,7 +378,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         <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">
             {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
-              <span className="mr-2">
+              <span className="lg:mr-2">
                 <StatusBadge
                   status={data.mediaInfo?.status}
                   inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
@@ -422,93 +422,95 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 ))}
           </span>
         </div>
-        <div className="flex flex-wrap justify-center flex-shrink-0 mt-4 sm:flex-nowrap sm:justify-end lg:mt-0">
+        <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">
           {(trailerUrl ||
             data.mediaInfo?.plexUrl ||
             data.mediaInfo?.plexUrl4k) && (
-            <ButtonWithDropdown
-              buttonType="ghost"
-              text={
-                <>
-                  <svg
-                    className="w-5 h-5 mr-1"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <span>
-                    {data.mediaInfo?.plexUrl
-                      ? intl.formatMessage(messages.playonplex)
-                      : data.mediaInfo?.plexUrl4k &&
-                        (hasPermission(Permission.REQUEST_4K) ||
-                          hasPermission(Permission.REQUEST_4K_TV))
-                      ? intl.formatMessage(messages.play4konplex)
-                      : intl.formatMessage(messages.watchtrailer)}
-                  </span>
-                </>
-              }
-              onClick={() => {
-                if (data.mediaInfo?.plexUrl) {
-                  window.open(data.mediaInfo?.plexUrl, '_blank');
-                } else if (data.mediaInfo?.plexUrl4k) {
-                  window.open(data.mediaInfo?.plexUrl4k, '_blank');
-                } else if (trailerUrl) {
-                  window.open(trailerUrl, '_blank');
+            <div className="mt-2 sm:mt-0">
+              <ButtonWithDropdown
+                buttonType="ghost"
+                text={
+                  <>
+                    <svg
+                      className="w-5 h-5 mr-1"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span>
+                      {data.mediaInfo?.plexUrl
+                        ? intl.formatMessage(messages.playonplex)
+                        : data.mediaInfo?.plexUrl4k &&
+                          (hasPermission(Permission.REQUEST_4K) ||
+                            hasPermission(Permission.REQUEST_4K_TV))
+                        ? intl.formatMessage(messages.play4konplex)
+                        : intl.formatMessage(messages.watchtrailer)}
+                    </span>
+                  </>
                 }
-              }}
-            >
-              {(
-                trailerUrl
-                  ? data.mediaInfo?.plexUrl ||
-                    (data.mediaInfo?.plexUrl4k &&
+                onClick={() => {
+                  if (data.mediaInfo?.plexUrl) {
+                    window.open(data.mediaInfo?.plexUrl, '_blank');
+                  } else if (data.mediaInfo?.plexUrl4k) {
+                    window.open(data.mediaInfo?.plexUrl4k, '_blank');
+                  } else if (trailerUrl) {
+                    window.open(trailerUrl, '_blank');
+                  }
+                }}
+              >
+                {(
+                  trailerUrl
+                    ? data.mediaInfo?.plexUrl ||
+                      (data.mediaInfo?.plexUrl4k &&
+                        (hasPermission(Permission.REQUEST_4K) ||
+                          hasPermission(Permission.REQUEST_4K_TV)))
+                    : data.mediaInfo?.plexUrl &&
+                      data.mediaInfo?.plexUrl4k &&
                       (hasPermission(Permission.REQUEST_4K) ||
-                        hasPermission(Permission.REQUEST_4K_TV)))
-                  : data.mediaInfo?.plexUrl &&
+                        hasPermission(Permission.REQUEST_4K_TV))
+                ) ? (
+                  <>
+                    {data.mediaInfo?.plexUrl &&
                     data.mediaInfo?.plexUrl4k &&
                     (hasPermission(Permission.REQUEST_4K) ||
-                      hasPermission(Permission.REQUEST_4K_TV))
-              ) ? (
-                <>
-                  {data.mediaInfo?.plexUrl &&
-                  data.mediaInfo?.plexUrl4k &&
-                  (hasPermission(Permission.REQUEST_4K) ||
-                    hasPermission(Permission.REQUEST_4K_TV)) ? (
-                    <ButtonWithDropdown.Item
-                      onClick={() => {
-                        window.open(data.mediaInfo?.plexUrl4k, '_blank');
-                      }}
-                      buttonType="ghost"
-                    >
-                      {intl.formatMessage(messages.play4konplex)}
-                    </ButtonWithDropdown.Item>
-                  ) : null}
-                  {trailerUrl ? (
-                    <ButtonWithDropdown.Item
-                      onClick={() => {
-                        window.open(trailerUrl, '_blank');
-                      }}
-                      buttonType="ghost"
-                    >
-                      {intl.formatMessage(messages.watchtrailer)}
-                    </ButtonWithDropdown.Item>
-                  ) : null}
-                </>
-              ) : null}
-            </ButtonWithDropdown>
+                      hasPermission(Permission.REQUEST_4K_TV)) ? (
+                      <ButtonWithDropdown.Item
+                        onClick={() => {
+                          window.open(data.mediaInfo?.plexUrl4k, '_blank');
+                        }}
+                        buttonType="ghost"
+                      >
+                        {intl.formatMessage(messages.play4konplex)}
+                      </ButtonWithDropdown.Item>
+                    ) : null}
+                    {trailerUrl ? (
+                      <ButtonWithDropdown.Item
+                        onClick={() => {
+                          window.open(trailerUrl, '_blank');
+                        }}
+                        buttonType="ghost"
+                      >
+                        {intl.formatMessage(messages.watchtrailer)}
+                      </ButtonWithDropdown.Item>
+                    ) : null}
+                  </>
+                ) : null}
+              </ButtonWithDropdown>
+            </div>
           )}
           <div className="mb-3 sm:mb-0">
             <RequestButton