[dagit] Run timeline: make popover scrollable (#8319)

### Summary & Motivation

In the batched run popover in the run timeline on Instance Overview, limit the height of the list and make it scrollable.

<img width="286" alt="Screen Shot 2022-06-10 at 11 12 08 AM" src="https://user-images.githubusercontent.com/2823852/173108011-58d3ce9a-9f50-440b-be66-af5b470ec2ed.png">

### How I Tested These Changes

Storybook example, with one overlapping batch forced to render enough runs to trigger the overflow.

Verify that the non-overflowing popover (e.g. 2 runs) also looks fine.

js_modules/dagit/packages/core/src/runs/RunTimeline.tsx

@@ -557,36 +557,38 @@ interface RunHoverContentProps {
 const RunHoverContent = (props: RunHoverContentProps) => {
   const {jobKey, batch} = props;
   return (
-    <Box padding={4} style={{width: '260px'}}>
-      <Box padding={8} border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}>
+    <Box style={{width: '260px'}}>
+      <Box padding={12} border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}>
         <HoverContentJobName>{jobKey}</HoverContentJobName>
       </Box>
-      {batch.runs.map((run, ii) => (
-        <Box
-          key={run.id}
-          border={ii > 0 ? {side: 'top', width: 1, color: Colors.KeylineGray} : null}
-          flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
-          padding={8}
-        >
-          <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
-            <RunStatusDot status={run.status} size={8} />
-            {run.status === 'SCHEDULED' ? (
-              'Scheduled'
-            ) : (
-              <Link to={`/instance/runs/${run.id}`}>
-                <Mono>{run.id.slice(0, 8)}</Mono>
-              </Link>
-            )}
+      <div style={{maxHeight: '240px', overflowY: 'auto'}}>
+        {batch.runs.map((run, ii) => (
+          <Box
+            key={run.id}
+            border={ii > 0 ? {side: 'top', width: 1, color: Colors.KeylineGray} : null}
+            flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
+            padding={{vertical: 8, horizontal: 12}}
+          >
+            <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+              <RunStatusDot status={run.status} size={8} />
+              {run.status === 'SCHEDULED' ? (
+                'Scheduled'
+              ) : (
+                <Link to={`/instance/runs/${run.id}`}>
+                  <Mono>{run.id.slice(0, 8)}</Mono>
+                </Link>
+              )}
+            </Box>
+            <Mono>
+              {run.status === 'SCHEDULED' ? (
+                <TimestampDisplay timestamp={run.startTime / 1000} />
+              ) : (
+                <TimeElapsed startUnix={run.startTime / 1000} endUnix={run.endTime / 1000} />
+              )}
+            </Mono>
           </Box>
-          <Mono>
-            {run.status === 'SCHEDULED' ? (
-              <TimestampDisplay timestamp={run.startTime / 1000} />
-            ) : (
-              <TimeElapsed startUnix={run.startTime / 1000} endUnix={run.endTime / 1000} />
-            )}
-          </Mono>
-        </Box>
-      ))}
+        ))}
+      </div>
     </Box>
   );
 };