Improve Split panel resize and better long log lines wrapping (#589)

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 })}

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;

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

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}