From b176ce48625a73631adbe137799cb20582dfffb6 Mon Sep 17 00:00:00 2001
From: Rakesh Mistry <mistryrn@mcmaster.ca>
Date: Wed, 28 Jul 2021 23:52:48 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Donor=20Table=20Styling=20Fixes?=
 =?UTF-8?q?=20for=20Dropdown=20Panel=20(#1983)=20*=20Apply=20`min-height`?=
 =?UTF-8?q?=20to=20table=20so=20the=20panel=20can=20be=20used=20without=20?=
 =?UTF-8?q?scrolling=20when=20there=20isn't=20enough=20data=20*=20Prevent?=
 =?UTF-8?q?=20table=20header=20opacity=20change=20when=20all=20data=20is?=
 =?UTF-8?q?=20filtered=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/PropTypesTable/ReactTableContainer.tsx | 11 +++++++++++
 .../DonorDataSummary/DonorSummaryTable.tsx        |  2 ++
 uikit/Table/reactTableDefaultStyle.tsx            | 11 +++++++++++
 uikit/Table/styledComponent.tsx                   | 15 +++++++++++++++
 4 files changed, 39 insertions(+)

diff --git a/.storybook/PropTypesTable/ReactTableContainer.tsx b/.storybook/PropTypesTable/ReactTableContainer.tsx
index a82a90fcc..6fa2d9d2e 100644
--- a/.storybook/PropTypesTable/ReactTableContainer.tsx
+++ b/.storybook/PropTypesTable/ReactTableContainer.tsx
@@ -52,6 +52,17 @@ export default styled('div')`
     border-collapse: collapse;
     overflow: auto;
   }
+  .ReactTable.has-filters .rt-table {
+    opacity: 1 !important;
+    min-height: 220px;
+    .rt-tbody .rt-tr-group {
+      max-height: 28px;
+    }
+  }
+  .ReactTable.has-filters.no-data .rt-table {
+    margin-bottom: -165px;
+    border-bottom: none;
+  }
   .ReactTable .rt-thead {
     -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;
diff --git a/components/pages/submission-system/program-dashboard/DonorDataSummary/DonorSummaryTable.tsx b/components/pages/submission-system/program-dashboard/DonorDataSummary/DonorSummaryTable.tsx
index c9364adc1..3bf9c84bc 100644
--- a/components/pages/submission-system/program-dashboard/DonorDataSummary/DonorSummaryTable.tsx
+++ b/components/pages/submission-system/program-dashboard/DonorDataSummary/DonorSummaryTable.tsx
@@ -517,6 +517,8 @@ export default ({
             onPageSizeChange={onPageSizeChange}
             onSortedChange={onSortedChange}
             defaultSorted={getDefaultSort(initialSorts)}
+            // filter panel style workarounds
+            className={`has-filters${!programDonorSummaryEntries.length ? ' no-data' : ''}`}
           />
         </>
       )}
diff --git a/uikit/Table/reactTableDefaultStyle.tsx b/uikit/Table/reactTableDefaultStyle.tsx
index c49076f9e..2416e66e0 100644
--- a/uikit/Table/reactTableDefaultStyle.tsx
+++ b/uikit/Table/reactTableDefaultStyle.tsx
@@ -48,6 +48,17 @@ export default css`
     border-collapse: collapse;
     overflow: auto;
   }
+  &.ReactTable.has-filters .rt-table {
+    opacity: 1 !important;
+    min-height: 220px;
+    .rt-tbody .rt-tr-group {
+      max-height: 28px;
+    }
+  }
+  &.ReactTable.has-filters.no-data .rt-table {
+    margin-bottom: -165px;
+    border-bottom: none;
+  }
   &.ReactTable .rt-thead {
     flex: 1 0 auto;
     display: flex;
diff --git a/uikit/Table/styledComponent.tsx b/uikit/Table/styledComponent.tsx
index ef5d9d6d4..202f88d44 100644
--- a/uikit/Table/styledComponent.tsx
+++ b/uikit/Table/styledComponent.tsx
@@ -43,6 +43,21 @@ export const StyledTable = styled<typeof ReactTable, StyledTableProps>(ReactTabl
 
   &.ReactTable {
     border: none;
+    &.has-filters {
+      .rt-table {
+        opacity: 1 !important;
+        min-height: 220px;
+        .rt-tbody .rt-tr-group {
+          max-height: 28px;
+        }
+      }
+      &.no-data {
+        .rt-table {
+          margin-bottom: -165px;
+          border-bottom: none;
+        }
+      }
+    }
     & .rt-table {
       ${({ theme, withOutsideBorder }) =>
         withOutsideBorder