From eb972674cb96eef1a6b60711fc29abbdb16af9f7 Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Thu, 24 Oct 2024 10:01:48 -0400
Subject: [PATCH] Allow horizontal scroll in Middle Panel and give tables extra
 padding

---
 src/common-elements/fields-layout.ts | 3 +++
 src/common-elements/panels.ts        | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts
index 9e7fce0bfa..76ce970f59 100644
--- a/src/common-elements/fields-layout.ts
+++ b/src/common-elements/fields-layout.ts
@@ -155,6 +155,9 @@ export const PropertiesTable = styled.table`
   border-spacing: 0;
   width: 100%;
 
+  // Extra padding for overflow scroll
+  padding-right: 32px;
+
   > tr {
     vertical-align: middle;
   }
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index 9459c73e2b..c97a6f5f74 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -5,6 +5,7 @@ export const MiddlePanel = styled.div<{ compact?: boolean }>`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
   background: var(--middle-panel-bg-color);
+  overflow-x: auto;
 
   ${({ compact, theme }) =>
     media.lessThan('medium', true)`