Improve containers images modal (#3471)

Closes #3454

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/src/layout/common/SeeAllModal.module.css

@@ -8,6 +8,10 @@
   width: 620px !important;
 }
 
+.modalBig {
+  width: 840px !important;
+}
+
 .summary {
   font-size: 70%;
   top: -1px;

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) => {
 
           <Modal
             modalDialogClassName={styles.modalDialog}
-            modalClassName={`${props.modalClassName} ${styles.modal}`}
+            modalClassName={classNames(props.modalClassName, styles.modal, {
+              [styles.modalBig]: !isUndefined(props.size) && props.size === 'xl',
+            })}
             header={<div className={`h3 m-2 flex-grow-1 text-truncate ${styles.title}`}>{props.title}</div>}
             open={openStatus}
             onClose={() => setOpenStatus(false)}
             footerClassName={styles.modalFooter}
+            size={props.size}
           >
             <div className="my-3 mw-100">
               <div className="d-none d-md-block">{props.itemsForModal || props.items}</div>

web/src/layout/package/ContainersImages.module.css

@@ -44,3 +44,11 @@
   background-color: var(--color-black-15) !important;
   color: var(--color-font);
 }
+
+.image {
+  font-size: 0.9rem;
+}
+
+.imageCol {
+  width: 70%;
+}

web/src/layout/package/ContainersImages.tsx

@@ -86,7 +86,7 @@ const ContainersImages = (props: Props) => {
 
       itemsForModal.push(
         <tr key={`container-row-${index}-${containerImage.image}`}>
-          <td>
+          <td className={styles.image}>
             <div className={`d-flex flex-row align-items-center`}>
               <div className="mx-1">
                 <FiPackage className="text-muted" />
@@ -124,7 +124,7 @@ const ContainersImages = (props: Props) => {
         <table className={`table table-striped table-bordered table-sm mb-0 ${styles.table}`}>
           <thead>
             <tr className={styles.tableTitle}>
-              <th scope="col">
+              <th scope="col" className={styles.imageCol}>
                 <span className="px-1">Image</span>
               </th>
               <th scope="col">
@@ -155,6 +155,7 @@ const ContainersImages = (props: Props) => {
           moreBtnText="details"
           {...containers}
           packageId={props.packageId}
+          size="xl"
           visibleModal
         />
       </div>