From 3267796198e3dce275fced8ce52a77d0ff254a93 Mon Sep 17 00:00:00 2001
From: minami-minami <maminami.minami@gmail.com>
Date: Tue, 8 Nov 2022 00:11:00 +0900
Subject: [PATCH 1/4] fix(devtools): unset padding for resetting after closed

---
 packages/react-query-devtools/src/devtools.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 7d6d0fcc4e..fd4cc60e23 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -277,6 +277,8 @@ export function ReactQueryDevtools({
         return () => {
           window.removeEventListener('resize', run)
           if (root?.parentElement && typeof previousValue === 'string') {
+            // unset padding for resetting
+            root.parentElement.style.padding = ''
             root.parentElement.style[styleProp] = previousValue
           }
         }

From 959e3328615b9c36d7e1bd220b8aca73442640e2 Mon Sep 17 00:00:00 2001
From: minami-minami <maminami.minami@gmail.com>
Date: Wed, 9 Nov 2022 01:31:01 +0900
Subject: [PATCH 2/4] fix(devtools): restore inline padding styles after closed

---
 .../react-query-devtools/src/devtools.tsx     | 67 +++++++++++++------
 1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index fd4cc60e23..599d8708f6 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -247,26 +247,37 @@ export function ReactQueryDevtools({
   }, [isResolvedOpen])
 
   React.useEffect(() => {
-    if (isResolvedOpen) {
-      const root = rootRef.current
+    if (isResolvedOpen && rootRef.current?.parentElement) {
+      const { parentElement } = rootRef.current
       const styleProp = getSidedProp('padding', panelPosition)
       const isVertical = isVerticalSide(panelPosition)
-      const previousValue = root?.parentElement?.style[styleProp]
+
+      const previousPaddings = (({
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+      }) => ({
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+      }))(parentElement.style)
 
       const run = () => {
-        if (root?.parentElement) {
-          // reset the padding
-          root.parentElement.style.padding = '0px'
-          root.parentElement.style.paddingTop = '0px'
-          root.parentElement.style.paddingBottom = '0px'
-          root.parentElement.style.paddingLeft = '0px'
-          root.parentElement.style.paddingRight = '0px'
-          // set the new padding based on the new panel position
-
-          root.parentElement.style[styleProp] = `${
-            isVertical ? devtoolsWidth : devtoolsHeight
-          }px`
-        }
+        // reset the padding
+        parentElement.style.padding = '0px'
+        parentElement.style.paddingTop = '0px'
+        parentElement.style.paddingBottom = '0px'
+        parentElement.style.paddingLeft = '0px'
+        parentElement.style.paddingRight = '0px'
+        // set the new padding based on the new panel position
+
+        parentElement.style[styleProp] = `${
+          isVertical ? devtoolsWidth : devtoolsHeight
+        }px`
       }
 
       run()
@@ -276,11 +287,12 @@ export function ReactQueryDevtools({
 
         return () => {
           window.removeEventListener('resize', run)
-          if (root?.parentElement && typeof previousValue === 'string') {
-            // unset padding for resetting
-            root.parentElement.style.padding = ''
-            root.parentElement.style[styleProp] = previousValue
-          }
+          Object.entries(previousPaddings).forEach(
+            ([property, previousValue]) => {
+              parentElement.style[property as keyof typeof previousPaddings] =
+                previousValue
+            },
+          )
         }
       }
     }
@@ -378,7 +390,18 @@ export function ReactQueryDevtools({
           <Logo aria-hidden />
           <ScreenReader text="Open React Query Devtools" />
         </button>
-      ) : null}
+      ) : (
+        <style
+          nonce={styleNonce}
+          dangerouslySetInnerHTML={{
+            __html: `
+          .ReactQueryDevtoolsParent.ReactQueryDevtoolsParent {
+            padding-bottom: 100px;
+          }
+        `,
+          }}
+        />
+      )}
     </Container>
   )
 }

From da333f21752669141e2a58dab854c5adfe352ea4 Mon Sep 17 00:00:00 2001
From: minami-minami <maminami.minami@gmail.com>
Date: Wed, 9 Nov 2022 01:50:01 +0900
Subject: [PATCH 3/4] fix(devtools): undo unnecessary style tag

---
 packages/react-query-devtools/src/devtools.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 599d8708f6..2172170322 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -390,18 +390,7 @@ export function ReactQueryDevtools({
           <Logo aria-hidden />
           <ScreenReader text="Open React Query Devtools" />
         </button>
-      ) : (
-        <style
-          nonce={styleNonce}
-          dangerouslySetInnerHTML={{
-            __html: `
-          .ReactQueryDevtoolsParent.ReactQueryDevtoolsParent {
-            padding-bottom: 100px;
-          }
-        `,
-          }}
-        />
-      )}
+      ) : null}
     </Container>
   )
 }

