From d53e614951fa08558bee429bcef7d6e741e30332 Mon Sep 17 00:00:00 2001 From: Cintia Sanchez Garcia Date: Fri, 10 Nov 2023 12:36:25 -0600 Subject: [PATCH] Improve containers images modal Closes #3454 Signed-off-by: Cintia Sanchez Garcia --- web/src/layout/common/SeeAllModal.module.css | 4 ++++ web/src/layout/common/SeeAllModal.tsx | 7 ++++++- .../layout/common/__snapshots__/SeeAllModal.test.tsx.snap | 2 +- web/src/layout/package/ContainersImages.module.css | 8 ++++++++ web/src/layout/package/ContainersImages.tsx | 5 +++-- .../package/__snapshots__/ContainersImages.test.tsx.snap | 4 ++-- 6 files changed, 24 insertions(+), 6 deletions(-) diff --git a/web/src/layout/common/SeeAllModal.module.css b/web/src/layout/common/SeeAllModal.module.css index c98efa16c..68dc7eae6 100644 --- a/web/src/layout/common/SeeAllModal.module.css +++ b/web/src/layout/common/SeeAllModal.module.css @@ -8,6 +8,10 @@ width: 620px !important; } +.modalBig { + width: 840px !important; +} + .summary { font-size: 70%; top: -1px; diff --git a/web/src/layout/common/SeeAllModal.tsx b/web/src/layout/common/SeeAllModal.tsx index f2820d367..559e2d03d 100644 --- a/web/src/layout/common/SeeAllModal.tsx +++ b/web/src/layout/common/SeeAllModal.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import { isUndefined } from 'lodash'; import { useEffect, useState } from 'react'; import { HiPlusCircle } from 'react-icons/hi'; @@ -16,6 +17,7 @@ interface Props { modalClassName?: string; moreBtnText?: string; visibleModal?: boolean; + size?: string; } const DEFAULT_VISIBLE_ITEMS = 5; @@ -74,11 +76,14 @@ const SeeAllModal = (props: Props) => { {props.title}} open={openStatus} onClose={() => setOpenStatus(false)} footerClassName={styles.modalFooter} + size={props.size} >
{props.itemsForModal || props.items}
diff --git a/web/src/layout/common/__snapshots__/SeeAllModal.test.tsx.snap b/web/src/layout/common/__snapshots__/SeeAllModal.test.tsx.snap index c18ffa92a..51abafcec 100644 --- a/web/src/layout/common/__snapshots__/SeeAllModal.test.tsx.snap +++ b/web/src/layout/common/__snapshots__/SeeAllModal.test.tsx.snap @@ -111,7 +111,7 @@ exports[`SeeAllModal creates snapshot 1`] = ` class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable modalDialog" >