fix(frontend): fix test specs container and attribute tooltip (#3401)

kubeshop · Nov 24, 2023 · 9d8737e · 9d8737e
1 parent e9114f2
commit 9d8737e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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})``;