fix(frontend): changed plex, request, and cog buttons to align properly on smaller mobile UIs (#928)

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,10 +394,11 @@ 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) && (
+            <div className="mt-2 sm:mt-0">
               <ButtonWithDropdown
                 buttonType="ghost"
                 text={
@@ -481,6 +482,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   </>
                 ) : null}
               </ButtonWithDropdown>
+            </div>
           )}
           <div className="mb-3 sm:mb-0">
             <RequestButton

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,10 +422,11 @@ 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) && (
+            <div className="mt-2 sm:mt-0">
               <ButtonWithDropdown
                 buttonType="ghost"
                 text={
@@ -509,6 +510,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                   </>
                 ) : null}
               </ButtonWithDropdown>
+            </div>
           )}
           <div className="mb-3 sm:mb-0">
             <RequestButton