fix(ui): fix request list UI behavior when season list is too long (#1106)

* fix(ui): fix request list UI behavior when season list is too long

* fix: add default variants to Tailwind scale

src/components/RequestCard/index.tsx

@@ -111,7 +111,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
               : `/tv/${requestData.media.tmdbId}`
           }
         >
-          <a className="overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
+          <a className="pb-0.5 sm:pb-1 overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
             {isMovie(title) ? title.title : title.name}
           </a>
         </Link>

src/components/RequestList/RequestItem/index.tsx

@@ -132,7 +132,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
           setShowEditModal(false);
         }}
       />
-      <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="relative flex flex-col justify-between w-full py-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={{
@@ -141,8 +141,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
               : undefined,
           }}
         />
-        <div className="relative flex flex-col justify-between w-full sm:flex-row">
-          <div className="relative z-10 flex items-center w-full lg:w-1/2 xl:w-7/12 2xl:w-2/3">
+        <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
+          <div className="relative z-10 flex items-center w-full pl-4 pr-4 overflow-hidden lg:w-1/2 xl:w-7/12 2xl:w-2/3 sm:pr-0">
             <Link
               href={
                 requestData.type === 'movie'
@@ -162,18 +162,20 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 />
               </a>
             </Link>
-            <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="flex flex-col justify-center pl-2 overflow-hidden lg:pl-4">
+              <div className="card-field">
+                <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>
               <div className="card-field">
                 <Link href={`/users/${requestData.requestedBy.id}`}>
                   <a className="flex items-center group">
@@ -212,7 +214,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
               )}
             </div>
           </div>
-          <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="z-10 flex flex-col justify-between w-full pr-4 mt-4 ml-2 text-sm sm:mt-0 lg:flex-1 lg:pr-0">
             <div className="card-field">
               <span className="card-field-name">
                 {intl.formatMessage(messages.status)}
@@ -275,7 +277,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                             <img
                               src={requestData.modifiedBy.avatar}
                               alt=""
-                              className="ml-1 pl-0.5 avatar-sm"
+                              className="ml-1.5 avatar-sm"
                             />
                             <span className="text-sm truncate group-hover:underline">
                               {requestData.modifiedBy.displayName}
@@ -292,7 +294,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
             </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">
+        <div className="z-10 flex flex-row justify-between w-full pl-4 pr-4 mt-4 flex-nowrap lg:flex-col lg:mt-0 lg:items-end lg:justify-around lg:w-64 lg:pl-0">
           {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
             MediaStatus.UNKNOWN &&
             requestData.status !== MediaRequestStatus.DECLINED &&

src/styles/globals.css

@@ -55,11 +55,11 @@ ul.cardList > li {
 }
 
 img.avatar-sm {
-  @apply w-5 mr-1 pr-0.5 rounded-full;
+  @apply w-5 h-5 mr-1.5 rounded-full transition duration-300 scale-100 transform-gpu group-hover:scale-105;
 }
 
 .card-field {
-  @apply flex items-center my-0.5 sm:my-1 text-sm;
+  @apply flex items-center py-0.5 sm:py-1 text-sm;
 }
 
 .card-field-name {

tailwind.config.js

@@ -63,6 +63,7 @@ module.exports = {
     margin: ['first', 'last', 'responsive'],
     boxShadow: ['group-focus'],
     opacity: ['disabled', 'hover', 'group-hover'],
+    scale: ['hover', 'focus', 'group-hover'],
     zIndex: ['hover', 'responsive'],
   },
   plugins: [