From 88be771f09997eac28b7f41594e779bdef475f71 Mon Sep 17 00:00:00 2001
From: Jacob Kelley <jakie8@gmail.com>
Date: Wed, 17 Sep 2025 18:01:23 +0000
Subject: [PATCH 1/4] fix(): massage some input styles to be more uniform

---
 packages/devtools-ui/src/styles/use-styles.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts
index ef309351..cf5604c4 100644
--- a/packages/devtools-ui/src/styles/use-styles.ts
+++ b/packages/devtools-ui/src/styles/use-styles.ts
@@ -59,6 +59,8 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
+  const wrapperSize = 320;
+
   return {
     logo: css`
       cursor: pointer;
@@ -78,7 +80,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
     selectWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -129,7 +131,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     inputWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -152,6 +154,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     input: css`
       appearance: none;
+      box-sizing: border-box;
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;

From 047da81713ee19e5e32ef4f9b6764528b478d76d Mon Sep 17 00:00:00 2001
From: Jacob Kelley <jakie8@gmail.com>
Date: Wed, 17 Sep 2025 18:01:54 +0000
Subject: [PATCH 2/4] feat(): add support for a custom image for the dev tools
 trigger

---
 packages/devtools/src/components/trigger.tsx    | 4 +++-
 packages/devtools/src/context/devtools-store.ts | 6 ++++++
 packages/devtools/src/devtools.tsx              | 2 +-
 packages/devtools/src/tabs/settings-tab.tsx     | 7 +++++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/devtools/src/components/trigger.tsx b/packages/devtools/src/components/trigger.tsx
index e3d913c1..ec799b55 100644
--- a/packages/devtools/src/components/trigger.tsx
+++ b/packages/devtools/src/components/trigger.tsx
@@ -8,9 +8,11 @@ import type { Accessor } from 'solid-js'
 export const Trigger = ({
   isOpen,
   setIsOpen,
+  image = TanStackLogo,
 }: {
   isOpen: Accessor<boolean>
   setIsOpen: (isOpen: boolean) => void
+  image: string
 }) => {
   const { settings } = useDevtoolsSettings()
   const styles = useStyles()
@@ -28,7 +30,7 @@ export const Trigger = ({
       class={buttonStyle()}
       onClick={() => setIsOpen(!isOpen())}
     >
-      <img src={TanStackLogo} alt="TanStack Logo" />
+      <img src={image || TanStackLogo} alt="TanStack Devtools" />
     </button>
   )
 }
diff --git a/packages/devtools/src/context/devtools-store.ts b/packages/devtools/src/context/devtools-store.ts
index e7e077ab..d74d2316 100644
--- a/packages/devtools/src/context/devtools-store.ts
+++ b/packages/devtools/src/context/devtools-store.ts
@@ -61,6 +61,11 @@ export type DevtoolsStore = {
      * @default "dark"
      */
     theme: 'light' | 'dark'
+    /**
+     * The image used for the dev tools trigger
+     * @default TanStackLogo
+     */
+    triggerImage: string
   }
   state: {
     activeTab: TabName
@@ -86,6 +91,7 @@ export const initialState: DevtoolsStore = {
       window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light',
+    triggerImage: "",
   },
   state: {
     activeTab: 'plugins',
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index ab5270cf..de038391 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -201,7 +201,7 @@ export default function DevTools() {
                   : true
             }
           >
-            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} image={settings().triggerImage} />
             <MainPanel isResizing={isResizing} isOpen={isOpen}>
               <ContentPanel
                 ref={(ref) => (panelRef = ref)}
diff --git a/packages/devtools/src/tabs/settings-tab.tsx b/packages/devtools/src/tabs/settings-tab.tsx
index 8ea77d9c..0a906fad 100644
--- a/packages/devtools/src/tabs/settings-tab.tsx
+++ b/packages/devtools/src/tabs/settings-tab.tsx
@@ -71,6 +71,13 @@ export const SettingsTab = () => {
             }
             checked={settings().hideUntilHover}
           />
+          <Input
+            label="Trigger Image"
+            description="Specify the URL of the image to use for the trigger"
+            value={settings().triggerImage}
+            placeholder="Default TanStack Logo"
+            onChange={(value) => setSettings({ triggerImage: value })}
+          />
           <Select
             label="Theme"
             description="Choose the theme for the devtools panel"

From 31dde7f99de1e1133ae37895768582fef7d6b556 Mon Sep 17 00:00:00 2001
From: Jacob Kelley <jakie8@gmail.com>
Date: Wed, 17 Sep 2025 18:02:08 +0000
Subject: [PATCH 3/4] chore(): update documentation for triggerImage

---
 docs/configuration.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/configuration.md b/docs/configuration.md
index dc3f50eb..8fc8831f 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -57,6 +57,13 @@ type KeyboardKey = ModifierKey | (string & {});
 
 ```
 
+- `triggerImage` - The image used for the dev tools trigger
+
+```ts
+{ triggerImage: string }
+
+```
+
 - `urlFlag` - The required flag that must be present in the url to enable devtools.
 
 ```ts

From f6c2ab5c8cb91838f1df9decd3b56046269a531e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 17 Sep 2025 21:35:46 +0000
Subject: [PATCH 4/4] ci: apply automated fixes

---
 packages/devtools-ui/src/styles/use-styles.ts   | 2 +-
 packages/devtools/src/context/devtools-store.ts | 2 +-
 packages/devtools/src/devtools.tsx              | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts
index cf5604c4..43769a8a 100644
--- a/packages/devtools-ui/src/styles/use-styles.ts
+++ b/packages/devtools-ui/src/styles/use-styles.ts
@@ -59,7 +59,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
-  const wrapperSize = 320;
+  const wrapperSize = 320
 
   return {
     logo: css`
diff --git a/packages/devtools/src/context/devtools-store.ts b/packages/devtools/src/context/devtools-store.ts
index d74d2316..1555aa94 100644
--- a/packages/devtools/src/context/devtools-store.ts
+++ b/packages/devtools/src/context/devtools-store.ts
@@ -91,7 +91,7 @@ export const initialState: DevtoolsStore = {
       window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light',
-    triggerImage: "",
+    triggerImage: '',
   },
   state: {
     activeTab: 'plugins',
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index de038391..2ec3ee5d 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -201,7 +201,11 @@ export default function DevTools() {
                   : true
             }
           >
-            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} image={settings().triggerImage} />
+            <Trigger
+              isOpen={isOpen}
+              setIsOpen={toggleOpen}
+              image={settings().triggerImage}
+            />
             <MainPanel isResizing={isResizing} isOpen={isOpen}>
               <ContentPanel
                 ref={(ref) => (panelRef = ref)}