fix(ui): improve responsive design on new request list UI (#1105)

src/components/RequestCard/index.tsx

@@ -5,7 +5,10 @@ import type { TvDetails } from '../../../server/models/Tv';
 import type { MovieDetails } from '../../../server/models/Movie';
 import useSWR from 'swr';
 import { LanguageContext } from '../../context/LanguageContext';
-import { MediaRequestStatus } from '../../../server/constants/media';
+import {
+  MediaRequestStatus,
+  MediaStatus,
+} from '../../../server/constants/media';
 import Badge from '../Common/Badge';
 import { useUser, Permission } from '../../hooks/useUser';
 import axios from 'axios';
@@ -17,6 +20,7 @@ import globalMessages from '../../i18n/globalMessages';
 import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
+  status: 'Status',
   seasons: 'Seasons',
   all: 'All',
 });
@@ -100,39 +104,48 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
       }}
     >
       <div className="flex flex-col flex-1 min-w-0 pr-4">
-        <h2 className="overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
-          <Link
-            href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'}
-            as={
-              request.type === 'movie'
-                ? `/movie/${request.media.tmdbId}`
-                : `/tv/${request.media.tmdbId}`
-            }
-          >
+        <Link
+          href={
+            request.type === 'movie'
+              ? `/movie/${requestData.media.tmdbId}`
+              : `/tv/${requestData.media.tmdbId}`
+          }
+        >
+          <a className="overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
             {isMovie(title) ? title.title : title.name}
-          </Link>
-        </h2>
-        <Link href={`/users/${requestData.requestedBy.id}`}>
-          <a className="flex items-center group">
-            <img
-              src={requestData.requestedBy.avatar}
-              alt=""
-              className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5"
-            />
-            <span className="text-xs truncate sm:text-sm group-hover:underline">
-              {requestData.requestedBy.displayName}
-            </span>
           </a>
         </Link>
