From 04566064ed3f33ea07087f5029201053b8a1cd38 Mon Sep 17 00:00:00 2001
From: Aryan Deora <adeora@iu.edu>
Date: Mon, 18 Sep 2023 11:51:44 -0400
Subject: [PATCH] fix(query-devtools): Fix styling issues in devtool

---
 packages/query-devtools/package.json          |   6 +-
 packages/query-devtools/src/Devtools.tsx      | 398 ++++++++++++------
 packages/query-devtools/src/Explorer.tsx      |   3 +-
 .../react-query-devtools/src/devtools.tsx     |   2 +-
 .../svelte-query-devtools/src/Devtools.svelte |   2 +-
 pnpm-lock.yaml                                |  47 ++-
 6 files changed, 300 insertions(+), 158 deletions(-)

diff --git a/packages/query-devtools/package.json b/packages/query-devtools/package.json
index 5a3a75f0b7..411fb29cd3 100644
--- a/packages/query-devtools/package.json
+++ b/packages/query-devtools/package.json
@@ -40,19 +40,21 @@
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
-    "build": "tsup"
+    "build": "tsup",
+    "build:dev": "tsup --watch"
   },
   "files": [
     "build",
     "src"
   ],
   "devDependencies": {
-    "@emotion/css": "^11.11.0",
     "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/resize-observer": "^2.0.18",
     "@solid-primitives/storage": "^1.3.11",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/query-core": "workspace:*",
+    "clsx": "^2.0.0",
+    "goober": "^2.1.13",
     "solid-js": "^1.7.8",
     "solid-transition-group": "^0.2.2",
     "superjson": "^1.12.4",
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index f27f3ddbdc..955f41b172 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -9,7 +9,8 @@ import {
   onMount,
 } from 'solid-js'
 import { rankItem } from '@tanstack/match-sorter-utils'
-import { css, cx } from '@emotion/css'
+import { css } from 'goober'
+import { clsx as cx } from 'clsx'
 import { TransitionGroup } from 'solid-transition-group'
 import { Key } from '@solid-primitives/keyed'
 import { createLocalStorage } from '@solid-primitives/storage'
@@ -110,50 +111,56 @@ export const Devtools = () => {
     return localStore.position || useQueryDevtoolsContext().position || POSITION
   })
 
+  createEffect(() => {
+    const root = document.querySelector('.tsqd-parent-container') as HTMLElement
+    const height = localStore.height || DEFAULT_HEIGHT
+    const width = localStore.width || DEFAULT_WIDTH
+    const panelPosition = position()
+    root.style.setProperty(
+      '--tsqd-panel-height',
+      `${panelPosition === 'top' ? '-' : ''}${height}px`,
+    )
+    root.style.setProperty(
+      '--tsqd-panel-width',
+      `${panelPosition === 'left' ? '-' : ''}${width}px`,
+    )
+  })
+
   return (
     <div
       // styles for animating the panel in and out
-      class={css`
-        & .TSQD-panel-exit-active,
-        & .TSQD-panel-enter-active {
-          transition: opacity 0.3s, transform 0.3s;
-        }
+      class={cx(
+        css`
+          & .tsqd-panel-transition-exit-active,
+          & .tsqd-panel-transition-enter-active {
+            transition: opacity 0.3s, transform 0.3s;
+          }
 
-        & .TSQD-panel-exit-to,
-        & .TSQD-panel-enter {
-          ${position() === 'top'
-            ? `transform: translateY(-${Number(
-                localStore.height || DEFAULT_HEIGHT,
-              )}px);`
-            : position() === 'left'
-            ? `transform: translateX(-${Number(
-                localStore.width || DEFAULT_WIDTH,
-              )}px);`
-            : position() === 'right'
-            ? `transform: translateX(${Number(
-                localStore.width || DEFAULT_WIDTH,
-              )}px);`
-            : `transform: translateY(${Number(
-                localStore.height || DEFAULT_HEIGHT,
-              )}px);`}
-        }
+          & .tsqd-panel-transition-exit-to,
+          & .tsqd-panel-transition-enter {
+            ${position() === 'top' || position() === 'bottom'
+              ? `transform: translateY(var(--tsqd-panel-height));`
+              : `transform: translateX(var(--tsqd-panel-width));`}
+          }
 
-        & .TSQD-button-exit-active,
-        & .TSQD-button-enter-active {
-          transition: opacity 0.3s, transform 0.3s;
-        }
+          & .tsqd-button-transition-exit-active,
+          & .tsqd-button-transition-enter-active {
+            transition: opacity 0.3s, transform 0.3s;
+          }
 
-        & .TSQD-button-exit-to,
-        & .TSQD-button-enter {
-          transform: ${buttonPosition() === 'top-left'
-            ? `translateX(-72px);`
-            : buttonPosition() === 'top-right'
-            ? `translateX(72px);`
-            : `translateY(72px);`};
-        }
-      `}
+          & .tsqd-button-transition-exit-to,
+          & .tsqd-button-transition-enter {
+            transform: ${buttonPosition() === 'top-left'
+              ? `translateX(-72px);`
+              : buttonPosition() === 'top-right'
+              ? `translateX(72px);`
+              : `translateY(72px);`};
+          }
+        `,
+        'tsqd-transitions-container',
+      )}
     >
