fix: [M3-8937] - Content shifting on Linode Details summary graphs (#11301)

* fix styles

* fix more

* clean up

* changeset

* fix graph component regression

* fix breakpoint issues

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

Author: bnussman-akamai

packages/manager/.changeset/pr-11301-fixed-1732202951516.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Content shifting on Linode Details summary graphs ([#11301](https://github.com/linode/manager/pull/11301))

packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts

@@ -272,7 +272,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -326,7 +326,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -397,7 +397,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
             .click();
           cy.get('@widget').should('be.visible');
 
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -429,7 +429,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
             .scrollIntoView()
             .click({ force: true });
           cy.get('@widget').should('be.visible');
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,

packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts

@@ -238,7 +238,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -295,7 +295,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -368,7 +368,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
             .should('be.enabled')
             .click();
           cy.get('@widget').should('be.visible');
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -401,7 +401,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
             .click({ force: true });
           cy.get('@widget').should('be.visible');
 
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -254,7 +254,7 @@ export const AreaChart = (props: AreaChartProps) => {
   };
 
   return (
-    <Box data-testid="areachart-wrapper">
+    <>
       <ResponsiveContainer height={height} width={width}>
         <_AreaChart aria-label={ariaLabel} data={data} margin={margin}>
           <CartesianGrid
@@ -333,7 +333,7 @@ export const AreaChart = (props: AreaChartProps) => {
         timezone={timezone}
         unit={unit}
       />
-    </Box>
+    </>
   );
 };
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.test.tsx

@@ -7,16 +7,13 @@ import LinodeSummary from './LinodeSummary';
 
 describe('LinodeSummary', () => {
   it('should have a select menu for the graphs', () => {
-    const { getByText } = renderWithTheme(
+    const { getByDisplayValue } = renderWithTheme(
       <MemoryRouter initialEntries={['linode/1']}>
         <Route path="linode/:linodeId">
-          <LinodeSummary
-            isBareMetalInstance={false}
-            linodeCreated="2018-11-01T00:00:00"
-          />
+          <LinodeSummary linodeCreated="2018-11-01T00:00:00" />
         </Route>
       </MemoryRouter>
     );
-    expect(getByText('Last 24 Hours')).toBeInTheDocument();
+    expect(getByDisplayValue('Last 24 Hours')).toBeInTheDocument();
   });
 });