-        {requestData.media.status && (
-          <div className="mt-1 sm:mt-2">
+        <div className="card-field">
+          <Link href={`/users/${requestData.requestedBy.id}`}>
+            <a className="flex items-center group">
+              <img
+                src={requestData.requestedBy.avatar}
+                alt=""
+                className="avatar-sm"
+              />
+              <span className="truncate group-hover:underline">
+                {requestData.requestedBy.displayName}
+              </span>
+            </a>
+          </Link>
+        </div>
+        <div className="card-field">
+          <span className="card-field-name">
+            {intl.formatMessage(messages.status)}
+          </span>
+          {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+            MediaStatus.UNKNOWN ||
+          requestData.status === MediaRequestStatus.DECLINED ? (
+            <Badge badgeType="danger">
+              {requestData.status === MediaRequestStatus.DECLINED
+                ? intl.formatMessage(globalMessages.declined)
+                : intl.formatMessage(globalMessages.failed)}
+            </Badge>
+          ) : (
             <StatusBadge
               status={
-                requestData.is4k
-                  ? requestData.media.status4k
-                  : requestData.media.status
+                requestData.media[requestData.is4k ? 'status4k' : 'status']
               }
-              is4k={requestData.is4k}
               inProgress={
                 (
                   requestData.media[
@@ -140,12 +153,15 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                   ] ?? []
                 ).length > 0
               }
+              is4k={requestData.is4k}
             />
-          </div>
-        )}
+          )}
+        </div>
         {request.seasons.length > 0 && (
-          <div className="items-center hidden mt-2 text-sm sm:flex">
-            <span className="mr-2">{intl.formatMessage(messages.seasons)}</span>
+          <div className="card-field">
+            <span className="card-field-name">
+              {intl.formatMessage(messages.seasons)}
+            </span>
             {!isMovie(title) &&
             title.seasons.filter((season) => season.seasonNumber !== 0)
               .length === request.seasons.length ? (
@@ -215,15 +231,14 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             </div>
           )}
       </div>
-      <div className="flex-shrink-0 w-20 sm:w-28">
-        <Link
-          href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'}
-          as={
-            request.type === 'movie'
-              ? `/movie/${request.media.tmdbId}`
-              : `/tv/${request.media.tmdbId}`
-          }
-        >
+      <Link
+        href={
+          request.type === 'movie'
+            ? `/movie/${requestData.media.tmdbId}`
+            : `/tv/${requestData.media.tmdbId}`
+        }
+      >
+        <a className="flex-shrink-0 w-20 sm:w-28">
           <img
             src={
               title.posterPath
@@ -233,8 +248,8 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             alt=""
             className="w-20 transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer sm:w-28 transform-gpu hover:scale-105 hover:shadow-md"
           />
-        </Link>
-      </div>
+        </a>
+      </Link>
     </div>
   );
 };

src/components/RequestList/RequestItem/index.tsx

@@ -23,12 +23,14 @@ import ConfirmButton from '../../Common/ConfirmButton';
 
 const messages = defineMessages({
   seasons: 'Seasons',
+  all: 'All',
   notavailable: 'N/A',
   failedretry: 'Something went wrong while retrying the request.',
   areyousure: 'Are you sure?',
   status: 'Status',
   requested: 'Requested',
-  modifiedby: 'Modified By',
+  modified: 'Modified',
+  modifieduserdate: '{date} by {user}',
 });
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -130,114 +132,122 @@ const RequestItem: React.FC<RequestItemProps> = ({
           setShowEditModal(false);
         }}
       />
-      <div className="relative flex flex-col justify-between w-full p-4 overflow-hidden text-white bg-gray-800 rounded-md shadow-md lg:h-32 lg:flex-row">
+      <div className="relative flex flex-col justify-between w-full p-4 overflow-hidden text-gray-400 bg-gray-800 rounded-md shadow-md lg:h-32 lg:flex-row">
         <div
           className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
           style={{
             backgroundImage: `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
           }}
         />
-        <div className="relative z-10 flex w-full lg:w-60 xl:w-80 2xl:w-96">
-          <img
-            src={
-              title.posterPath
-                ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
-                : '/images/overseerr_poster_not_found.png'
-            }
-            alt=""
-            className="h-full transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer w-14 lg:w-auto lg:h-full transform-gpu hover:scale-105 hover:shadow-md"
-          />
-          <div className="flex flex-col justify-start ml-2 overflow-hidden lg:justify-center lg:ml-4">
-            <Link
-              href={
-                requestData.type === 'movie'
-                  ? `/movie/${requestData.media.tmdbId}`
-                  : `/tv/${requestData.media.tmdbId}`
+        <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
+          <div className="relative z-10 flex w-full overflow-hidden lg:w-1/2 xl:w-7/12 2xl:w-2/3">
+            <img
+              src={
+                title.posterPath
+                  ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
+                  : '/images/overseerr_poster_not_found.png'
               }
-            >
-              <a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
-                {isMovie(title) ? title.title : title.name}
-              </a>
-            </Link>
-            <Link href={`/users/${requestData.requestedBy.id}`}>
-              <a className="flex items-center mt-2">
-                <img
-                  src={requestData.requestedBy.avatar}
-                  alt=""
-                  className="w-5 mr-2 rounded-full"
-                />
-                <span className="text-sm hover:underline">
-                  {requestData.requestedBy.displayName}
-                </span>
-              </a>
-            </Link>
-            {requestData.seasons.length > 0 && (
-              <div className="flex items-center mt-2 text-sm">
-                <span className="mr-2">
-                  {intl.formatMessage(messages.seasons)}
-                </span>
-                {requestData.seasons.map((season) => (
-                  <span key={`season-${season.id}`} className="mr-2">
-                    <Badge>{season.seasonNumber}</Badge>
-                  </span>
-                ))}
+              alt=""
+              className="h-full transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer w-14 lg:w-auto lg:h-full transform-gpu hover:scale-105 hover:shadow-md"
+            />
+            <div className="flex flex-col justify-center ml-2 overflow-hidden lg:ml-4">
+              <Link
+                href={
+                  requestData.type === 'movie'
+                    ? `/movie/${requestData.media.tmdbId}`
+                    : `/tv/${requestData.media.tmdbId}`
+                }
+              >
+                <a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
+                  {isMovie(title) ? title.title : title.name}
+                </a>
+              </Link>
+              <div className="card-field">
+                <Link href={`/users/${requestData.requestedBy.id}`}>
+                  <a className="flex items-center group">
+                    <img
+                      src={requestData.requestedBy.avatar}
+                      alt=""
+                      className="avatar-sm"
+                    />
+                    <span className="text-sm text-gray-300 truncate group-hover:underline">
+                      {requestData.requestedBy.displayName}
+                    </span>
+                  </a>
+                </Link>
               </div>
-            )}
+              {request.seasons.length > 0 && (
+                <div className="card-field">
+                  <span className="card-field-name">
+                    {intl.formatMessage(messages.seasons)}
+                  </span>
+                  {!isMovie(title) &&
+                  title.seasons.filter((season) => season.seasonNumber !== 0)
+                    .length === request.seasons.length ? (
+                    <span className="mr-2 uppercase">
+                      <Badge>{intl.formatMessage(messages.all)}</Badge>
+                    </span>
+                  ) : (
+                    <div className="flex overflow-x-scroll hide-scrollbar flex-nowrap">
+                      {request.seasons.map((season) => (
+                        <span key={`season-${season.id}`} className="mr-2">
+                          <Badge>{season.seasonNumber}</Badge>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-        <div className="z-10 flex flex-col justify-between w-full mt-4 text-sm lg:mt-0 lg:flex-1 lg:ml-4">
-          <div className="flex items-center my-1">
-            <span className="mr-2">{intl.formatMessage(messages.status)}</span>
-            {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
-              MediaStatus.UNKNOWN ||
-            requestData.status === MediaRequestStatus.DECLINED ? (
-              <Badge badgeType="danger">
-                {requestData.status === MediaRequestStatus.DECLINED
-                  ? intl.formatMessage(globalMessages.declined)
-                  : intl.formatMessage(globalMessages.failed)}
-              </Badge>
-            ) : (
-              <StatusBadge
-                status={
-                  requestData.media[requestData.is4k ? 'status4k' : 'status']
-                }
-                inProgress={
-                  (
-                    requestData.media[
-                      requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
-                    ] ?? []
-                  ).length > 0
-                }
-                is4k={requestData.is4k}
-                plexUrl={requestData.media.plexUrl}
-                plexUrl4k={requestData.media.plexUrl4k}
-              />
-            )}
-          </div>
-          <div className="flex items-center my-1">
-            <span className="mr-2">
-              {intl.formatMessage(messages.requested)}
-            </span>
-            <span className="text-gray-300">
-              {intl.formatDate(requestData.createdAt)}
-            </span>
-          </div>
-          <div className="flex items-center my-1">
-            <span className="mr-2">
-              {intl.formatMessage(messages.modifiedby)}
-            </span>
-            <span>
-              {requestData.modifiedBy ? (
-                <span className="text-sm text-gray-300">
-                  <Link href={`/users/${requestData.modifiedBy.id}`}>
-                    <a className="flex items-center">
-                      <img
-                        src={requestData.modifiedBy.avatar}
-                        alt=""
-                        className="w-5 mr-2 rounded-full"
-                      />
-                      <span className="text-sm">
-                        {requestData.modifiedBy.displayName} (
+          <div className="z-10 flex flex-col justify-between w-full mt-4 text-sm sm:mt-0 lg:flex-1 sm:ml-2">
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(messages.status)}
+              </span>
+              {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+                MediaStatus.UNKNOWN ||
+              requestData.status === MediaRequestStatus.DECLINED ? (
+                <Badge badgeType="danger">
+                  {requestData.status === MediaRequestStatus.DECLINED
+                    ? intl.formatMessage(globalMessages.declined)
+                    : intl.formatMessage(globalMessages.failed)}
+                </Badge>
+              ) : (
+                <StatusBadge
+                  status={
+                    requestData.media[requestData.is4k ? 'status4k' : 'status']
+                  }
+                  inProgress={
+                    (
+                      requestData.media[
+                        requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
+                      ] ?? []
+                    ).length > 0
+                  }
+                  is4k={requestData.is4k}
+                  plexUrl={requestData.media.plexUrl}
+                  plexUrl4k={requestData.media.plexUrl4k}
+                />
+              )}
+            </div>
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(messages.requested)}
+              </span>
+              <span className="text-gray-300">
+                {intl.formatDate(requestData.createdAt)}
+              </span>
+            </div>
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(messages.modified)}
+              </span>
+              <span className="truncate">
+                {requestData.modifiedBy ? (
+                  <span className="flex text-sm text-gray-300">
+                    {intl.formatMessage(messages.modifieduserdate, {
+                      date: (
                         <FormattedRelativeTime
                           value={Math.floor(
                             (new Date(requestData.updatedAt).getTime() -
@@ -246,15 +256,28 @@ const RequestItem: React.FC<RequestItemProps> = ({
                           )}
                           updateIntervalInSeconds={1}
                         />
-                        )
-                      </span>
-                    </a>
-                  </Link>
-                </span>
-              ) : (
-                <span className="text-sm text-gray-300">N/A</span>
-              )}
-            </span>
+                      ),
+                      user: (
+                        <Link href={`/users/${requestData.modifiedBy.id}`}>
+                          <a className="flex items-center group">
+                            <img
+                              src={requestData.modifiedBy.avatar}
+                              alt=""
+                              className="ml-1 pl-0.5 avatar-sm"
+                            />
+                            <span className="text-sm truncate group-hover:underline">
+                              {requestData.modifiedBy.displayName}
+                            </span>
+                          </a>
+                        </Link>
+                      ),
+                    })}
+                  </span>
+                ) : (
+                  <span className="text-sm text-gray-300">N/A</span>
+                )}
+              </span>
+            </div>
           </div>
         </div>
         <div className="z-10 flex flex-row justify-between w-full mt-4 flex-nowrap lg:flex-col lg:mt-0 lg:items-end lg:justify-around lg:w-64">

src/components/RequestList/index.tsx

@@ -173,14 +173,13 @@ const RequestList: React.FC = () => {
       })}
 
       {data.results.length === 0 && (
-        <div className="flex flex-col items-center justify-center w-screen p-6 text-white lg:w-full">
-          <span className="text-base">
+        <div className="flex flex-col items-center justify-center w-full py-24 text-white">
+          <span className="text-2xl text-gray-400">
             {intl.formatMessage(messages.noresults)}
           </span>
           {currentFilter !== 'all' && (
             <div className="mt-4">
               <Button
-                buttonSize="sm"
                 buttonType="primary"
                 onClick={() => setCurrentFilter('all')}
               >
@@ -190,9 +189,9 @@ const RequestList: React.FC = () => {
           )}
         </div>
       )}
-      <div className="mt-6 text-white">
+      <div className="actions">
         <nav
-          className="flex flex-col items-center py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
+          className="flex flex-col items-center mb-3 space-y-3 sm:space-y-0 sm:flex-row"
           aria-label="Pagination"
         >
           <div className="hidden lg:flex lg:flex-1">
@@ -212,7 +211,7 @@ const RequestList: React.FC = () => {
             </p>
           </div>
           <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-            <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+            <span className="items-center -mt-3 text-sm truncate sm:mt-0">
               {intl.formatMessage(messages.resultsperpage, {
                 pageSize: (
                   <select

src/i18n/locale/en.json

@@ -165,9 +165,12 @@
   "components.RequestButton.viewrequest4k": "View 4K Request",
   "components.RequestCard.all": "All",
   "components.RequestCard.seasons": "Seasons",
+  "components.RequestCard.status": "Status",
+  "components.RequestList.RequestItem.all": "All",
   "components.RequestList.RequestItem.areyousure": "Are you sure?",
   "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
-  "components.RequestList.RequestItem.modifiedby": "Modified By",
+  "components.RequestList.RequestItem.modified": "Modified",
+  "components.RequestList.RequestItem.modifieduserdate": "{date} by {user}",
   "components.RequestList.RequestItem.notavailable": "N/A",
   "components.RequestList.RequestItem.requested": "Requested",
   "components.RequestList.RequestItem.seasons": "Seasons",

src/styles/globals.css

@@ -54,6 +54,18 @@ ul.cardList > li {
   @apply max-w-2xl mt-1 text-sm leading-5 text-gray-500;
 }
 
+img.avatar-sm {
+  @apply w-5 mr-1 pr-0.5 rounded-full;
+}
+
+.card-field {
+  @apply flex items-center my-0.5 sm:my-1 text-sm;
+}
+
+.card-field-name {
+  @apply mr-2 font-medium;
+}
+
 .section {
   @apply mt-6 mb-10 text-white;
 }
@@ -75,7 +87,7 @@ ul.cardList > li {
 }
 
 .actions {
-  @apply pt-5 mt-8 border-t border-gray-700;
+  @apply pt-5 mt-8 text-white border-t border-gray-700;
 }
 
 input[type='checkbox'] {
@@ -104,7 +116,7 @@ select.rounded-r-only {
 
 input.short,
 select.short {
-  @apply w-20;
+  width: 4.875rem;
 }
 
 .protocol {