Add min width

public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenu.tsx

@@ -18,23 +18,7 @@ interface DashboardControlsMenuProps {
 
 export function DashboardControlsMenu({ variables, links, annotations, dashboardUID }: DashboardControlsMenuProps) {
   return (
-    <Box
-      minWidth={32}
-      borderColor={'weak'}
-      borderStyle={'solid'}
-      boxShadow={'z3'}
-      display={'flex'}
-      direction={'column'}
-      borderRadius={'default'}
-      backgroundColor={'primary'}
-      padding={1}
-      gap={0.5}
-      onClick={(e) => {
-        // Normally, clicking the overlay closes the dropdown.
-        // We stop event propagation here to keep it open while users interact with variable controls.
-        e.stopPropagation();
-      }}
-    >
+    <Box minWidth={32}>
       {/* Variables */}
       {variables.map((variable, index) => (
         <div key={variable.state.key}>

public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Dropdown, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Toggletip, ToolbarButton, useStyles2 } from '@grafana/ui';
 
 import { DashboardScene } from '../DashboardScene';
 
@@ -24,11 +24,12 @@ export function DashboardControlsButton({ dashboard }: { dashboard: DashboardSce
   }
 
   return (
-    <Dropdown
+    <Toggletip
       placement="bottom-start"
-      overlay={
+      content={
         <DashboardControlsMenu variables={variables} links={links} annotations={annotations} dashboardUID={uid} />
       }
+      closeButton={false}
     >
       <ToolbarButton
         aria-label={t('dashboard.controls.menu.aria-label', DASHBOARD_CONTROLS_MENU_ARIA_LABEL)}
@@ -40,7 +41,7 @@ export function DashboardControlsButton({ dashboard }: { dashboard: DashboardSce
       >
         + {dashboardControlsCount}
       </ToolbarButton>
-    </Dropdown>
+    </Toggletip>
   );
 }