From ad87040128075f1da75b9d6b035832b04d80bc9f Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 21 Jun 2024 14:22:41 +0200
Subject: [PATCH] Customize react-query devtools styles

---
 src/App.tsx   | 8 ++++++--
 src/index.css | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4867c57..94a6831 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,7 @@ const MyLayout = (props: any) => (
         "& .RaHeader-toolbar > *": {
           flexBasis: "33.33%",
           // FIXME: This should be fixed in ra-navigation
-          alignItems: "center",
+          // alignItems: "center",
           justifyContent: "center",
         },
         "& .RaHeader-toolbar > *:first-of-type": {
@@ -49,7 +49,11 @@ const MyLayout = (props: any) => (
         },
       }}
     />
-    <ReactQueryDevtools initialIsOpen={false} />
+    <ReactQueryDevtools
+      initialIsOpen={false}
+      // To avoid collision with the ConnectionWatcher notifications
+      buttonPosition="bottom-left"
+    />
     <ConnectionWatcher />
   </>
 );
diff --git a/src/index.css b/src/index.css
index 6092539..6ed8477 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,12 @@
 body {
   margin: 0;
+}
+
+/* 
+Because the style prop no longer exist in TanStack Query v5,
+we have to use this rule to customize ReactQueryDevtools button size:
+*/
+.tsqd-transitions-container>div {
+  height: 30px;
+  width: 30px;
 }
\ No newline at end of file