-      <TransitionGroup name="TSQD-panel">
+      <TransitionGroup name="tsqd-panel-transition">
         <Show when={isOpen()}>
           <DevtoolsPanel
             localStore={localStore}
@@ -161,7 +168,7 @@ export const Devtools = () => {
           />
         </Show>
       </TransitionGroup>
-      <TransitionGroup name="TSQD-button">
+      <TransitionGroup name="tsqd-button-transition">
         <Show when={!isOpen()}>
           <div
             class={cx(
@@ -361,18 +368,24 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
       // -
       // min-width - When the panel is in the left or right position, the panel
       // width is set to min-content to allow the panel to shrink to the lowest possible width
-      class={`${styles.panel} ${styles[`panel-position-${position()}`]} ${css`
-        flex-direction: ${panelWidth() < secondBreakpoint ? 'column' : 'row'};
-        background-color: ${panelWidth() < secondBreakpoint
-          ? tokens.colors.gray[600]
-          : tokens.colors.darkGray[900]};
-        ${panelWidth() < thirdBreakpoint &&
-        (position() === 'right' || position() === 'left')
-          ? `
+      class={cx(
+        styles.panel,
+        styles[`panel-position-${position()}`],
+        css`
+          flex-direction: ${panelWidth() < secondBreakpoint ? 'column' : 'row'};
+          background-color: ${panelWidth() < secondBreakpoint
+            ? tokens.colors.gray[600]
+            : tokens.colors.darkGray[900]};
+        `,
+        {
+          [css`
             min-width: min-content;
-          `
-          : ''}
-      `}`}
+          `]:
+            panelWidth() < thirdBreakpoint &&
+            (position() === 'right' || position() === 'left'),
+        },
+        'tsqd-main-panel',
+      )}
       style={{
         height:
           position() === 'bottom' || position() === 'top'
@@ -390,12 +403,17 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
         class={cx(
           styles.dragHandle,
           styles[`dragHandle-position-${position()}`],
+          'tsqd-drag-handle',
         )}
         onMouseDown={handleDragStart}
       ></div>
       <button
         aria-label="Close tanstack query devtools"
-        class={cx(styles.closeBtn, styles[`closeBtn-position-${position()}`])}
+        class={cx(
+          styles.closeBtn,
+          styles[`closeBtn-position-${position()}`],
+          'tsqd-minimize-btn',
+        )}
         onClick={() => props.setLocalStore('open', 'false')}
       >
         <ChevronDown />
@@ -404,23 +422,29 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
         ref={queriesContainerRef}
         // When the panels are stacked we use the height style
         // to divide the panels into two equal parts
-        class={`${styles.queriesContainer} ${css`
-          ${panelWidth() < secondBreakpoint && selectedQueryHash()
-            ? `
-          height: 50%;
-          max-height: 50%;
-          `
-            : ''}
-        `}`}
+        class={cx(
+          styles.queriesContainer,
+          panelWidth() < secondBreakpoint &&
+            selectedQueryHash() &&
+            css`
+              height: 50%;
+              max-height: 50%;
+            `,
+          'tsqd-queries-container',
+        )}
       >
-        <div class={cx(styles.row)}>
+        <div class={cx(styles.row, 'tsqd-header')}>
           <button
-            class={styles.logo}
+            class={cx(styles.logo, 'tsqd-text-logo-container')}
             onClick={() => props.setLocalStore('open', 'false')}
             aria-label="Close Tanstack query devtools"
           >
-            <span class={styles.tanstackLogo}>TANSTACK</span>
-            <span class={styles.queryFlavorLogo}>
+            <span class={cx(styles.tanstackLogo, 'tsqd-text-logo-tanstack')}>
+              TANSTACK
+            </span>
+            <span
+              class={cx(styles.queryFlavorLogo, 'tsqd-text-logo-query-flavor')}
+            >
               {useQueryDevtoolsContext().queryFlavor} v
               {useQueryDevtoolsContext().version}
             </span>
@@ -433,10 +457,16 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
             css`
               gap: ${tokens.size[2.5]};
             `,
+            'tsqd-filters-actions-container',
           )}
         >
