From a0ae49a92bf5fb41fcb54f0510deab45e90c0fac Mon Sep 17 00:00:00 2001
From: Yuan Tang <terrytangyuan@gmail.com>
Date: Thu, 25 Aug 2022 11:00:14 -0400
Subject: [PATCH] fix: Incorrect alignment for archived workflow. Fixes #9433

Signed-off-by: Yuan Tang <terrytangyuan@gmail.com>
---
 .../archived-workflow-details/archived-workflow-details.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx b/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx
index 07cdcaa5ac52..52577a893e88 100644
--- a/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx
+++ b/ui/src/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>