Browse Source

fix(starfish): Snippet overflow should cause scroll (#60118)

Snippet overflow should cause scroll, it was changing the
size of the container when switching between tabs.
Shruthi 1 year ago
parent
commit
825ff16264
1 changed files with 12 additions and 5 deletions
  1. 12 5
      static/app/views/starfish/views/screens/index.tsx

+ 12 - 5
static/app/views/starfish/views/screens/index.tsx

@@ -294,12 +294,14 @@ export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
             />
           </ChartsContainerItem>
 
-          <ChartsContainerItem key="ttfd">
-            {defined(hasTTFD) && !hasTTFD && yAxes[1] === YAxis.TTFD ? (
+          {defined(hasTTFD) && !hasTTFD && yAxes[1] === YAxis.TTFD ? (
+            <ChartsContainerWithHiddenOverflow>
               <ChartPanel title={CHART_TITLES[yAxes[1]]}>
                 <TabbedCodeSnippet tabs={SETUP_CONTENT} />
               </ChartPanel>
-            ) : (
+            </ChartsContainerWithHiddenOverflow>
+          ) : (
+            <ChartsContainerItem key="ttfd">
               <ScreensBarChart
                 chartOptions={[
                   {
@@ -324,8 +326,8 @@ export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
                 isLoading={isReleaseEventsLoading}
                 chartKey="screensChart1"
               />
-            )}
-          </ChartsContainerItem>
+            </ChartsContainerItem>
+          )}
         </Fragment>
       </ChartsContainer>
       <StyledSearchBar
@@ -380,6 +382,11 @@ const ChartsContainer = styled('div')`
   gap: ${space(2)};
 `;
 
+const ChartsContainerWithHiddenOverflow = styled('div')`
+  flex: 1;
+  overflow: hidden;
+`;
+
 const ChartsContainerItem = styled('div')`
   flex: 1;
 `;