From 9d8737e60136b84f5461e0a2b86fe779b8002d5c Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Fri, 24 Nov 2023 12:42:52 -0500
Subject: [PATCH] fix(frontend): fix test specs container and attribute tooltip
 (#3401)

---
 web/src/components/ResizablePanels/Splitter.tsx          | 9 ++++++++-
 web/src/components/RunDetailTest/RunDetailTest.styled.ts | 5 +++++
 .../components/TestOutputForm/TestOutputForm.styled.ts   | 3 +++
 web/src/components/TestSpecForm/TestSpecForm.styled.ts   | 3 +++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/components/ResizablePanels/Splitter.tsx b/web/src/components/ResizablePanels/Splitter.tsx
index 8d09721ff3..1da1a3793b 100644
--- a/web/src/components/ResizablePanels/Splitter.tsx
+++ b/web/src/components/ResizablePanels/Splitter.tsx
@@ -49,7 +49,14 @@ const Splitter = ({
     <S.SplitterContainer id={id} key={id} className={className} onMouseDown={onMouseDown} onTouchStart={onTouchStart}>
       <S.ButtonContainer>
         {isToolTipVisible ? (
-          <Tooltip title={tooltip} visible trigger={[]} placement={tooltipPlacement} overlayClassName="splitter">
+          <Tooltip
+            title={tooltip}
+            visible
+            trigger={[]}
+            placement={tooltipPlacement}
+            overlayClassName="splitter"
+            getPopupContainer={node => node.parentElement ?? document.body}
+          >
             {button}
           </Tooltip>
         ) : (
diff --git a/web/src/components/RunDetailTest/RunDetailTest.styled.ts b/web/src/components/RunDetailTest/RunDetailTest.styled.ts
index d0301af8ab..ab24bd53fd 100644
--- a/web/src/components/RunDetailTest/RunDetailTest.styled.ts
+++ b/web/src/components/RunDetailTest/RunDetailTest.styled.ts
@@ -40,6 +40,11 @@ export const TabsContainer = styled.div`
   .ant-tabs-small > .ant-tabs-nav .ant-tabs-tab {
     padding: 0 0 8px;
   }
+
+  .ant-tabs,
+  .ant-tabs .ant-tabs-content {
+    height: 100%;
+  }
 `;
 
 export const CountBadge = styled(Badge)`
diff --git a/web/src/components/TestOutputForm/TestOutputForm.styled.ts b/web/src/components/TestOutputForm/TestOutputForm.styled.ts
index cc78011c46..c393e9dcd4 100644
--- a/web/src/components/TestOutputForm/TestOutputForm.styled.ts
+++ b/web/src/components/TestOutputForm/TestOutputForm.styled.ts
@@ -4,7 +4,10 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   background-color: ${({theme}) => theme.color.white};
+  height: 100%;
+  overflow-y: auto;
   padding: 24px;
+  position: relative;
 `;
 
 export const Title = styled(Typography.Title).attrs({level: 2})`
diff --git a/web/src/components/TestSpecForm/TestSpecForm.styled.ts b/web/src/components/TestSpecForm/TestSpecForm.styled.ts
index 632ba03ef3..412acfd8f6 100644
--- a/web/src/components/TestSpecForm/TestSpecForm.styled.ts
+++ b/web/src/components/TestSpecForm/TestSpecForm.styled.ts
@@ -55,7 +55,10 @@ export const DeleteCheckIcon = styled(DeleteOutlined)`
 
 export const AssertionForm = styled.div`
   background-color: ${({theme}) => theme.color.white};
+  height: 100%;
+  overflow-y: auto;
   padding: 24px;
+  position: relative;
 `;
 
 export const AssertionFormTitle = styled(Typography.Title).attrs({level: 2})``;