Equalise card styles for movies/galleries/images (#1015)

ui/v2.5/src/components/Galleries/GalleryCard.tsx

@@ -4,8 +4,14 @@ import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import { FormattedPlural } from "react-intl";
 import { useConfiguration } from "src/core/StashService";
-import { HoverPopover, Icon, TagLink } from "../Shared";
+import {
-import { BasicCard } from "../Shared/BasicCard";
+  BasicCard,
+  HoverPopover,
+  Icon,
+  TagLink,
+  TruncatedText,
+} from "src/components/Shared";
+import { TextUtils } from "src/utils";
 
 interface IProps {
   gallery: GQL.GallerySlimDataFragment;
@@ -174,7 +180,14 @@ export const GalleryCard: React.FC<IProps> = (props) => {
         <>
           <Link to={`/galleries/${props.gallery.id}`}>
             <h5 className="card-section-title">
-              {props.gallery.title ?? props.gallery.path}
+              <TruncatedText
+                text={
+                  props.gallery.title
+                    ? props.gallery.title
+                    : TextUtils.fileNameFromPath(props.gallery.path ?? "")
+                }
+                lineCount={2}
+              />
             </h5>
           </Link>
           <span>

ui/v2.5/src/components/Galleries/styles.scss

@@ -34,6 +34,10 @@
     }
   }
 
+  .card-popovers {
+    margin-bottom: 0;
+  }
+
   .card-section-title {
     color: $text-color;
   }

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -3,7 +3,13 @@ import { Button, ButtonGroup, Card, Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
-import { Icon, TagLink, HoverPopover, SweatDrops } from "src/components/Shared";
+import {
+  Icon,
+  TagLink,
+  HoverPopover,
+  SweatDrops,
+  TruncatedText,
+} from "src/components/Shared";
 import { TextUtils } from "src/utils";
 
 interface IImageCardProps {
@@ -200,9 +206,14 @@ export const ImageCard: React.FC<IImageCardProps> = (
       </div>
       <div className="card-section">
         <h5 className="card-section-title">
-          {props.image.title
+          <TruncatedText
-            ? props.image.title
+            text={
-            : TextUtils.fileNameFromPath(props.image.path)}
+              props.image.title
+                ? props.image.title
+                : TextUtils.fileNameFromPath(props.image.path)
+            }
+            lineCount={2}
+          />
         </h5>
       </div>
 

ui/v2.5/src/components/Images/styles.scss

@@ -47,6 +47,7 @@
     &-image {
       height: 100%;
       object-fit: contain;
+      object-position: top;
       width: 100%;
     }
 

ui/v2.5/src/components/Movies/MovieCard.tsx

@@ -62,7 +62,7 @@ export const MovieCard: FunctionComponent<IProps> = (props: IProps) => {
       details={
         <>
           <h5>
-            <TruncatedText text={props.movie.name} />
+            <TruncatedText text={props.movie.name} lineCount={2} />
           </h5>
           {maybeRenderSceneNumber()}
         </>

ui/v2.5/src/components/Movies/styles.scss

@@ -1,26 +1,20 @@
-.card.movie-card {
-  padding: 0 0 1rem 0;
-}
-
 .movie-details {
   max-width: 1200px;
 }
 
 .movie-card {
-  &-header {
+  width: 240px;
-    height: 240px;
+
-    line-height: 240px;
+  @media (max-width: 576px) {
-    text-align: center;
+    width: 100%;
+  }
+
+  &.card {
+    padding: 0 0 1rem;
   }
 
   &-image {
-    max-height: 240px;
     object-fit: contain;
-    vertical-align: middle;
+    width: 100%;
-    width: 320px;
-
-    @media (max-width: 576px) {
-      width: 100%;
-    }
   }
 }