From 044a877cb9de7b7e0a93bd097e34cee405c4287c Mon Sep 17 00:00:00 2001
From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com>
Date: Tue, 3 Oct 2023 10:01:51 -0500
Subject: [PATCH] [ui] Fix config dialog scrolling (#16975)

## Summary & Motivation

Some recent CodeMirror changes led to the config dialogs being
unscrollable. Repair this by setting a height and overflow style on the
CodeMirror target div.

## How I Tested These Changes

View config dialogs (code location config, run config), Deployment
configuration page, launchpad. Verify that CodeMirror containers are
properly scrollable.
---
 .../src/components/RawCodeMirror.tsx              |  2 +-
 .../ui-core/src/instance/InstanceConfig.tsx       | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/RawCodeMirror.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/RawCodeMirror.tsx
index 6cccb0d680b5c..76daf2bb1b885 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/RawCodeMirror.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/RawCodeMirror.tsx
@@ -81,5 +81,5 @@ export const RawCodeMirror = (props: Props) => {
     }
   }, [options]);
 
-  return <div ref={target} />;
+  return <div style={{height: '100%', overflow: 'hidden'}} ref={target} />;
 };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx
index 9e7be64f19651..7ee145d971d7e 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx
@@ -88,12 +88,15 @@ export const InstanceConfig = React.memo(() => {
           Dagster version: <Code style={{fontSize: '16px'}}>{data.version}</Code>
         </Subheading>
       </Box>
-      <StyledRawCodeMirror
-        value={config || ''}
-        options={{readOnly: true, lineNumbers: true, mode: 'yaml'}}
-        handlers={handlers}
-        theme={['instance-config']}
-      />
+      {/* Div wrapper on CodeMirror to allow entire page to scroll */}
+      <div>
+        <StyledRawCodeMirror
+          value={config || ''}
+          options={{readOnly: true, lineNumbers: true, mode: 'yaml'}}
+          handlers={handlers}
+          theme={['instance-config']}
+        />
+      </div>
     </>
   );
 });