From 4c39606ce7dc1f2fefc54f636d57129f179570b2 Mon Sep 17 00:00:00 2001
From: Maya Barnes <63436329+mayagbarnes@users.noreply.github.com>
Date: Thu, 7 Jul 2022 15:21:04 -0700
Subject: [PATCH] Fix table overflow styling (#4934)

* Add overflow scroll to table container

* revise to overflow to auto

* add overlay

* Remove snapshots

* Update screenshots
---
 frontend/src/components/elements/ArrowTable/styled-components.ts | 1 +
 frontend/src/components/elements/Table/styled-components.ts      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/components/elements/ArrowTable/styled-components.ts b/frontend/src/components/elements/ArrowTable/styled-components.ts
index 1b29991d6893..4d10e93cbe21 100644
--- a/frontend/src/components/elements/ArrowTable/styled-components.ts
+++ b/frontend/src/components/elements/ArrowTable/styled-components.ts
@@ -23,6 +23,7 @@ export const StyledTableContainer = styled.div(({ theme }) => ({
   fontFamily: theme.fonts.sansSerif,
   padding: `${theme.spacing.twoXS} ${theme.spacing.xs}`,
   lineHeight: theme.lineHeights.table,
+  overflow: ["auto", "overlay"],
 }))
 
 export const StyledTable = styled.table(({ theme }) => ({
diff --git a/frontend/src/components/elements/Table/styled-components.ts b/frontend/src/components/elements/Table/styled-components.ts
index 19ab32e7eee0..659443c027c9 100644
--- a/frontend/src/components/elements/Table/styled-components.ts
+++ b/frontend/src/components/elements/Table/styled-components.ts
@@ -23,6 +23,7 @@ export const StyledTableContainer = styled.div(({ theme }) => ({
   fontFamily: theme.fonts.sansSerif,
   padding: `${theme.spacing.twoXS} ${theme.spacing.md}`,
   lineHeight: theme.lineHeights.table,
+  overflow: ["auto", "overlay"],
 }))
 
 export const StyledTable = styled.table(({ theme }) => ({