fix(ui): Fix workflow summary page unscrollable issue (#5743)

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>
argoproj · May 14, 2021 · 06744da · 06744da
1 parent d3ed51e
commit 06744da
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 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
@@ -156,18 +156,20 @@ export class ArchivedWorkflowDetails extends BasePage<RouteComponentProps<any>,
         return (
             <>
                 {this.tab === 'summary' ? (
-                    <div className='argo-container'>
-                        <div className='workflow-details__content'>
-                            <WorkflowSummaryPanel workflow={this.state.workflow} />
-                            {execSpec(this.state.workflow).arguments && execSpec(this.state.workflow).arguments.parameters && (
-                                <React.Fragment>
-                                    <h6>Parameters</h6>
-                                    <WorkflowParametersPanel parameters={execSpec(this.state.workflow).arguments.parameters} />
-                                </React.Fragment>
-                            )}
-                            <h6>Artifacts</h6>
-                            <WorkflowArtifacts workflow={this.state.workflow} archived={true} />
-                            <WorkflowResourcePanel workflow={this.state.workflow} />
+                    <div className='workflow-details__container'>
+                        <div className='argo-container'>
+                            <div className='workflow-details__content'>
+                                <WorkflowSummaryPanel workflow={this.state.workflow} />
+                                {execSpec(this.state.workflow).arguments && execSpec(this.state.workflow).arguments.parameters && (
+                                    <React.Fragment>
+                                        <h6>Parameters</h6>
+                                        <WorkflowParametersPanel parameters={execSpec(this.state.workflow).arguments.parameters} />
+                                    </React.Fragment>
+                                )}
+                                <h6>Artifacts</h6>
+                                <WorkflowArtifacts workflow={this.state.workflow} archived={true} />
+                                <WorkflowResourcePanel workflow={this.state.workflow} />
+                            </div>
                         </div>
                     </div>
                 ) : (

diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.scss b/ui/src/app/workflows/components/workflow-details/workflow-details.scss
@@ -37,6 +37,12 @@
     }
   }
 
+  &__container {
+    height: calc(100vh - 2 * #{$top-bar-height});
+    max-width: 100%;
+    overflow: auto;
+  }
+
   &__graph-container {
     position: relative;
     height: calc(100vh - 2 * #{$top-bar-height});

diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -162,20 +162,22 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                 {!workflow ? (
                     <Loading />
                 ) : (
-                    <div className='argo-container'>
-                        <div className='workflow-details__content'>
-                            <WorkflowSummaryPanel workflow={workflow} />
-                            {renderSecurityNudge()}
-                            {renderCostOptimisations()}
-                            {workflow.spec.arguments && workflow.spec.arguments.parameters && (
-                                <React.Fragment>
-                                    <h6>Parameters</h6>
-                                    <WorkflowParametersPanel parameters={workflow.spec.arguments.parameters} />
-                                </React.Fragment>
-                            )}
-                            <h5>Artifacts</h5>
-                            <WorkflowArtifacts workflow={workflow} archived={false} />
-                            <WorkflowResourcePanel workflow={workflow} />
+                    <div className='workflow-details__container'>
+                        <div className='argo-container'>
+                            <div className='workflow-details__content'>
+                                <WorkflowSummaryPanel workflow={workflow} />
+                                {renderSecurityNudge()}
+                                {renderCostOptimisations()}
+                                {workflow.spec.arguments && workflow.spec.arguments.parameters && (
+                                    <React.Fragment>
+                                        <h6>Parameters</h6>
+                                        <WorkflowParametersPanel parameters={workflow.spec.arguments.parameters} />
+                                    </React.Fragment>
+                                )}
+                                <h5>Artifacts</h5>
+                                <WorkflowArtifacts workflow={workflow} archived={false} />
+                                <WorkflowResourcePanel workflow={workflow} />
+                            </div>
                         </div>
                     </div>
                 )}