fix(frontend): aligned movie and tv details (#331)

sct · Dec 16, 2020 · db0a5c4 · db0a5c4
1 parent c545ec1
commit db0a5c4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -193,14 +193,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         )}
       </SlideOver>
       <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
-        <div className="mr-4 flex-shrink-0">
+        <div className="md:mr-4 flex-shrink-0">
           <img
             src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
             alt=""
             className="rounded md:rounded-lg shadow md:shadow-2xl w-32 md:w-52"
           />
         </div>
-        <div className="text-white flex flex-col mr-4 mt-4 md:mt-0 text-center md:text-left">
+        <div className="text-white flex flex-col md:mr-4 mt-4 md:mt-0 text-center md:text-left">
           <div className="mb-2">
             {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
               <Badge badgeType="success">
@@ -352,7 +352,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           {hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button
               buttonType="default"
-              className="ml-2"
+              className="ml-2 first:ml-0"
               onClick={() => setShowManager(true)}
             >
               <svg

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
@@ -196,14 +196,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         )}
       </SlideOver>
       <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
-        <div className="mr-4 flex-shrink-0">
+        <div className="md:mr-4 flex-shrink-0">
           <img
             src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
             alt=""
             className="rounded md:rounded-lg shadow md:shadow-2xl w-32 md:w-52"
           />
         </div>
-        <div className="text-white flex flex-col mr-4 mt-4 md:mt-0 text-center md:text-left">
+        <div className="text-white flex flex-col md:mr-4 mt-4 md:mt-0 text-center md:text-left">
           <div className="mb-2">
             {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
               <Badge badgeType="success">
@@ -344,7 +344,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           {hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button
               buttonType="default"
-              className="ml-2"
+              className="ml-2 first:ml-0"
               onClick={() => setShowManager(true)}
             >
               <svg