Fixed: Display tag list when sort by tags on series Posters

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -211,14 +211,6 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </div>
       ) : null}
 
-      {showTags && tags.length ? (
-        <div className={styles.tags}>
-          <div className={styles.tagsList}>
-            <TagListConnector tags={tags} />
-          </div>
-        </div>
-      ) : null}
-
       {nextAiring ? (
         <div
           className={styles.nextAiring}
@@ -238,6 +230,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </div>
       ) : null}
 
+      {showTags && tags.length ? (
+        <div className={styles.tags}>
+          <div className={styles.tagsList}>
+            <TagListConnector tags={tags} />
+          </div>
+        </div>
+      ) : null}
+
       <SeriesIndexPosterInfo
         originalLanguage={originalLanguage}
         network={network}
@@ -253,6 +253,8 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         shortDateFormat={shortDateFormat}
         longDateFormat={longDateFormat}
         timeFormat={timeFormat}
+        tags={tags}
+        showTags={showTags}
       />
 
       <EditSeriesModalConnector

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css

@@ -3,3 +3,11 @@
   text-align: center;
   font-size: $smallFontSize;
 }
+
+.tags {
+  composes: tags from '~./SeriesIndexPoster.css';
+}
+
+.tagsList {
+  composes: tagsList from '~./SeriesIndexPoster.css';
+}

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css.d.ts

@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'tags': string;
+  'tagsList': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import TagListConnector from 'Components/TagListConnector';
 import Language from 'Language/Language';
 import QualityProfile from 'typings/QualityProfile';
 import formatDateTime from 'Utilities/Date/formatDateTime';
@@ -17,11 +18,13 @@ interface SeriesIndexPosterInfoProps {
   seasonCount: number;
   path: string;
   sizeOnDisk?: number;
+  tags: number[];
   sortKey: string;
   showRelativeDates: boolean;
   shortDateFormat: string;
   longDateFormat: string;
   timeFormat: string;
+  showTags: boolean;
 }
 
 function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
@@ -35,11 +38,13 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     seasonCount,
     path,
     sizeOnDisk,
+    tags,
     sortKey,
     showRelativeDates,
     shortDateFormat,
     longDateFormat,
     timeFormat,
+    showTags,
   } = props;
 
   if (sortKey === 'network' && network) {
@@ -122,6 +127,16 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     return <div className={styles.info}>{seasons}</div>;
   }
 
+  if (!showTags && sortKey === 'tags' && tags.length) {
+    return (
+      <div className={styles.tags}>
+        <div className={styles.tagsList}>
+          <TagListConnector tags={tags} />
+        </div>
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
     return (
       <div className={styles.info} title={translate('Path')}>

frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx

@@ -183,6 +183,11 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'tags':
+        if (!showTags) {
+          heights.push(21);
+        }
+        break;
       default:
       // No need to add a height of 0
     }