Enhance PerformerPopover with cardClassName prop and add MatchedPerformerPreview component

- Added cardClassName prop to PerformerPopoverCard and PerformerPopover for customizable styling.
- Introduced MatchedPerformerPreview component to encapsulate PerformerPopover usage with a performerID.
- Updated PerformerResult to utilize MatchedPerformerPreview for improved structure and styling.

ui/v2.5/src/components/Performers/PerformerPopover.tsx

@@ -9,10 +9,12 @@ import { Placement } from "react-bootstrap/esm/Overlay";
 
 interface IPeromerPopoverCardProps {
   id: string;
+  cardClassName?: string;
 }
 
 export const PerformerPopoverCard: React.FC<IPeromerPopoverCardProps> = ({
   id,
+  cardClassName,
 }) => {
   const { data, loading, error } = useFindPerformer(id);
 
@@ -29,7 +31,7 @@ export const PerformerPopoverCard: React.FC<IPeromerPopoverCardProps> = ({
   const performer = data.findPerformer;
 
   return (
-    <div className="tag-popover-card">
+    <div className={`tag-popover-card ${cardClassName ?? ""}`.trim()}>
       <PerformerCard performer={performer} zoomIndex={0} />
     </div>
   );
@@ -40,6 +42,7 @@ interface IPeroformerPopoverProps {
   hide?: boolean;
   placement?: Placement;
   target?: React.RefObject<HTMLElement>;
+  cardClassName?: string;
 }
 
 export const PerformerPopover: React.FC<IPeroformerPopoverProps> = ({
@@ -48,6 +51,7 @@ export const PerformerPopover: React.FC<IPeroformerPopoverProps> = ({
   children,
   placement = "top",
   target,
+  cardClassName,
 }) => {
   const { configuration: config } = useConfigurationContext();
 
@@ -63,7 +67,7 @@ export const PerformerPopover: React.FC<IPeroformerPopoverProps> = ({
       placement={placement}
       enterDelay={500}
       leaveDelay={100}
-      content={<PerformerPopoverCard id={id} />}
+      content={<PerformerPopoverCard id={id} cardClassName={cardClassName} />}
     >
       {children}
     </HoverPopover>

ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Placement } from "react-bootstrap/esm/Overlay";
+import { PerformerPopover } from "src/components/Performers/PerformerPopover";
+
+interface IMatchedPerformerPreviewProps {
+  performerID?: string | null;
+  placement?: Placement;
+}
+
+export const MatchedPerformerPreview: React.FC<IMatchedPerformerPreviewProps> = ({
+  performerID,
+  placement = "right",
+  children,
+}) => {
+  if (!performerID) {
+    return <>{children}</>;
+  }
+
+  return (
+    <PerformerPopover
+      id={performerID}
+      placement={placement}
+      cardClassName="tagger-matched-performer-popover"
+    >
+      {children}
+    </PerformerPopover>
+  );
+};
+

ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx

@@ -12,6 +12,7 @@ import { getStashboxBase } from "src/utils/stashbox";
 import { ExternalLink } from "src/components/Shared/ExternalLink";
 import { Link } from "react-router-dom";
 import { LinkButton } from "../LinkButton";
+import { MatchedPerformerPreview } from "./MatchedPerformerPreview";
 
 const PerformerLink: React.FC<{
   performer: GQL.ScrapedPerformer | Performer;
@@ -133,11 +134,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
                 <FormattedMessage id="component_tagger.verb_matched" />:
               </span>
               <b className="col-3 text-right">
-                <PerformerLink
-                  performer={matchedPerformer}
-                  url={`${performerURLPrefix}${matchedPerformer.id}`}
-                  internal
-                />
+                <MatchedPerformerPreview performerID={matchedPerformer.id}>
+                  <PerformerLink
+                    performer={matchedPerformer}
+                    url={`${performerURLPrefix}${matchedPerformer.id}`}
+                    internal
+                  />
+                </MatchedPerformerPreview>
               </b>
             </div>
           </OptionalField>

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

@@ -95,6 +95,16 @@
   }
 }
 
+.tagger-matched-performer-popover {
+  .card {
+    width: 200px;
+  }
+
+  .performer-card-image {
+    max-height: 300px;
+  }
+}
+
 .selected-result {
   background-color: hsl(204, 20%, 30%);
   border-radius: 3px;