From 9361eb3f941b7a8a08d567000fe50b1b768aa1a4 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 23 Mar 2026 14:26:30 +0000
Subject: [PATCH] Update PluginHeader.tsx

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../components/PluginHeader/PluginHeader.tsx  | 77 ++++++++++---------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.tsx b/packages/ui/src/components/PluginHeader/PluginHeader.tsx
index 6dd7737d8f..e7f76d6a5b 100644
--- a/packages/ui/src/components/PluginHeader/PluginHeader.tsx
+++ b/packages/ui/src/components/PluginHeader/PluginHeader.tsx
@@ -25,6 +25,7 @@ import { Box } from '../Box';
 import { Link } from '../Link';
 import { RiShapesLine } from '@remixicon/react';
 import { Text } from '../Text';
+import { BgReset } from '../../hooks/useBg';
 
 declare module 'react-aria-components' {
   interface RouterConfig {
@@ -124,44 +125,46 @@ export const PluginHeader = (props: PluginHeaderProps) => {
   const titleText = title || 'Your plugin';
 
   return (
-    <header ref={headerRef} className={classes.root}>
-      <Box bg="neutral" className={classes.toolbar} data-has-tabs={hasTabs}>
-        <div className={classes.toolbarContent}>
-          <div className={classes.toolbarIcon} aria-hidden="true">
-            {icon || <RiShapesLine />}
+    <BgReset>
+      <header ref={headerRef} className={classes.root}>
+        <Box bg="neutral" className={classes.toolbar} data-has-tabs={hasTabs}>
+          <div className={classes.toolbarContent}>
+            <div className={classes.toolbarIcon} aria-hidden="true">
+              {icon || <RiShapesLine />}
+            </div>
+            <h1 className={classes.toolbarName}>
+              {titleLink ? (
+                <Link href={titleLink} standalone variant="body-medium">
+                  {titleText}
+                </Link>
+              ) : (
+                <Text as="span" variant="body-medium">
+                  {titleText}
+                </Text>
+              )}
+            </h1>
           </div>
-          <h1 className={classes.toolbarName}>
-            {titleLink ? (
-              <Link href={titleLink} standalone variant="body-medium">
-                {titleText}
-              </Link>
-            ) : (
-              <Text as="span" variant="body-medium">
-                {titleText}
-              </Text>
-            )}
-          </h1>
-        </div>
-        <div className={classes.toolbarControls}>{actionChildren}</div>
-      </Box>
-      {tabs && (
-        <Box className={classes.tabs}>
-          <Tabs onSelectionChange={onTabSelectionChange}>
-            <TabList>
-              {tabs?.map(tab => (
-                <Tab
-                  key={tab.id}
-                  id={tab.id}
-                  href={tab.href}
-                  matchStrategy={tab.matchStrategy}
-                >
-                  {tab.label}
-                </Tab>
-              ))}
-            </TabList>
-          </Tabs>
+          <div className={classes.toolbarControls}>{actionChildren}</div>
         </Box>
-      )}
-    </header>
+        {tabs && (
+          <Box className={classes.tabs}>
+            <Tabs onSelectionChange={onTabSelectionChange}>
+              <TabList>
+                {tabs?.map(tab => (
+                  <Tab
+                    key={tab.id}
+                    id={tab.id}
+                    href={tab.href}
+                    matchStrategy={tab.matchStrategy}
+                  >
+                    {tab.label}
+                  </Tab>
+                ))}
+              </TabList>
+            </Tabs>
+          </Box>
+        )}
+      </header>
+    </BgReset>
   );
 };