-          <div class={styles.filtersContainer}>
-            <div class={styles.filterInput}>
+          <div class={cx(styles.filtersContainer, 'tsqd-filters-container')}>
+            <div
+              class={cx(
+                styles.filterInput,
+                'tsqd-query-filter-textfield-container',
+              )}
+            >
               <Search />
               <input
                 aria-label="Filter queries by query key"
@@ -445,10 +475,16 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                 onInput={(e) =>
                   props.setLocalStore('filter', e.currentTarget.value)
                 }
+                class="tsqd-query-filter-textfield"
                 value={props.localStore.filter || ''}
               />
             </div>
-            <div class={styles.filterSelect}>
+            <div
+              class={cx(
+                styles.filterSelect,
+                'tsqd-query-filter-sort-container',
+              )}
+            >
               <select
                 value={sort()}
                 onChange={(e) =>
@@ -469,6 +505,7 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                 sortOrder() === -1 ? 'descending' : 'ascending'
               }`}
               aria-pressed={sortOrder() === -1}
+              class="tsqd-query-filter-sort-order-btn"
             >
               <Show when={sortOrder() === 1}>
                 <span>Asc</span>
@@ -481,7 +518,7 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
             </button>
           </div>
 
-          <div class={styles.actionsContainer}>
+          <div class={cx(styles.actionsContainer, 'tsqd-actions-container')}>
             <button
               onClick={() => {
                 if (offline()) {
@@ -492,7 +529,11 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                   setOffline(true)
                 }
               }}
-              class={styles.actionsBtn}
+              class={cx(
+                styles.actionsBtn,
+                'tsqd-actions-btn',
+                'tsqd-action-mock-offline-behavior',
+              )}
               aria-label={`${
                 offline()
                   ? 'Unset offline mocking behavior'
@@ -505,13 +546,17 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
             <div style={{ position: 'relative' }}>
               <button
                 onClick={() => setSettingsOpen((prev) => !prev)}
-                class={styles.actionsBtn}
-                id="TSQD-settings-menu-btn"
+                class={cx(
+                  styles.actionsBtn,
+                  'tsqd-actions-btn',
+                  'tsqd-action-settings',
+                )}
+                id="tsqd-settings-menu-btn"
                 aria-label={`${
                   settingsOpen() ? 'Close' : 'Open'
                 } settings menu`}
                 aria-haspopup="true"
-                aria-controls="TSQD-settings-menu"
+                aria-controls="tsqd-settings-menu"
               >
                 <Settings />
               </button>
@@ -519,17 +564,30 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                 <div
                   role="menu"
                   tabindex="-1"
-                  aria-labelledby="TSQD-settings-menu-btn"
-                  id="TSQD-settings-menu"
-                  class={styles.settingsMenu}
+                  aria-labelledby="tsqd-settings-menu-btn"
+                  id="tsqd-settings-menu"
+                  class={cx(styles.settingsMenu, 'tsqd-settings-menu')}
                 >
-                  <div class={styles.settingsMenuHeader}>Position</div>
-                  <div class={styles.settingsMenuSection}>
+                  <div
+                    class={cx(
+                      styles.settingsMenuHeader,
+                      'tsqd-settings-menu-header',
+                    )}
+                  >
+                    Position
+                  </div>
+                  <div
+                    class={cx(
+                      styles.settingsMenuSection,
+                      'tsqd-settings-menu-section',
+                    )}
+                  >
                     <button
                       onClick={() => {
                         setDevtoolsPosition('top')
                       }}
                       aria-label="Position top"
+                      class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-top"
                     >
                       <ArrowUp />
                       <span>Top</span>
@@ -539,6 +597,7 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                         setDevtoolsPosition('bottom')
                       }}
                       aria-label="Position bottom"
