From 4c6938ca3a1afff67a914c3733718c7fb22bf2b0 Mon Sep 17 00:00:00 2001
From: KennyG <kennyg@kennyg.com>
Date: Thu, 23 Apr 2026 11:18:34 -0400
Subject: [PATCH] Consolidate styling of performer popover card

- Replaced PerformerPreviewCard with PerformerCard in PerformerPopover for better encapsulation and display.
- Simplified MatchedPerformerPreview by removing unnecessary loading state handling and age calculations.
- Enhanced styling in Tagger component with additional padding for better layout consistency.
---
 .../Performers/PerformerPopover.tsx           | 11 ++----
 .../Tagger/scenes/MatchedPerformerPreview.tsx | 39 +++----------------
 ui/v2.5/src/components/Tagger/styles.scss     |  3 ++
 3 files changed, 12 insertions(+), 41 deletions(-)

diff --git a/ui/v2.5/src/components/Performers/PerformerPopover.tsx b/ui/v2.5/src/components/Performers/PerformerPopover.tsx
index f987c9343..84657cd17 100644
--- a/ui/v2.5/src/components/Performers/PerformerPopover.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerPopover.tsx
@@ -5,6 +5,7 @@ import { HoverPopover } from "../Shared/HoverPopover";
 import { useFindPerformer } from "../../core/StashService";
 import { useConfigurationContext } from "../../hooks/Config";
 import { Placement } from "react-bootstrap/esm/Overlay";
+import { PerformerCard } from "./PerformerCard";
 import { IPerformerPreviewData, PerformerPreviewCard } from "./PerformerPreviewCard";
 
 interface IPeromerPopoverCardProps {
@@ -35,13 +36,9 @@ const PerformerPopoverCardByID: React.FC<{
 
   return (
     <>
-      <PerformerPreviewCard
-        name={performer.name}
-        image={performer.image_path}
-        country={performer.country}
-        gender={performer.gender}
-        disambiguation={performer.disambiguation}
-      />
+      <div className="tag-popover-card">
+        <PerformerCard performer={performer} zoomIndex={0} />
+      </div>
       {cardExtras}
     </>
   );
diff --git a/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx b/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx
index 53291f781..c0dbec4d1 100644
--- a/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx
@@ -4,8 +4,6 @@ import { IntlShape, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { PerformerPopover } from "src/components/Performers/PerformerPopover";
 import { useConfigurationContext } from "src/hooks/Config";
-import TextUtils from "src/utils/text";
-import { localPerformerToPreviewData } from "./ScrapedPerformerPreview";
 
 interface IPerformerDeltaRow {
   label: string;
@@ -187,18 +185,13 @@ export const MatchedPerformerPreview = ({
   children,
 }: IMatchedPerformerPreviewProps) => {
   const intl = useIntl();
-  const loadingText = intl.formatMessage({
-    id: "loading.generic",
-    defaultMessage: "Loading...",
-  });
   const { configuration: config } = useConfigurationContext();
   const showPerformerCardOnHover = config?.ui.showTagCardOnHover ?? true;
   const [isOpened, setIsOpened] = useState(false);
-  const { data: selectedPerformerData, loading: selectedPerformerLoading } =
-    GQL.useFindPerformerQuery({
-      variables: { id: performerID ?? "" },
-      skip: !performerID || !isOpened,
-    });
+  const { data: selectedPerformerData } = GQL.useFindPerformerQuery({
+    variables: { id: performerID ?? "" },
+    skip: !performerID || !isOpened,
+  });
   const performer = selectedPerformerData?.findPerformer;
   const warningStashID =
     endpoint && scrapedPerformer.remote_site_id && performer
@@ -211,22 +204,6 @@ export const MatchedPerformerPreview = ({
   const deltaRows = performer
     ? buildPerformerDeltaRows(scrapedPerformer, performer, intl)
     : [];
-  const matchedAge = performer
-    ? TextUtils.age(performer.birthdate, performer.death_date)
-    : 0;
-  const matchedAgeString =
-    performer && matchedAge !== 0
-      ? intl.formatMessage(
-          { id: "media_info.performer_card.age" },
-          {
-            age: matchedAge,
-            years_old: intl.formatMessage({
-              id: "years_old",
-              defaultMessage: "years old",
-            }),
-          }
-        )
-      : null;
   const warningEndpointName = warningStashID
     ? config?.general.stashBoxes.find(
         (sb) => sb.endpoint === warningStashID.endpoint
@@ -239,13 +216,7 @@ export const MatchedPerformerPreview = ({
 
   return (
     <PerformerPopover
-      previewData={
-        performer
-          ? localPerformerToPreviewData(performer, matchedAgeString)
-          : undefined
-      }
-      loading={selectedPerformerLoading}
-      loadingText={loadingText}
+      id={performerID ?? undefined}
       cardExtras={
         warningStashID || deltaRows.length > 0 ? (
           <div className="tagger-matched-performer-popover-extra">
diff --git a/ui/v2.5/src/components/Tagger/styles.scss b/ui/v2.5/src/components/Tagger/styles.scss
index 571d992c6..c3e5b3cf8 100644
--- a/ui/v2.5/src/components/Tagger/styles.scss
+++ b/ui/v2.5/src/components/Tagger/styles.scss
@@ -109,6 +109,9 @@
   border-top: 1px solid $secondary;
   margin-top: 0.4rem;
   padding-top: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 0.4rem;
 }
 
 .tagger-performer-delta-rows {