fix(frontend): fix scroll behavior in test specs list (#3320)

kubeshop · Nov 1, 2023 · 4629c9a · 4629c9a
1 parent 96ff847
commit 4629c9a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/web/src/components/RunDetailTest/RunDetailTest.styled.ts b/web/src/components/RunDetailTest/RunDetailTest.styled.ts
@@ -16,10 +16,11 @@ export const SectionLeft = styled(Section)`
   z-index: 1;
 `;
 
-export const SectionRight = styled(Section)<{$shouldScroll: boolean}>`
+export const SectionRight = styled(Section)`
   background-color: ${({theme}) => theme.color.white};
   box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
-  overflow-y: ${({$shouldScroll}) => ($shouldScroll ? 'scroll' : 'hidden')};
+  overflow: hidden;
+  position: relative;
   z-index: 2;
 `;
 
@@ -32,6 +33,7 @@ export const SwitchContainer = styled.div`
 
 export const TabsContainer = styled.div`
   height: 100%;
+  overflow-y: auto;
   padding: 24px;
   position: relative;
 

diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -123,7 +123,7 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
           />
         </S.SectionLeft>
 
-        <S.SectionRight $shouldScroll={!selectedTestSpec}>
+        <S.SectionRight>
           {isTestSpecFormOpen && (
             <TestSpecForm
               onSubmit={values => {
@@ -202,19 +202,19 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
                   <TestOutputs outputs={outputs} />
                 </Tabs.TabPane>
               </Tabs>
-
-              <TestSpecDetail
-                isOpen={Boolean(selectedTestSpec)}
-                onClose={handleClose}
-                onDelete={handleDelete}
-                onEdit={handleEdit}
-                onRevert={handleRevert}
-                onSelectSpan={handleSelectSpan}
-                selectedSpan={selectedSpan?.id}
-                testSpec={selectedTestSpec}
-              />
             </S.TabsContainer>
           )}
+
+          <TestSpecDetail
+            isOpen={Boolean(selectedTestSpec)}
+            onClose={handleClose}
+            onDelete={handleDelete}
+            onEdit={handleEdit}
+            onRevert={handleRevert}
+            onSelectSpan={handleSelectSpan}
+            selectedSpan={selectedSpan?.id}
+            testSpec={selectedTestSpec}
+          />
         </S.SectionRight>
       </S.Container>
     </FillPanel>