+                      class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-bottom"
                     >
                       <ArrowDown />
                       <span>Bottom</span>
@@ -548,6 +607,7 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                         setDevtoolsPosition('left')
                       }}
                       aria-label="Position left"
+                      class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-left"
                     >
                       <ArrowDown />
                       <span>Left</span>
@@ -557,6 +617,7 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                         setDevtoolsPosition('right')
                       }}
                       aria-label="Position right"
+                      class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-right"
                     >
                       <ArrowDown />
                       <span>Right</span>
@@ -567,8 +628,13 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
             </div>
           </div>
         </div>
-        <div class={styles.overflowQueryContainer}>
-          <div>
+        <div
+          class={cx(
+            styles.overflowQueryContainer,
+            'tsqd-queries-overflow-container',
+          )}
+        >
+          <div class="tsqd-queries-container">
             <Key by={(q) => q.queryHash} each={queries()}>
               {(query) => <QueryRow query={query()} />}
             </Key>
@@ -641,12 +707,12 @@ export const QueryRow: Component<{ query: Query }> = (props) => {
           styles.queryRow,
           selectedQueryHash() === props.query.queryHash &&
             styles.selectedQueryRow,
+          'tsqd-query-row',
         )}
         aria-label={`Query key ${props.query.queryHash}`}
       >
         <div
           class={cx(
-            'TSQDObserverCount',
             color() === 'gray'
               ? css`
                   background-color: ${tokens.colors[color()][700]};
@@ -654,15 +720,16 @@ export const QueryRow: Component<{ query: Query }> = (props) => {
                 `
               : css`
                   background-color: ${tokens.colors[color()][900]};
-                  color: ${tokens.colors[color()][300]} !important;
+                  color: ${tokens.colors[color()][300]};
                 `,
+            'tsqd-query-observer-count',
           )}
         >
           {observers()}
         </div>
-        <code class="TSQDQueryHash">{props.query.queryHash}</code>
+        <code class="tsqd-query-hash">{props.query.queryHash}</code>
         <Show when={isDisabled()}>
-          <div class="TSQDQueryDisabled">disabled</div>
+          <div class="tsqd-query-disabled-indicator">disabled</div>
         </Show>
       </button>
     </Show>
