From 4629c9aa5fcd653ab65da897dbf7e3eb9e65db85 Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Tue, 31 Oct 2023 19:08:40 -0500
Subject: [PATCH] fix(frontend): fix scroll behavior in test specs list (#3320)

---
 .../RunDetailTest/RunDetailTest.styled.ts     |  6 +++--
 .../components/RunDetailTest/TestPanel.tsx    | 24 +++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/src/components/RunDetailTest/RunDetailTest.styled.ts b/web/src/components/RunDetailTest/RunDetailTest.styled.ts
index 89358c96af..d0301af8ab 100644
--- 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
index c8ca511aff..663fbd6c1f 100644
--- 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>