From e6eb02fb529b7952227dcef091853edcf20f8248 Mon Sep 17 00:00:00 2001
From: Dakota Lillie <dakota.lillie@icloud.com>
Date: Thu, 22 Sep 2022 17:47:47 -0400
Subject: [PATCH] fix: broken archived workflows ui. Fixes #9614, #9433 (#9634)

fix: broken archived workflows ui

Signed-off-by: Dakota Lillie <dakota.lillie@icloud.com>

Signed-off-by: Dakota Lillie <dakota.lillie@icloud.com>
---
 .../archived-workflow-details.tsx                          | 7 ++++---
 1 file changed, 4 insertions(+), 3 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 52577a893e88..c776b845daea 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
@@ -25,6 +25,7 @@ import {WorkflowYamlViewer} from '../../../workflows/components/workflow-yaml-vi
 require('../../../workflows/components/workflow-details/workflow-details.scss');
 
 const STEP_GRAPH_CONTAINER_MIN_WIDTH = 490;
+const STEP_INFO_WIDTH = 570;
 
 interface State {
     workflow?: Workflow;
@@ -188,8 +189,8 @@ export class ArchivedWorkflowDetails extends BasePage<RouteComponentProps<any>,
                         </div>
                     </div>
                 ) : (
-                    <div>
-                        <div className='workflow-details__graph-container-wrapper' style={{minWidth: STEP_GRAPH_CONTAINER_MIN_WIDTH, width: '100%'}}>
+                    <div className='workflow-details__graph-container-wrapper'>
+                        <div className='workflow-details__graph-container' style={{minWidth: STEP_GRAPH_CONTAINER_MIN_WIDTH, width: '100%'}}>
                             {this.tab === 'workflow' ? (
                                 <WorkflowPanel
                                     workflowMetadata={this.state.workflow.metadata}
@@ -202,7 +203,7 @@ export class ArchivedWorkflowDetails extends BasePage<RouteComponentProps<any>,
                             )}
                         </div>
                         {this.nodeId && (
-                            <div className='workflow-details__step-info' style={{minWidth: STEP_GRAPH_CONTAINER_MIN_WIDTH, float: 'right'}}>
+                            <div className='workflow-details__step-info' style={{width: STEP_INFO_WIDTH, float: 'right'}}>
                                 <button className='workflow-details__step-info-close' onClick={() => (this.nodeId = null)}>
                                     <i className='argo-icon-close' />
                                 </button>