From 280d80b775ef865bb4f30b3cb87be89631d83261 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 Jan 2023 11:35:31 +0100
Subject: [PATCH] feat(ui) - cards - cards modal footer alignment

---
 .../MetricsLibraryModal/MetricsLibraryModal.tsx           | 8 +++++---
 frontend/app/components/Modal/Modal.tsx                   | 4 ++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
index caa6e0bb1..155c3c123 100644
--- a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
@@ -26,12 +26,14 @@ function MetricsLibraryModal(props: Props) {
   return (
     <>
       <Modal.Header title="Cards Library" />
-      <Modal.Content>
+      <Modal.Content className='p-4 pb-20'>
         <div className="border">
           <MetricsList siteId={siteId} onSelectionChange={onSelectionChange} />
         </div>
-        <SelectedContent dashboardId={dashboardId} selected={selectedList} />
       </Modal.Content>
+      <Modal.Footer>
+        <SelectedContent dashboardId={dashboardId} selected={selectedList} />
+      </Modal.Footer>
     </>
   );
 }
@@ -49,7 +51,7 @@ function SelectedContent({ dashboardId, selected }: any) {
   };
 
   return (
-    <div className="flex items-center rounded border bg-gray-light-shade absolute justify-between p-3 left-4 right-4 bottom-4">
+    <div className="flex items-center rounded border bg-gray-light-shade justify-between p-3">
       <div>
         Selected <span className="font-medium">{selected.length}</span> of{' '}
         <span className="font-medium">{total}</span>
diff --git a/frontend/app/components/Modal/Modal.tsx b/frontend/app/components/Modal/Modal.tsx
index ab4a5fa23..fb375333e 100644
--- a/frontend/app/components/Modal/Modal.tsx
+++ b/frontend/app/components/Modal/Modal.tsx
@@ -50,4 +50,8 @@ Modal.Content = ({ children, className = 'p-4' }: { children: any; className?: s
   return <div className={cn('overflow-y-auto relative', className)} style={{ height: 'calc(100vh - 52px)'}}>{children}</div>;
 };
 
+Modal.Footer = ({ children, className = ''} : any) => {
+  return <div className={cn('absolute bottom-0 w-full left-0 right-0', className)} style={{ }}>{children}</div>;
+}
+
 export default Modal;