diff --git a/web/src/components/InlineModal.tsx b/web/src/components/InlineModal.tsx index 8021cad5..0d110aa1 100644 --- a/web/src/components/InlineModal.tsx +++ b/web/src/components/InlineModal.tsx @@ -26,6 +26,7 @@ function InlineModal(props: InlineModalProps) { const previousData = usePrevious(props); const ref = useRef(null); const gridItemRef = useRef(null); + const inlineModalRef = useRef(null); const darkMode = useStore((state) => state.theme.darkMode); const modalHeight = getEstimatedModalHeight( containerWidth, @@ -97,79 +98,86 @@ function InlineModal(props: InlineModalProps) { : false; return ( - - - darkMode ? theme.palette.grey[800] : theme.palette.grey[400], - padding: '0', - paddingTop: 2, - minHeight: modalHeight, + - {modalChildren?.map( - (child: PlexMedia, idx: number, arr: PlexMedia[]) => ( - - - handleMoveModal(idx)} - modalChildren={(children: PlexMedia[]) => - handleModalChildren(children) - } - modalIsPending={(isPending: boolean) => - handleModalIsPending(isPending) - } - /> - - ), - )} - {/* This Modal is for last row items because they can't be inserted using the above inline modal */} - - - + + darkMode ? theme.palette.grey[800] : theme.palette.grey[400], + padding: '0', + paddingTop: 2, + minHeight: modalHeight, + }} + ref={ref} + > + {modalChildren?.map( + (child: PlexMedia, idx: number, arr: PlexMedia[]) => ( + + + handleMoveModal(idx)} + modalChildren={(children: PlexMedia[]) => + handleModalChildren(children) + } + modalIsPending={(isPending: boolean) => + handleModalIsPending(isPending) + } + /> + + ), + )} + {/* This Modal is for last row items because they can't be inserted using the above inline modal */} + + + + ); } diff --git a/web/src/components/channel_config/PlexProgrammingSelector.tsx b/web/src/components/channel_config/PlexProgrammingSelector.tsx index 0beb09fb..c69a203a 100644 --- a/web/src/components/channel_config/PlexProgrammingSelector.tsx +++ b/web/src/components/channel_config/PlexProgrammingSelector.tsx @@ -335,7 +335,6 @@ export default function PlexProgrammingSelector() { modalChildren={modalChildren} rowSize={rowSize} open={isOpen} - containerRef={inlineModalRef} type={item.type} />