fix: add full height to FrameCodeBlock

web/src/components/CodeBlock/CodeBlock.styled.ts

@@ -1,12 +1,12 @@
 import {Button, Typography} from 'antd';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 
-export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}>`
+export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string; $isFullHeight?: boolean}>`
   position: relative;
-  border: ${({theme}) => `1px solid ${theme.color.border}`};
   min-height: ${({$minHeight}) => $minHeight || '370px'};
 
   pre {
+    border: ${({theme}) => `1px solid ${theme.color.border}`};
     margin: 0;
     padding: 13px 16px !important;
     min-height: inherit;
@@ -17,9 +17,26 @@ export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}
       background: ${({theme}) => theme.color.backgroundInteractive} !important;
     }
   }
+
+  ${({$isFullHeight}) =>
+    $isFullHeight &&
+    css`
+      height: calc(100% - 49px);
+
+      pre {
+        max-height: 100%;
+      }
+    `}
+`;
+
+export const FrameContainer = styled.div<{$isFullHeight?: boolean}>`
+  ${({$isFullHeight}) =>
+    $isFullHeight &&
+    css`
+      height: calc(100% - 72px);
+    `}
 `;
 
-export const FrameContainer = styled.div``;
 export const FrameHeader = styled.div`
   display: flex;
   justify-content: space-between;

web/src/components/CodeBlock/CodeBlock.tsx

@@ -10,6 +10,7 @@ export interface IProps {
   mimeType?: string;
   maxHeight?: string;
   minHeight?: string;
+  isFullHeight?: boolean;
 }
 
 const getLanguage = (mimeType: string): LanguageName | undefined => {
@@ -32,7 +33,7 @@ const formatValue = (value: string, lang?: string): string => {
   }
 };
 
-const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight = ''}: IProps) => {
+const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight = '', isFullHeight}: IProps) => {
   const lang = useMemo(() => language || getLanguage(mimeType), [language, mimeType]);
 
   // SyntaxHighlighter has a performance problem, so we need to memoize it
@@ -47,7 +48,7 @@ const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight =
   );
 
   return (
-    <S.CodeContainer data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight}>
+    <S.CodeContainer data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight} $isFullHeight={isFullHeight}>
       {memoizedHighlighter}
     </S.CodeContainer>
   );

web/src/components/CodeBlock/FramedCodeBlock.tsx

@@ -11,7 +11,7 @@ const FramedCodeBlock = ({title, actions, ...props}: IProps) => {
   const copy = useCopy();
 
   return (
-    <S.FrameContainer>
+    <S.FrameContainer $isFullHeight={props.isFullHeight}>
       <S.FrameHeader>
         <S.FrameTitle>{title}</S.FrameTitle>
         <S.ActionsContainer>

web/src/components/RunDetailAutomate/RunDetailAutomate.styled.ts

@@ -11,7 +11,6 @@ export const Section = styled.div`
   background-color: ${({theme}) => theme.color.white};
   overflow-y: scroll;
   flex-basis: 50%;
-  max-width: 50vw;
 `;
 
 export const SectionLeft = styled(Section)`

web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts

@@ -2,6 +2,7 @@ import {Typography} from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100%;
   padding: 24px;
 `;
 
@@ -12,12 +13,6 @@ export const Title = styled(Typography.Title)`
   }
 `;
 
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-`;
-
 export const FileName = styled.div`
   margin-bottom: 14px;
 `;

web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx

@@ -33,12 +33,18 @@ const RunDetailAutomateDefinition = ({id, version, resourceType, fileName, onFil
       <S.FileName>
         <Overlay value={fileName} onChange={onFileNameChange} />
       </S.FileName>
-      <FramedCodeBlock title="Preview your YAML file" value={definition} language="yaml" />
-      <S.Footer>
-        <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">
-          Download File
-        </Button>
-      </S.Footer>
+
+      <FramedCodeBlock
+        title="Preview your YAML file"
+        value={definition}
+        language="yaml"
+        actions={
+          <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">
+            Download File
+          </Button>
+        }
+        isFullHeight
+      />
     </S.Container>
   );
 };

web/src/components/RunDetailLayout/RunDetailLayout.styled.ts

@@ -9,7 +9,7 @@ export const BackIcon = styled(LeftOutlined)`
 `;
 
 export const Container = styled.div`
-  height: 100vh;
+  height: 100%;
 
   .run-tabs.ant-tabs,
   .run-tabs.ant-tabs .ant-tabs-content {