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>
argoproj · Sep 22, 2022 · e6eb02f · e6eb02f
1 parent 9afdea9
commit e6eb02f
Showing 1 changed file with 4 additions and 3 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
@@ -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>