From 0a3fc554ee1dc1f993899218bdf85ecad66f00a1 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Mon, 1 Dec 2025 18:32:06 -0800
Subject: [PATCH] chore: button menu update

---
 .../PanelDataPane/AddDataItemMenu.tsx         | 36 ++++++++++---------
 .../PanelDataPane/PanelDataPane.tsx           |  2 +-
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx
index 2ada47cbc53..ede194e6468 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx
@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import { memo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { t, Trans } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
-import { Button, Dropdown, Menu, useStyles2 } from '@grafana/ui';
+import { Dropdown, IconButton, Menu, Stack, useStyles2 } from '@grafana/ui';
 import { ExpressionQueryType } from 'app/features/expressions/types';
 
 interface AddDataItemMenuProps {
@@ -41,6 +41,10 @@ export const AddDataItemMenu = memo(({ onAddQuery, onAddTransform, onAddExpressi
     });
   }
 
+  const expressionSubItems = expressionTypes.map(({ type, label }) => (
+    <Menu.Item key={type} label={label} icon="calculator-alt" onClick={() => onAddExpression(type)} />
+  ));
+
   const menu = (
     <Menu>
       <Menu.Item
@@ -53,27 +57,25 @@ export const AddDataItemMenu = memo(({ onAddQuery, onAddTransform, onAddExpressi
         icon="process"
         onClick={onAddTransform}
       />
-      <Menu.Group label={t('dashboard-scene.add-data-item-menu.expressions-group', 'Expression')}>
-        {expressionTypes.map((expr) => (
-          <Menu.Item
-            key={expr.type}
-            label={expr.label}
-            icon="calculator-alt"
-            onClick={() => onAddExpression(expr.type)}
-          />
-        ))}
-      </Menu.Group>
+      <Menu.Item
+        label={t('dashboard-scene.add-data-item-menu.expressions-group', 'Expression')}
+        icon="calculator-alt"
+        childItems={expressionSubItems}
+      />
     </Menu>
   );
 
   return (
-    <div className={styles.container}>
+    <Stack direction="row" justifyContent="center" alignItems="center">
       <Dropdown overlay={menu} placement="top-start">
-        <Button icon="plus" variant="secondary" fullWidth>
-          <Trans i18nKey="dashboard-scene.add-data-item-menu.add-button">Add</Trans>
-        </Button>
+        <IconButton
+          name="plus-circle"
+          size="xxl"
+          variant="secondary"
+          tooltip={t('dashboard-scene.add-data-item-menu.add-button', 'Add')}
+        />
       </Dropdown>
-    </div>
+    </Stack>
   );
 });
 
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx
index e27092725f1..f3d0f85239b 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx
@@ -400,7 +400,7 @@ function PanelDataPaneRendered({ model }: SceneComponentProps<PanelDataPane>) {
 
   const { containerProps, primaryProps, secondaryProps, splitterProps } = useSplitter({
     direction: 'row',
-    initialSize: 0.2,
+    initialSize: 0.25,
   });
 
   return (