fix: Incorrect alignment for archived workflow. Fixes #9433 (#9439)

Signed-off-by: Yuan Tang <terrytangyuan@gmail.com> Signed-off-by: Yuan Tang <terrytangyuan@gmail.com>
argoproj · Aug 25, 2022 · a09172a · a09172a
1 parent 242e5bc
commit a09172a
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/...app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx b/...app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx
@@ -24,6 +24,8 @@ import {WorkflowYamlViewer} from '../../../workflows/components/workflow-yaml-vi
 
 require('../../../workflows/components/workflow-details/workflow-details.scss');
 
+const STEP_GRAPH_CONTAINER_MIN_WIDTH = 490;
+
 interface State {
     workflow?: Workflow;
     links?: Link[];
@@ -187,7 +189,7 @@ export class ArchivedWorkflowDetails extends BasePage<RouteComponentProps<any>,
                     </div>
                 ) : (
                     <div>
-                        <div className='workflow-details__graph-container'>
+                        <div className='workflow-details__graph-container-wrapper' style={{minWidth: STEP_GRAPH_CONTAINER_MIN_WIDTH, width: '100%'}}>
                             {this.tab === 'workflow' ? (
                                 <WorkflowPanel
                                     workflowMetadata={this.state.workflow.metadata}
@@ -200,7 +202,7 @@ export class ArchivedWorkflowDetails extends BasePage<RouteComponentProps<any>,
                             )}
                         </div>
                         {this.nodeId && (
-                            <div className='workflow-details__step-info'>
+                            <div className='workflow-details__step-info' style={{minWidth: STEP_GRAPH_CONTAINER_MIN_WIDTH, float: 'right'}}>
                                 <button className='workflow-details__step-info-close' onClick={() => (this.nodeId = null)}>
                                     <i className='argo-icon-close' />
                                 </button>