fix: Fix devtools z-indices

The button needs to be above the sessions page panel. And the others are actually unnecessary now that we introduce scrollbars to the main canvas instead of overlaying it. Signed-off-by: George Thomas <[email protected]>
hackworthltd · Aug 16, 2023 · aac4a7b · aac4a7b
1 parent 7f0301b
commit aac4a7b
Showing 1 changed file with 2 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -73,7 +73,7 @@ const App = (): JSX.Element => {
           {enableDevtools && (
             <Suspense fallback={null}>
               <button
-                className="absolute right-0 z-20 p-4"
+                className="absolute right-0 z-50 p-4"
                 onClick={() => setDevtoolsOpen((old) => !old)}
               >
                 <WrenchScrewdriverIcon className="h-10 fill-grey-primary"></WrenchScrewdriverIcon>
@@ -82,12 +82,11 @@ const App = (): JSX.Element => {
                 <Resizable
                   enable={{ bottom: true }}
                   defaultSize={{ height: devToolsMinHeight, width: "100%" }}
-                  className="fixed z-10 grid grid-cols-[minmax(0,2fr)_1fr]"
+                  className="fixed grid grid-cols-[minmax(0,2fr)_1fr]"
                   minHeight={devToolsMinHeight}
                   maxHeight={devToolsMaxHeight}
                 >
                   <ReactQueryDevtoolsPanel
-                    className="z-20"
                     style={{ height: "inherit", maxHeight: devToolsMaxHeight }}
                     setIsOpen={setDevtoolsOpen}
                     onDragStart={(_) => {}}