Fixed: popups inside period details were overlaying container.

Author: MadOPcode

src/components/Popup/index.jsx

@@ -4,12 +4,27 @@ import PT from "prop-types";
 import cn from "classnames";
 import compStyles from "./styles.module.scss";
 
-const Popup = ({ children, className, referenceElement }) => {
+/**
+ * Displays a popup near the reference element.
+ *
+ * @param {Object} props component properties
+ * @param {any} [props.children] child nodes
+ * @param {string} [props.className] class name to be added to root element
+ * @param {Object} props.referenceElement reference element
+ * @param {'absolute'|'fixed'} [props.strategy] positioning strategy
+ * @returns {JSX.Element}
+ */
+const Popup = ({
+  children,
+  className,
+  referenceElement,
+  strategy = "absolute",
+}) => {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom",
-    strategy: "fixed",
+    strategy,
     modifiers: [
       { name: "arrow", options: { element: arrowElement, padding: 10 } },
       { name: "offset", options: { offset: [0, 5] } },
@@ -34,6 +49,7 @@ Popup.propTypes = {
   children: PT.node,
   className: PT.string,
   referenceElement: PT.object.isRequired,
+  strategy: PT.oneOf(["absolute", "fixed"]),
 };
 
 export default Popup;

src/routes/WorkPeriods/components/PaymentError/index.jsx

@@ -14,9 +14,15 @@ import styles from "./styles.module.scss";
  * @param {string} [props.className] class name to be added to root element
  * @param {Object} [props.errorDetails] error details object
  * @param {boolean} [props.isImportant] whether the error deemed important
+ * @param {'absolute'|'fixed'} [props.popupStrategy] popup positioning strategy
  * @returns {JSX.Element}
  */
-const PaymentError = ({ className, errorDetails, isImportant = true }) => {
+const PaymentError = ({
+  className,
+  errorDetails,
+  isImportant = true,
+  popupStrategy = "absolute",
+}) => {
   const [isShowPopup, setIsShowPopup] = useState(false);
   const [refElem, setRefElem] = useState(null);
   const containerRef = useRef(null);
@@ -42,7 +48,7 @@ const PaymentError = ({ className, errorDetails, isImportant = true }) => {
         tabIndex={0}
       />
       {isShowPopup && errorDetails && (
-        <Popup referenceElement={refElem}>
+        <Popup referenceElement={refElem} strategy={popupStrategy}>
           <PaymentErrorDetails details={errorDetails} />
         </Popup>
       )}
@@ -54,6 +60,7 @@ PaymentError.propTypes = {
   className: PT.string,
   errorDetails: PT.object,
   isImportant: PT.bool,
+  popupStrategy: PT.oneOf(["absolute", "fixed"]),
 };
 
 export default PaymentError;

src/routes/WorkPeriods/components/PaymentTotal/index.jsx

@@ -17,9 +17,16 @@ import styles from "./styles.module.scss";
  * @param {Array} [props.payments] an array with payments information
  * @param {number} props.paymentTotal total paid sum
  * @param {number} props.daysPaid number of paid days
+ * @param {'absolute'|'fixed'} [props.popupStrategy] popup positioning strategy
  * @returns {JSX.Element}
  */
-const PaymentTotal = ({ className, payments, paymentTotal, daysPaid }) => {
+const PaymentTotal = ({
+  className,
+  payments,
+  paymentTotal,
+  daysPaid,
+  popupStrategy = "absolute",
+}) => {
   const [isShowPopup, setIsShowPopup] = useState(false);
   const [refElem, setRefElem] = useState(null);
   const containerRef = useRef(null);
@@ -56,7 +63,7 @@ const PaymentTotal = ({ className, payments, paymentTotal, daysPaid }) => {
         <span className={styles.daysPaid}>({daysPaid})</span>
       </span>
       {hasPayments && isShowPopup && (
-        <Popup referenceElement={refElem}>
+        <Popup referenceElement={refElem} strategy={popupStrategy}>
           <PaymentsList payments={payments} />
         </Popup>
       )}
@@ -69,6 +76,7 @@ PaymentTotal.propTypes = {
   payments: PT.array,
   paymentTotal: PT.number.isRequired,
   daysPaid: PT.number.isRequired,
+  popupStrategy: PT.oneOf(["absolute", "fixed"]),
 };
 
 export default PaymentTotal;

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -126,13 +126,15 @@ const PeriodItem = ({
               className={styles.paymentError}
               errorDetails={data.paymentErrorLast}
               isImportant={data.paymentStatus !== PAYMENT_STATUS.COMPLETED}
+              popupStrategy="fixed"
             />
           )}
           <PaymentTotal
             className={styles.paymentTotalContainer}
             daysPaid={data.daysPaid}
             payments={data.payments}
             paymentTotal={data.paymentTotal}
+            popupStrategy="fixed"
           />
         </td>
         <td>