[ui] Fix scrolling to very bottom of definition on Ops page (#17322)

## Summary & Motivation At some point I believe changes to the header / wrapper components caused an extra "height: 100%" on the Deployment > Ops tab -- 100% is "too tall" and the bottom of the left and right panels are both off the bottom of the screen, so you can't see the last ~100px Before: <img width="1728" alt="image" src="https://github.com/dagster-io/dagster/assets/1037212/f45b59ea-e51a-4fc2-acb0-6e9be6d7c815"> After: <img width="1728" alt="image" src="https://github.com/dagster-io/dagster/assets/1037212/e608772e-6b04-4eb9-924f-6b5919b58876"> ## How I Tested These Changes Verified that these components are only used for this page and fixed them visually Co-authored-by: bengotow <[email protected]>
dagster-io · Oct 23, 2023 · 666c4f8 · 666c4f8 · github-actions · Oct 23, 2023
1 parent 288a3da
commit 666c4f8
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ops/OpDetailsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/ops/OpDetailsRoot.tsx
@@ -91,6 +91,6 @@ const USED_SOLID_DETAILS_QUERY = gql`
 `;
 
 export const OpDetailScrollContainer = styled.div`
-  overflow: scroll;
+  overflow-y: scroll;
   flex: 1;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ops/OpsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/ops/OpsRoot.tsx
@@ -136,7 +136,7 @@ export const OpsRoot: React.FC<Props> = (props) => {
   });
 
   return (
-    <div style={{height: '100%'}}>
+    <div style={{flex: 1, minHeight: 0}}>
       <Loading queryResult={queryResult}>
         {({repositoryOrError}) => {
           if (repositoryOrError?.__typename === 'Repository' && repositoryOrError.usedSolids) {