From 7c52a913f929c62fff8e028e72349da34af0fc83 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Thu, 14 May 2026 01:48:29 +0900
Subject: [PATCH 1/2] test(query-devtools/Devtools): add test for clamping the
 width when resizing below min width

---
 .../src/__tests__/Devtools.test.tsx           | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx
index f0b3d58e68..08a2019ba8 100644
--- a/packages/query-devtools/src/__tests__/Devtools.test.tsx
+++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx
@@ -1110,6 +1110,60 @@ describe('Devtools', () => {
       ).toBeGreaterThan(initialWidth)
     })
 
+    it('should clamp the width to the minimum when dragging shrinks the panel below the minimum width', () => {
+      const initialWidth = 200
+      const rendered = renderDevtools(
+        { position: 'left', initialIsOpen: true },
+        { 'TanstackQueryDevtools.width': String(initialWidth) },
+      )
+
+      const handle = rendered.getByLabelText('Resize devtools panel')
+      const panel = handle.parentElement
+      expect(panel).toBeInstanceOf(HTMLElement)
+      // `width` is read twice during drag: once as the base size, and again
+      // after the clamp to detect when the panel has hit its minimum. The
+      // first call returns `initialWidth`; the second returns `0` so the
+      // `localStore.width < newWidth` restore branch stays inactive and only
+      // the `newSize < minWidth` clamp is observed.
+      const getBoundingClientRect = vi
+        .spyOn(panel!, 'getBoundingClientRect')
+        .mockReturnValueOnce({
+          height: 0,
+          width: initialWidth,
+          x: 0,
+          y: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          toJSON: () => ({}),
+        })
+      getBoundingClientRect.mockReturnValue({
+        height: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        toJSON: () => ({}),
+      })
+
+      // In `left` position, dragging the cursor left (`clientX` 100 → 0)
+      // shrinks the panel by 100px, which lands well under the 192px minimum.
+      fireEvent.mouseDown(handle, { clientX: 100, clientY: 0 })
+      fireEvent(
+        document,
+        new MouseEvent('mousemove', { clientX: 0, clientY: 0 }),
+      )
+      fireEvent(document, new MouseEvent('mouseup'))
+
+      expect(
+        Number(localStorage.getItem('TanstackQueryDevtools.width')),
+      ).toBe(192)
+    })
+
     it('should close the query details panel when dragging shrinks the panel below the minimum height', () => {
       queryClient.setQueryData(['shrink-below-min-height'], [{ id: 1 }])
       const rendered = renderDevtools({

From 57129cfef336b72008008280e0dad39d91402d3c Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 13 May 2026 16:50:06 +0000
Subject: [PATCH 2/2] ci: apply automated fixes

---
 packages/query-devtools/src/__tests__/Devtools.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx
index 08a2019ba8..3ae1b72865 100644
--- a/packages/query-devtools/src/__tests__/Devtools.test.tsx
+++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx
@@ -1159,9 +1159,9 @@ describe('Devtools', () => {
       )
       fireEvent(document, new MouseEvent('mouseup'))
 
-      expect(
-        Number(localStorage.getItem('TanstackQueryDevtools.width')),
-      ).toBe(192)
+      expect(Number(localStorage.getItem('TanstackQueryDevtools.width'))).toBe(
+        192,
+      )
     })
 
     it('should close the query details panel when dragging shrinks the panel below the minimum height', () => {