From bfd341a79d804d3e7540a4ca63c252deb76b6a72 Mon Sep 17 00:00:00 2001
From: Hitesh Aringa <hitesh.aringa@harness.io>
Date: Wed, 20 Sep 2023 20:52:52 +0000
Subject: [PATCH] Improve Split panel resize and better long log lines wrapping
 (#589)

---
 web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx  | 2 +-
 web/src/pages/PullRequest/Checks/Checks.module.scss      | 6 ++++++
 web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts | 1 +
 web/src/pages/PullRequest/Checks/Checks.tsx              | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx b/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx
index b74af002c..880167386 100644
--- a/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx
+++ b/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx
@@ -145,7 +145,7 @@ const CheckPipelineStep: React.FC<CheckPipelineStepsProps & { step: TypesStep }>
   useShowRequestError(error, 0)
 
   return (
-    <Container key={step.number}>
+    <Container key={step.number} className={css.stepContainer}>
       <Layout.Horizontal
         spacing="small"
         className={cx(css.stepHeader, { [css.expanded]: expanded, [css.selected]: expanded })}
diff --git a/web/src/pages/PullRequest/Checks/Checks.module.scss b/web/src/pages/PullRequest/Checks/Checks.module.scss
index 8d3e86963..458b39eef 100644
--- a/web/src/pages/PullRequest/Checks/Checks.module.scss
+++ b/web/src/pages/PullRequest/Checks/Checks.module.scss
@@ -206,6 +206,12 @@
     z-index: 1;
   }
 
+  .stepContainer {
+    display: flex;
+    flex-direction: column;
+    word-break: break-all;
+  }
+
   .stepHeader {
     display: flex;
     align-items: center;
diff --git a/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts b/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts
index 0279ae092..f9dd0446c 100644
--- a/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts
+++ b/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts
@@ -24,6 +24,7 @@ export declare const pipelineSteps: string
 export declare const selected: string
 export declare const spinner: string
 export declare const status: string
+export declare const stepContainer: string
 export declare const stepHeader: string
 export declare const stepLogContainer: string
 export declare const subMenu: string
diff --git a/web/src/pages/PullRequest/Checks/Checks.tsx b/web/src/pages/PullRequest/Checks/Checks.tsx
index 8fbf8a42d..da2cfc6c9 100644
--- a/web/src/pages/PullRequest/Checks/Checks.tsx
+++ b/web/src/pages/PullRequest/Checks/Checks.tsx
@@ -52,7 +52,7 @@ export const Checks: React.FC<ChecksProps> = ({ repoMetadata, pullRequestMetadat
     <Container className={css.main}>
       <Match expr={prChecksDecisionResult?.overallStatus}>
         <Truthy>
-          <Split split="vertical" size={'calc(100% - 400px)'} minSize={600} maxSize={1200} primary="second">
+          <Split split="vertical" size={400} minSize={300} maxSize={700} primary="first">
             <ChecksMenu
               repoMetadata={repoMetadata}
               pullRequestMetadata={pullRequestMetadata}