[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.
dagster-io · Oct 3, 2023 · bb6f1ef · bb6f1ef · github-actions · Oct 3, 2023
1 parent c235be0
commit bb6f1ef
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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>
     </>
   );
 });