batches: fix timeline modal overflow (#36966)

* Fix workspace duration wrapping

* Define modal padding as a CSS variable

* Enforce max height, enable overflow scrolling on timeline modal content

* Fix missing width

client/web/src/enterprise/batches/batch-spec/execute/TimelineModal.module.scss

@@ -1,3 +1,25 @@
 .modal-body {
     width: 60vw;
+    max-height: calc(100vh - 4rem);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    padding: var(--modal-body-padding) var(--modal-body-padding) 0.5rem var(--modal-body-padding);
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.modal-content {
+    overflow: auto;
+    flex: 1;
+    padding: 0 var(--modal-body-padding) var(--modal-body-padding) var(--modal-body-padding);
+    width: 100%;
+}
+
+.timeline-margin {
+    margin-left: -0.5rem;
 }

client/web/src/enterprise/batches/batch-spec/execute/TimelineModal.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 
 import VisuallyHidden from '@reach/visually-hidden'
+import classNames from 'classnames'
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckIcon from 'mdi-react/CheckIcon'
 import CloseIcon from 'mdi-react/CloseIcon'
@@ -26,21 +27,23 @@ export const TimelineModal: React.FunctionComponent<React.PropsWithChildren<Time
     node,
     onCancel,
 }) => (
-    <Modal className={styles.modalBody} onDismiss={onCancel} aria-label="Execution timeline">
-        <div className="d-flex justify-content-between">
+    <Modal className={styles.modalBody} position="center" onDismiss={onCancel} aria-label="Execution timeline">
+        <div className={styles.modalHeader}>
             <H3 className="mb-0">Execution timeline</H3>
             <Button className="p-0 ml-2" onClick={onCancel} variant="icon">
                 <VisuallyHidden>Close</VisuallyHidden>
                 <Icon aria-hidden={true} as={CloseIcon} />
             </Button>
         </div>
-        <ExecutionTimeline node={node} />
-        {node.executor && (
-            <>
-                <H4 className="mt-2">Executor</H4>
-                <ExecutorNode node={node.executor} />
-            </>
-        )}
+        <div className={styles.modalContent}>
+            <ExecutionTimeline node={node} />
+            {node.executor && (
+                <>
+                    <H4 className="mt-2">Executor</H4>
+                    <ExecutorNode node={node.executor} />
+                </>
+            )}
+        </div>
     </Modal>
 )
 
@@ -81,7 +84,13 @@ const ExecutionTimeline: React.FunctionComponent<React.PropsWithChildren<Executi
         ],
         [expandStage, node, now]
     )
-    return <Timeline stages={stages.filter(isDefined)} now={now} className={className} />
+    return (
+        <Timeline
+            stages={stages.filter(isDefined)}
+            now={now}
+            className={classNames(className, styles.timelineMargin)}
+        />
+    )
 }
 
 const setupStage = (

client/web/src/enterprise/batches/batch-spec/execute/workspaces/WorkspaceDetails.module.scss

@@ -10,6 +10,7 @@
     padding: 0 0.375rem;
     margin: 0;
     line-height: 1.5rem;
+    flex-shrink: 0;
 
     &:not(button) {
         color: var(--text-muted);

client/web/src/enterprise/batches/batch-spec/execute/workspaces/WorkspaceDetails.tsx

@@ -162,9 +162,9 @@ const WorkspaceHeader: React.FunctionComponent<React.PropsWithChildren<Workspace
                 </span>
             )}
             {workspace.startedAt && (
-                <span className={styles.workspaceDetail}>
-                    Total time:{' '}
-                    <strong>
+                <span className={classNames(styles.workspaceDetail, 'd-flex align-items-center')}>
+                    Total time:
+                    <strong className="pl-1">
                         <Duration start={workspace.startedAt} end={workspace.finishedAt ?? undefined} />
                     </strong>
                 </span>

client/wildcard/src/components/Modal/Modal.module.scss

@@ -1,5 +1,9 @@
 @import '@reach/dialog/styles.css';
 
+:root {
+    --modal-body-padding: 1.5rem;
+}
+
 [data-reach-dialog-overlay] {
     background-color: var(--modal-bg);
 }
@@ -12,7 +16,7 @@
     background-color: var(--color-bg-1);
     width: 32rem;
     max-width: 100vw;
-    padding: 1.5rem;
+    padding: var(--modal-body-padding);
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
 }