Add popover to movies and episodes for showing original name

frontend/src/@scss/bazarr.scss

@@ -34,7 +34,3 @@ body {
     max-width: 500px;
   }
 }
-
-#manual-search-matches-info {
-  width: 100%;
-}

frontend/src/Movies/index.tsx

@@ -14,7 +14,7 @@ import { movieUpdateByRange, movieUpdateInfoAll } from "../@redux/actions";
 import { useRawMovies } from "../@redux/hooks";
 import { useReduxAction } from "../@redux/hooks/base";
 import { MoviesApi } from "../apis";
-import { ActionBadge } from "../components";
+import { ActionBadge, TextPopover } from "../components";
 import BaseItemView from "../generic/BaseItemView";
 
 interface Props {}
@@ -44,9 +44,11 @@ const MovieView: FunctionComponent<Props> = () => {
           } else {
             const target = `/movies/${row.original.radarrId}`;
             return (
-              <Link to={target} title={row.original.sceneName ?? value}>
-                <span>{value}</span>
-              </Link>
+              <TextPopover text={row.original.sceneName} delay={1}>
+                <Link to={target}>
+                  <span>{value}</span>
+                </Link>
+              </TextPopover>
             );
           }
         },

frontend/src/Series/Episodes/table.tsx

@@ -16,6 +16,7 @@ import {
   EpisodeHistoryModal,
   GroupTable,
   SubtitleToolModal,
+  TextPopover,
   useShowModal,
 } from "../../components";
 import { ManualSearchModal } from "../../components/modals/ManualSearchModal";
@@ -73,6 +74,11 @@ const Table: FunctionComponent<Props> = ({ episodes, update }) => {
         Header: "Title",
         accessor: "title",
         className: "text-nowrap",
+        Cell: ({ value, row }) => (
+          <TextPopover text={row.original.sceneName} delay={1}>
+            <span>{value}</span>
+          </TextPopover>
+        ),
       },
       {
         Header: "Audio",

frontend/src/components/index.tsx

@@ -10,10 +10,12 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconProps,
 } from "@fortawesome/react-fontawesome";
+import { isNull, isUndefined } from "lodash";
 import moment from "moment";
 import React, { FunctionComponent, useMemo } from "react";
 import {
   OverlayTrigger,
+  OverlayTriggerProps,
   Popover,
   Spinner,
   SpinnerProps,
@@ -148,6 +150,35 @@ export const LanguageText: FunctionComponent<LanguageTextProps> = ({
   );
 };
 
+interface TextPopoverProps {
+  children: React.ReactElement<any, any>;
+  text: string | undefined | null;
+  placement?: OverlayTriggerProps["placement"];
+  delay?: number;
+}
+
+export const TextPopover: FunctionComponent<TextPopoverProps> = ({
+  children,
+  text,
+  placement,
+  delay,
+}) => {
+  if (isNull(text) || isUndefined(text)) {
+    return children;
+  }
+
+  const popover = (
+    <Popover className="mw-100 py-1" id={text}>
+      <span className="mx-2">{text}</span>
+    </Popover>
+  );
+  return (
+    <OverlayTrigger delay={delay} overlay={popover} placement={placement}>
+      {children}
+    </OverlayTrigger>
+  );
+};
+
 export * from "./async";
 export * from "./buttons";
 export * from "./ContentHeader";

frontend/src/components/modals/ManualSearchModal.tsx

@@ -282,7 +282,7 @@ const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
 
   const popover = useMemo(
     () => (
-      <Popover id="manual-search-matches-info">
+      <Popover className="w-100" id="manual-search-matches-info">
         <Popover.Content>
           <Container fluid>
             <Row>