ContextMenu: Fix padding and show border based on items (#63948)

packages/grafana-ui/src/components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { useImperativeHandle, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -39,7 +39,16 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
         aria-label={ariaLabel}
         onKeyDown={handleKeys}
       >
-        {header && <div className={styles.header}>{header}</div>}
+        {header && (
+          <div
+            className={cx(
+              styles.header,
+              Boolean(children) && React.Children.toArray(children).length > 0 && styles.headerBorder
+            )}
+          >
+            {header}
+          </div>
+        )}
         {children}
       </div>
     );
@@ -57,7 +66,9 @@ export const Menu = Object.assign(MenuComp, {
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     header: css({
-      padding: `${theme.spacing(0.5, 0.5, 1, 0.5)}`,
+      padding: `${theme.spacing(0.5, 1, 1, 1)}`,
+    }),
+    headerBorder: css({
       borderBottom: `1px solid ${theme.colors.border.weak}`,
     }),
     wrapper: css({