@@ -708,7 +775,7 @@ export const QueryStatusCount: Component = () => {
   const styles = getStyles()
 
   return (
-    <div class={styles.queryStatusContainer}>
+    <div class={cx(styles.queryStatusContainer, 'tsqd-query-status-container')}>
       <QueryStatus label="Fresh" color="green" count={fresh()} />
       <QueryStatus label="Fetching" color="blue" count={fetching()} />
       <QueryStatus label="Paused" color="purple" count={paused()} />
@@ -752,40 +819,44 @@ export const QueryStatus: Component<QueryStatusProps> = (props) => {
       ref={tagRef}
       class={cx(
         styles.queryStatusTag,
-        !showLabel()
-          ? css`
-              cursor: pointer;
-              &:hover {
-                background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
-              }
-            `
-          : null,
+        !showLabel() &&
+          css`
+            cursor: pointer;
+            &:hover {
+              background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
+            }
+          `,
+        'tsqd-query-status-tag',
+        `tsqd-query-status-tag-${props.label.toLowerCase()}`,
       )}
       {...(mouseOver() || focused()
         ? {
-            'aria-describedby': 'TSQD-status-tooltip',
+            'aria-describedby': 'tsqd-status-tooltip',
           }
         : {})}
     >
       <Show when={!showLabel() && (mouseOver() || focused())}>
         <div
           role="tooltip"
-          id="TSQD-status-tooltip"
-          class={cx(styles.statusTooltip)}
+          id="tsqd-status-tooltip"
+          class={cx(styles.statusTooltip, 'tsqd-query-status-tooltip')}
         >
           {props.label}
         </div>
       </Show>
       <span
-        class={css`
-          width: ${tokens.size[2]};
-          height: ${tokens.size[2]};
-          border-radius: ${tokens.border.radius.full};
-          background-color: ${tokens.colors[props.color][500]};
-        `}
+        class={cx(
+          css`
+            width: ${tokens.size[2]};
+            height: ${tokens.size[2]};
+            border-radius: ${tokens.border.radius.full};
+            background-color: ${tokens.colors[props.color][500]};
+          `,
+          'tsqd-query-status-tag-dot',
+        )}
       />
       <Show when={showLabel()}>
-        <span>{props.label}</span>
+        <span class="tsqd-query-status-tag-label">{props.label}</span>
       </Show>
       <span
         class={cx(
@@ -793,11 +864,12 @@ export const QueryStatus: Component<QueryStatusProps> = (props) => {
           props.count > 0 && props.color !== 'gray'
             ? css`
                 background-color: ${tokens.colors[props.color][900]};
-                color: ${tokens.colors[props.color][300]} !important;
+                color: ${tokens.colors[props.color][300]};
               `
             : css`
-                color: ${tokens.colors['gray'][400]} !important;
+                color: ${tokens.colors['gray'][400]};
               `,
+          'tsqd-query-status-tag-count',
         )}
       >
         {props.count}
@@ -915,10 +987,14 @@ const QueryDetails = () => {
 
   return (
     <Show when={activeQuery() && activeQueryState()}>
-      <div class={styles.detailsContainer}>
-        <div class={styles.detailsHeader}>Query Details</div>
-        <div class={styles.detailsBody}>
-          <div>
+      <div class={cx(styles.detailsContainer, 'tsqd-query-details-container')}>
+        <div class={cx(styles.detailsHeader, 'tsqd-query-details-header')}>
+          Query Details
+        </div>
+        <div
+          class={cx(styles.detailsBody, 'tsqd-query-details-summary-container')}
+        >
+          <div class="tsqd-query-details-summary">
             <pre>
               <code>{displayValue(activeQuery()!.queryKey, true)}</code>
             </pre>
@@ -941,23 +1017,31 @@ const QueryDetails = () => {
               {statusLabel()}
             </span>
           </div>
-          <div>
+          <div class="tsqd-query-details-observers-count">
             <span>Observers:</span>
             <span>{observerCount()}</span>
           </div>
-          <div>
+          <div class="tsqd-query-details-last-updated">
             <span>Last Updated:</span>
             <span>
               {new Date(activeQueryState()!.dataUpdatedAt).toLocaleTimeString()}
             </span>
           </div>
         </div>
-        <div class={styles.detailsHeader}>Actions</div>
-        <div class={styles.actionsBody}>
+        <div class={cx(styles.detailsHeader, 'tsqd-query-details-header')}>
+          Actions
+        </div>
+        <div
+          class={cx(styles.actionsBody, 'tsqd-query-details-actions-container')}
+        >
           <button
-            class={css`
-              color: ${tokens.colors.blue[400]};
-            `}
+            class={cx(
+              css`
+                color: ${tokens.colors.blue[400]};
+              `,
+              'tsqd-query-details-actions-btn',
+              'tsqd-query-details-action-refetch',
+            )}
             onClick={handleRefetch}
             disabled={statusLabel() === 'fetching'}
           >
@@ -969,9 +1053,13 @@ const QueryDetails = () => {
             Refetch
           </button>
           <button
-            class={css`
-              color: ${tokens.colors.yellow[400]};
-            `}
+            class={cx(
+              css`
+                color: ${tokens.colors.yellow[400]};
+              `,
+              'tsqd-query-details-actions-btn',
+              'tsqd-query-details-action-invalidate',
+            )}
             onClick={() => queryClient.invalidateQueries(activeQuery())}
           >
             <span
@@ -982,9 +1070,13 @@ const QueryDetails = () => {
             Invalidate
           </button>
           <button
-            class={css`
-              color: ${tokens.colors.gray[300]};
-            `}
+            class={cx(
+              css`
+                color: ${tokens.colors.gray[300]};
+              `,
+              'tsqd-query-details-actions-btn',
+              'tsqd-query-details-action-reset',
+            )}
             onClick={() => queryClient.resetQueries(activeQuery())}
           >
             <span
@@ -995,9 +1087,13 @@ const QueryDetails = () => {
             Reset
           </button>
           <button
-            class={css`
-              color: ${tokens.colors.cyan[400]};
-            `}
+            class={cx(
+              css`
+                color: ${tokens.colors.cyan[400]};
+              `,
+              'tsqd-query-details-actions-btn',
+              'tsqd-query-details-action-loading',
+            )}
             disabled={restoringLoading()}
             onClick={() => {
               if (activeQuery()?.state.data === undefined) {
@@ -1038,9 +1134,13 @@ const QueryDetails = () => {
           </button>
           <Show when={errorTypes().length === 0 || queryStatus() === 'error'}>
             <button
-              class={css`
-                color: ${tokens.colors.red[400]};
-              `}
+              class={cx(
+                css`
+                  color: ${tokens.colors.red[400]};
+                `,
+                'tsqd-query-details-actions-btn',
+                'tsqd-query-details-action-error',
+              )}
               onClick={() => {
                 if (!activeQuery()!.state.error) {
                   triggerError()
@@ -1060,7 +1160,13 @@ const QueryDetails = () => {
           <Show
             when={!(errorTypes().length === 0 || queryStatus() === 'error')}
           >
-            <div class={styles.actionsSelect}>
+            <div
+              class={cx(
+                styles.actionsSelect,
+                'tsqd-query-details-actions-btn',
+                'tsqd-query-details-action-error-multiple',
+              )}
+            >
               <span
                 class={css`
                   background-color: ${tokens.colors.red[400]};
@@ -1088,11 +1194,14 @@ const QueryDetails = () => {
             </div>
           </Show>
         </div>
-        <div class={styles.detailsHeader}>Data Explorer</div>
+        <div class={cx(styles.detailsHeader, 'tsqd-query-details-header')}>
+          Data Explorer
+        </div>
         <div
           style={{
             padding: '0.5rem',
           }}
+          class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
         >
           <Explorer
             label="Data"
@@ -1101,11 +1210,14 @@ const QueryDetails = () => {
             copyable={true}
           />
         </div>
-        <div class={styles.detailsHeader}>Query Explorer</div>
+        <div class={cx(styles.detailsHeader, 'tsqd-query-details-header')}>
+          Query Explorer
+        </div>
         <div
           style={{
             padding: '0.5rem',
           }}
+          class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
         >
           <Explorer
             label="Query"
@@ -1179,6 +1291,7 @@ const getStyles = () => {
       z-index: 100000;
       position: fixed;
       padding: 4px;
+      text-align: left;
 
       display: flex;
       align-items: center;
@@ -1470,6 +1583,7 @@ const getStyles = () => {
       font-size: ${font.size.sm};
       background: linear-gradient(to right, #dd524b, #e9a03b);
       background-clip: text;
+      -webkit-background-clip: text;
       line-height: ${font.lineHeight.xs};
       -webkit-text-fill-color: transparent;
       white-space: nowrap;
@@ -1653,8 +1767,8 @@ const getStyles = () => {
     actionsBtn: css`
       border-radius: ${tokens.border.radius.md};
       background-color: ${colors.darkGray[400]};
-      width: 2.125rem; // 34px
-      height: 2.125rem; // 34px
+      width: 2.125rem;
+      height: 2.125rem;
       justify-content: center;
       display: flex;
       align-items: center;
@@ -1691,20 +1805,23 @@ const getStyles = () => {
       background-color: inherit;
       border: none;
       cursor: pointer;
+      &:focus {
+        outline: none;
+      }
       &:focus-visible {
         outline-offset: -2px;
         border-radius: ${border.radius.xs};
         outline: 2px solid ${colors.blue[800]};
       }
-      &:hover .TSQDQueryHash {
+      &:hover .tsqd-query-hash {
         background-color: ${colors.darkGray[600]};
       }
 
-      & .TSQDObserverCount {
+      & .tsqd-query-observer-count {
         padding: 0 ${tokens.size[1]};
         user-select: none;
         min-width: ${tokens.size[8]};
-        align-self: stretch !important;
+        align-self: stretch;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -1712,7 +1829,7 @@ const getStyles = () => {
         font-weight: ${font.weight.medium};
         border-bottom: 1px solid ${colors.darkGray[700]};
       }
-      & .TSQDQueryHash {
+      & .tsqd-query-hash {
         user-select: text;
         font-size: ${font.size.sm};
         display: flex;
@@ -1720,16 +1837,15 @@ const getStyles = () => {
         min-height: ${tokens.size[8]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace !important;
+        font-family: 'Menlo', 'Fira Code', monospace;
         border-bottom: 1px solid ${colors.darkGray[400]};
         text-align: left;
         text-overflow: clip;
         word-break: break-word;
       }
 
-      & .TSQDQueryDisabled {
+      & .tsqd-query-disabled-indicator {
         align-self: stretch;
-        align-self: stretch !important;
         display: flex;
         align-items: center;
         padding: 0 ${tokens.size[3]};
@@ -1746,6 +1862,7 @@ const getStyles = () => {
       flex-direction: column;
       overflow-y: auto;
       display: flex;
+      text-align: left;
     `,
     detailsHeader: css`
       position: sticky;
@@ -1755,6 +1872,7 @@ const getStyles = () => {
       padding: ${tokens.size[2]} ${tokens.size[2]};
       font-weight: ${font.weight.medium};
       font-size: ${font.size.sm};
+      text-align: left;
     `,
     detailsBody: css`
       margin: ${tokens.size[2]} 0px ${tokens.size[3]} 0px;
@@ -1777,7 +1895,7 @@ const getStyles = () => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace !important;
+        font-family: 'Menlo', 'Fira Code', monospace;
         margin: 0;
         font-size: ${font.size.sm};
         line-height: ${font.lineHeight.sm};
@@ -1870,7 +1988,7 @@ const getStyles = () => {
       }
 
       & svg path {
-        stroke: ${tokens.colors.red[400]} !important;
+        stroke: ${tokens.colors.red[400]};
       }
     `,
     settingsMenu: css`
diff --git a/packages/query-devtools/src/Explorer.tsx b/packages/query-devtools/src/Explorer.tsx
index 21151960d2..3176c58197 100644
--- a/packages/query-devtools/src/Explorer.tsx
+++ b/packages/query-devtools/src/Explorer.tsx
@@ -1,5 +1,6 @@
 import { stringify } from 'superjson'
-import { css, cx } from '@emotion/css'
+import { css } from 'goober'
+import { clsx as cx } from 'clsx'
 import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
 import { tokens } from './theme'
diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 861536f582..8befb8a58b 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -91,5 +91,5 @@ export function ReactQueryDevtools(
     }
   }, [devtools])
 
-  return <div ref={ref}></div>
+  return <div className="tsqd-parent-container" ref={ref}></div>
 }
diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/Devtools.svelte
index 92e30c2ebc..3eb2d6ad2a 100644
--- a/packages/svelte-query-devtools/src/Devtools.svelte
+++ b/packages/svelte-query-devtools/src/Devtools.svelte
@@ -54,4 +54,4 @@
   }
 </script>
 
-<div bind:this={ref} />
+<div class="tsqd-parent-container" bind:this={ref} />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 969136dd27..c39b4a5f23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1516,9 +1516,6 @@ importers:
 
   packages/query-devtools:
     devDependencies:
-      '@emotion/css':
-        specifier: ^11.11.0
-        version: 11.11.0
       '@solid-primitives/keyed':
         specifier: ^1.2.0
         version: 1.2.0(solid-js@1.7.8)
@@ -1534,6 +1531,12 @@ importers:
       '@tanstack/query-core':
         specifier: workspace:*
         version: link:../query-core
+      clsx:
+        specifier: ^2.0.0
+        version: 2.0.0
+      goober:
+        specifier: ^2.1.13
+        version: 2.1.13(csstype@3.1.2)
       solid-js:
         specifier: ^1.7.8
         version: 1.7.8
@@ -4988,6 +4991,7 @@ packages:
       find-root: 1.1.0
       source-map: 0.5.7
       stylis: 4.2.0
+    dev: false
 
   /@emotion/cache@11.11.0:
     resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
@@ -4997,19 +5001,11 @@ packages:
       '@emotion/utils': 1.2.1
       '@emotion/weak-memoize': 0.3.1
       stylis: 4.2.0
-
-  /@emotion/css@11.11.0:
-    resolution: {integrity: sha512-m4g6nKzZyiKyJ3WOfdwrBdcujVcpaScIWHAnyNKPm/A/xJKwfXPfQAbEVi1kgexWTDakmg+r2aDj0KvnMTo4oQ==}
-    dependencies:
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.2
-      '@emotion/sheet': 1.2.2
-      '@emotion/utils': 1.2.1
-    dev: true
+    dev: false
 
   /@emotion/hash@0.9.1:
     resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
 
   /@emotion/is-prop-valid@1.2.1:
     resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
@@ -5019,6 +5015,7 @@ packages:
 
   /@emotion/memoize@0.8.1:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+    dev: false
 
   /@emotion/react@11.11.0(@types/react@18.2.4)(react@18.2.0):
     resolution: {integrity: sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==}
@@ -5049,9 +5046,11 @@ packages:
       '@emotion/unitless': 0.8.1
       '@emotion/utils': 1.2.1
       csstype: 3.1.2
+    dev: false
 
   /@emotion/sheet@1.2.2:
     resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
+    dev: false
 
   /@emotion/styled@11.11.0(@emotion/react@11.11.0)(@types/react@18.2.4)(react@18.2.0):
     resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
@@ -5076,6 +5075,7 @@ packages:
 
   /@emotion/unitless@0.8.1:
     resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+    dev: false
 
   /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
@@ -5087,9 +5087,11 @@ packages:
 
   /@emotion/utils@1.2.1:
     resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
+    dev: false
 
   /@emotion/weak-memoize@0.3.1:
     resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
+    dev: false
 
   /@esbuild/android-arm64@0.18.13:
     resolution: {integrity: sha512-j7NhycJUoUAG5kAzGf4fPWfd17N6SM3o1X6MlXVqfHvs2buFraCJzos9vbeWjLxOyBKHyPOnuCuipbhvbYtTAg==}
@@ -8262,6 +8264,7 @@ packages:
 
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: false
 
   /@types/prettier@2.7.3:
     resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
@@ -10300,6 +10303,7 @@ packages:
       '@babel/runtime': 7.22.5
       cosmiconfig: 7.1.0
       resolve: 1.22.2
+    dev: false
 
   /babel-plugin-module-resolver@4.1.0:
     resolution: {integrity: sha512-MlX10UDheRr3lb3P0WcaIdtCSRlxdQsB1sBqL7W0raF070bGl1HQQq5K3T2vf2XAYie+ww+5AKC/WrkjRO2knA==}
@@ -11543,6 +11547,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+    dev: true
+
   /co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -11922,6 +11931,7 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
+    dev: false
 
   /cp-file@9.1.0:
     resolution: {integrity: sha512-3scnzFj/94eb7y4wyXRWwvzLFaQp87yyfTnChIjlfYrVqp5lVO3E2hIJMeQIltUT0K2ZAB3An1qXcBmwGyvuwA==}
@@ -15071,6 +15081,7 @@ packages:
 
   /find-root@1.1.0:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
 
   /find-up@3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
@@ -15676,6 +15687,14 @@ packages:
       csstype: 3.1.2
     dev: false
 
+  /goober@2.1.13(csstype@3.1.2):
+    resolution: {integrity: sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dependencies:
+      csstype: 3.1.2
+    dev: true
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -24903,6 +24922,7 @@ packages:
   /source-map@0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -25419,6 +25439,7 @@ packages:
 
   /stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+    dev: false
 
   /sucrase@3.23.0:
     resolution: {integrity: sha512-xgC1xboStzGhCnRywlBf/DLmkC+SkdAKqrNCDsxGrzM0phR5oUxoFKiQNrsc2D8wDdAm03iLbSZqjHDddo3IzQ==}