From 60ecf3837d141cea9240de038fc1c57caaa7a37b Mon Sep 17 00:00:00 2001
From: minami-minami <maminami.minami@gmail.com>
Date: Sat, 12 Nov 2022 01:46:16 +0900
Subject: [PATCH 4/4] fix(devtools): add test

---
 .../src/__tests__/devtools.test.tsx           | 54 ++++++++++++++++++-
 .../src/__tests__/utils.tsx                   |  4 +-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx
index 543ffb4c59..be0150f3b3 100644
--- a/packages/react-query-devtools/src/__tests__/devtools.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/devtools.test.tsx
@@ -4,7 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 import '@testing-library/jest-dom'
 import type { QueryClient } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
-import { sortFns } from '../utils'
+import { defaultPanelSize, sortFns } from '../utils'
 import {
   getByTextContent,
   renderWithClient,
@@ -36,6 +36,7 @@ Object.defineProperty(window, 'matchMedia', {
 describe('ReactQueryDevtools', () => {
   beforeEach(() => {
     localStorage.removeItem('reactQueryDevtoolsOpen')
+    localStorage.removeItem('reactQueryDevtoolsPanelPosition')
   })
   it('should be able to open and close devtools', async () => {
     const { queryClient } = createQueryClient()
@@ -863,4 +864,55 @@ describe('ReactQueryDevtools', () => {
     expect(panel.style.width).toBe('500px')
     expect(panel.style.height).toBe('100vh')
   })
+
+  it('should restore parent element padding after closing', async () => {
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => 'test')
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    const parentElementTestid = 'parentElement'
+    const parentPaddings = {
+      paddingTop: '428px',
+      paddingBottom: '39px',
+      paddingLeft: '-373px',
+      paddingRight: '20%',
+    }
+
+    function Parent({ children }: { children: React.ReactElement }) {
+      return (
+        <div data-testid={parentElementTestid} style={parentPaddings}>
+          {children}
+        </div>
+      )
+    }
+
+    renderWithClient(
+      queryClient,
+      <Page />,
+      {
+        initialIsOpen: true,
+        panelPosition: 'bottom',
+      },
+      { wrapper: Parent },
+    )
+
+    const parentElement = screen.getByTestId(parentElementTestid)
+    expect(parentElement).toHaveStyle({
+      paddingTop: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+      paddingBottom: defaultPanelSize,
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
+    expect(parentElement).toHaveStyle(parentPaddings)
+  })
 })
diff --git a/packages/react-query-devtools/src/__tests__/utils.tsx b/packages/react-query-devtools/src/__tests__/utils.tsx
index e5ea0e83e6..197b782afd 100644
--- a/packages/react-query-devtools/src/__tests__/utils.tsx
+++ b/packages/react-query-devtools/src/__tests__/utils.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, type RenderOptions } from '@testing-library/react'
 import * as React from 'react'
 import { ReactQueryDevtools } from '../devtools'
 
@@ -12,12 +12,14 @@ export function renderWithClient(
   client: QueryClient,
   ui: React.ReactElement,
   devtoolsOptions: Parameters<typeof ReactQueryDevtools>[number] = {},
+  renderOptions?: RenderOptions,
 ): ReturnType<typeof render> {
   const { rerender, ...result } = render(
     <QueryClientProvider client={client} context={devtoolsOptions.context}>
       <ReactQueryDevtools {...devtoolsOptions} />
       {ui}
     </QueryClientProvider>,
+    renderOptions,
   )
   return {
     ...result,