[dagit] Add a gradient behind the Gantt chart step selector now

dagster-io · Mar 2, 2022 · c808d3b · c808d3b
1 parent cbc48e8
commit c808d3b
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/js_modules/dagit/packages/core/src/gantt/GanttChart.tsx b/js_modules/dagit/packages/core/src/gantt/GanttChart.tsx
@@ -345,7 +345,7 @@ const GanttChartInner = (props: GanttChartInnerProps) => {
         />
       )}
       <div style={{overflow: 'scroll', flex: 1}} {...containerProps}>
-        <div style={{position: 'relative', marginBottom: 50, ...layoutSize}}>
+        <div style={{position: 'relative', marginBottom: 70, ...layoutSize}}>
           {measurementComplete && (
             <GanttChartViewportContents
               options={options}
@@ -384,7 +384,7 @@ const GanttChartInner = (props: GanttChartInnerProps) => {
             </Box>
           </WebsocketWarning>
         ) : null}
-        <Box flex={{direction: 'row', alignItems: 'center', gap: 12}}>
+        <FilterInputsBackgroundBox flex={{direction: 'row', alignItems: 'center', gap: 12}}>
           <GraphQueryInput
             items={props.graph}
             value={props.selection.query}
@@ -398,7 +398,7 @@ const GanttChartInner = (props: GanttChartInnerProps) => {
             label="Hide unselected steps"
             onChange={props.onChange}
           />
-        </Box>
+        </FilterInputsBackgroundBox>
       </GraphQueryInputContainer>
     </>
   );
@@ -774,6 +774,11 @@ const GraphQueryInputContainer = styled.div`
   white-space: nowrap;
 `;
 
+const FilterInputsBackgroundBox = styled(Box)`
+  background: radial-gradient(${ColorsWIP.Gray50} 0%, rgba(255, 255, 255, 0) 100%);
+  padding: 15px 15px 0px 15px;
+`;
+
 export const GanttChartLoadingState = ({runId}: {runId: string}) => (
   <GanttChartContainer>
     <OptionsContainer />