Place popover to right on edit pages (#3939)

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx

@@ -502,6 +502,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
                     )
                   }
                   ids={formik.values.tag_ids}
+                  hoverPlacement="right"
                 />
               </Col>
             </Form.Group>

ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx

@@ -279,6 +279,7 @@ export const ImageEditPanel: React.FC<IProps> = ({
                     )
                   }
                   ids={formik.values.tag_ids}
+                  hoverPlacement="right"
                 />
               </Col>
             </Form.Group>

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -899,6 +899,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
                     )
                   }
                   ids={formik.values.tag_ids}
+                  hoverPlacement="right"
                 />
               </Col>
             </Form.Group>

ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx

@@ -94,6 +94,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
       }
       ids={fieldProps.field.value ? [fieldProps.field.value] : []}
       noSelectionString="Select/create tag..."
+      hoverPlacement="right"
     />
   );
 
@@ -108,6 +109,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
       }
       ids={fieldProps.field.value}
       noSelectionString="Select/create tags..."
+      hoverPlacement="right"
     />
   );
 

ui/v2.5/src/components/Shared/Select.tsx

@@ -31,6 +31,7 @@ import { galleryTitle } from "src/core/galleries";
 import { TagPopover } from "../Tags/TagPopover";
 import { defaultMaxOptionsShown, IUIConfig } from "src/core/config";
 import { useDebouncedSetState } from "src/hooks/debounce";
+import { Placement } from "react-bootstrap/esm/Overlay";
 
 export type SelectObject = {
   id: string;
@@ -832,9 +833,9 @@ export const MovieSelect: React.FC<IFilterProps> = (props) => {
   );
 };
 
-export const TagSelect: React.FC<IFilterProps & { excludeIds?: string[] }> = (
+export const TagSelect: React.FC<
-  props
+  IFilterProps & { excludeIds?: string[]; hoverPlacement?: Placement }
-) => {
+> = (props) => {
   const [tagAliases, setTagAliases] = useState<Record<string, string[]>>({});
   const [allAliases, setAllAliases] = useState<string[]>([]);
   const { data, loading } = useAllTagsForFilter();
@@ -890,7 +891,7 @@ export const TagSelect: React.FC<IFilterProps & { excludeIds?: string[] }> = (
       : optionProps.data.value;
 
     return (
-      <TagPopover id={id}>
+      <TagPopover id={id} placement={props.hoverPlacement}>
         <reactSelectComponents.Option {...thisOptionProps} />
       </TagPopover>
     );

ui/v2.5/src/components/Shared/TagLink.tsx

@@ -15,6 +15,7 @@ import { galleryTitle } from "src/core/galleries";
 import * as GQL from "src/core/generated-graphql";
 import { TagPopover } from "../Tags/TagPopover";
 import { markerTitle } from "src/core/markers";
+import { Placement } from "react-bootstrap/esm/Overlay";
 
 interface IFile {
   path: string;
@@ -40,6 +41,7 @@ interface IProps {
   scene?: Partial<Pick<SceneDataFragment, "id" | "title" | "files">>;
   gallery?: Partial<IGallery>;
   className?: string;
+  hoverPlacement?: Placement;
 }
 
 export const TagLink: React.FC<IProps> = (props: IProps) => {
@@ -84,7 +86,7 @@ export const TagLink: React.FC<IProps> = (props: IProps) => {
   }
   return (
     <Badge className={cx("tag-item", props.className)} variant="secondary">
-      <TagPopover id={id}>
+      <TagPopover id={id} placement={props.hoverPlacement}>
         <Link to={link}>{title}</Link>
       </TagPopover>
     </Badge>

ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx

@@ -241,6 +241,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
                 ...formik.values.child_ids,
               ]}
               creatable={false}
+              hoverPlacement="right"
             />
           </Col>
         </Form.Group>
@@ -269,6 +270,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
                 ...formik.values.parent_ids,
               ]}
               creatable={false}
+              hoverPlacement="right"
             />
           </Col>
         </Form.Group>

ui/v2.5/src/components/Tags/TagPopover.tsx

@@ -6,9 +6,11 @@ import { useFindTag } from "../../core/StashService";
 import { TagCard } from "./TagCard";
 import { ConfigurationContext } from "../../hooks/Config";
 import { IUIConfig } from "src/core/config";
+import { Placement } from "react-bootstrap/esm/Overlay";
 
 interface ITagPopoverProps {
   id?: string;
+  placement?: Placement;
 }
 
 export const TagPopoverCard: React.FC<ITagPopoverCardProps> = ({ id }) => {
@@ -33,7 +35,11 @@ export const TagPopoverCard: React.FC<ITagPopoverCardProps> = ({ id }) => {
   );
 };
 
-export const TagPopover: React.FC<ITagPopoverProps> = ({ id, children }) => {
+export const TagPopover: React.FC<ITagPopoverProps> = ({
+  id,
+  children,
+  placement = "top",
+}) => {
   const { configuration: config } = React.useContext(ConfigurationContext);
 
   const showTagCardOnHover =
@@ -45,7 +51,7 @@ export const TagPopover: React.FC<ITagPopoverProps> = ({ id, children }) => {
 
   return (
     <HoverPopover
-      placement={"top"}
+      placement={placement}
       enterDelay={500}
       leaveDelay={100}
       content={<TagPopoverCard id={id} />}