PanelChrome: Feature toggle increased panel header height and padding (#112613)

* PanelChrome: Feature toggle for increase header and content panel padding

* Update

* Update to panel menu

* Fix lint

* Revert theme feature ttoggle changes

Signed-off-by: Torkel Ödegaard <torkel@grafana.com>

* Update

* fix storybook

* Update

---------

Signed-off-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -1205,6 +1205,11 @@ export interface FeatureToggles {
   */
   pluginStoreServiceLoading?: boolean;
   /**
+  * Increases panel padding globally
+  * @default false
+  */
+  newPanelPadding?: boolean;
+  /**
   * When storing dashboard and folder resource permissions, only store action sets and not the full list of underlying permission
   * @default true
   */

packages/grafana-runtime/src/config.ts

@@ -282,6 +282,8 @@ export class GrafanaBootConfig {
     overrideFeatureTogglesFromUrl(this);
     overrideFeatureTogglesFromLocalStorage(this);
 
+    this.bootData.settings.featureToggles = this.featureToggles;
+
     // Creating theme after applying feature toggle overrides in case we need to toggle anything
     this.theme2 = getThemeById(this.bootData.user.theme);
     this.bootData.user.lightTheme = this.theme2.isLight;

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

@@ -436,6 +436,10 @@ const itemsRenderer = (items: ReactNode[] | ReactNode, renderer: (items: ReactNo
 
 const getHeaderHeight = (theme: GrafanaTheme2, hasHeader: boolean) => {
   if (hasHeader) {
+    if (getFeatureToggle('newPanelPadding')) {
+      return theme.spacing.gridSize * 5;
+    }
+
     return theme.spacing.gridSize * theme.components.panel.headerHeight;
   }
 
@@ -477,7 +481,8 @@ const getContentStyle = (
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const { background, borderColor, padding } = theme.components.panel;
+  const { background, borderColor } = theme.components.panel;
+  const newPanelPadding = getFeatureToggle('newPanelPadding');
 
   return {
     container: css({
@@ -552,6 +557,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'panel-header',
       display: 'flex',
       alignItems: 'center',
+      // remove logic after newPanelPadding feature toggle is removed
+      padding: newPanelPadding ? theme.spacing(0, 1, 0, 1.5) : theme.spacing(0, 0.5, 0, 1),
+      gap: theme.spacing(1),
     }),
     pointer: css({
       cursor: 'pointer',
@@ -568,7 +576,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     title: css({
       label: 'panel-title',
       display: 'flex',
-      padding: theme.spacing(0, padding),
       minWidth: 0,
       '& > h2': {
         minWidth: 0,
@@ -602,7 +609,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     rightActions: css({
       display: 'flex',
-      padding: theme.spacing(0, padding),
       gap: theme.spacing(1),
     }),
     rightAligned: css({
@@ -614,6 +620,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     titleItems: css({
       display: 'flex',
       height: '100%',
+      alignItems: 'center',
     }),
     clearButtonStyles: css({
       alignItems: 'center',

packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx

@@ -4,8 +4,8 @@ import { ReactElement, useCallback } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 
+import { Button } from '../Button/Button';
 import { Dropdown } from '../Dropdown/Dropdown';
-import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 import { TooltipPlacement } from '../Tooltip/types';
 
 interface PanelMenuProps {
@@ -40,12 +40,12 @@ export function PanelMenu({
 
   return (
     <Dropdown overlay={menu} placement={placement} offset={offset} onVisibleChange={handleVisibility}>
-      <ToolbarButton
+      <Button
         aria-label={t('grafana-ui.panel-menu.label', 'Menu for panel {{ title }}', { title: title ?? 'Untitled' })}
         title={t('grafana-ui.panel-menu.title', 'Menu')}
         icon="ellipsis-v"
-        iconSize="md"
-        narrow
+        variant="secondary"
+        size="sm"
         data-testid={testId}
         className={cx(menuButtonClass, dragClassCancel)}
       />

packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx

@@ -31,17 +31,15 @@ export function PanelStatus({ message, onClick, ariaLabel = 'status' }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const { headerHeight, padding } = theme.components.panel;
-
   return {
     buttonStyles: css({
       label: 'panel-header-state-button',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: theme.spacing(padding),
-      width: theme.spacing(headerHeight),
-      height: theme.spacing(headerHeight),
+      padding: theme.spacing(1),
+      width: theme.spacing(theme.components.height.md),
+      height: theme.spacing(theme.components.height.md),
       borderRadius: theme.shape.radius.default,
     }),
   };

packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx

@@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     border: 'none',
     borderRadius: `${theme.shape.radius.default}`,
     padding: `${theme.spacing(0, 1)}`,
-    height: `${theme.spacing(theme.components.panel.headerHeight)}`,
+    height: `${theme.spacing(theme.components.height.md)}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

pkg/services/featuremgmt/registry.go

@@ -2085,6 +2085,14 @@ var (
 			Owner:        grafanaPluginsPlatformSquad,
 			Expression:   "false",
 		},
+		{
+			Name:         "newPanelPadding",
+			Description:  "Increases panel padding globally",
+			Stage:        FeatureStageExperimental,
+			FrontendOnly: false,
+			Owner:        grafanaDashboardsSquad,
+			Expression:   "false",
+		},
 		{
 			Name:              "onlyStoreActionSets",
 			Description:       "When storing dashboard and folder resource permissions, only store action sets and not the full list of underlying permission",

pkg/services/featuremgmt/toggles_gen.csv

@@ -268,6 +268,7 @@ newGauge,experimental,@grafana/dataviz-squad,false,false,true
 preventPanelChromeOverflow,preview,@grafana/grafana-frontend-platform,false,false,true
 jaegerEnableGrpcEndpoint,experimental,@grafana/oss-big-tent,false,false,false
 pluginStoreServiceLoading,experimental,@grafana/plugins-platform-backend,false,false,false
+newPanelPadding,experimental,@grafana/dashboards-squad,false,false,false
 onlyStoreActionSets,GA,@grafana/identity-access-team,false,false,false
 panelTimeSettings,experimental,@grafana/dashboards-squad,false,false,false
 dashboardTemplates,experimental,@grafana/sharing-squad,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -1082,6 +1082,10 @@ const (
 	// Load plugins on store service startup instead of wire provider, and call RegisterFixedRoles after all plugins are loaded
 	FlagPluginStoreServiceLoading = "pluginStoreServiceLoading"
 
+	// FlagNewPanelPadding
+	// Increases panel padding globally
+	FlagNewPanelPadding = "newPanelPadding"
+
 	// FlagOnlyStoreActionSets
 	// When storing dashboard and folder resource permissions, only store action sets and not the full list of underlying permission
 	FlagOnlyStoreActionSets = "onlyStoreActionSets"

pkg/services/featuremgmt/toggles_gen.json

@@ -2853,6 +2853,19 @@
         "expression": "true"
       }
     },
+    {
+      "metadata": {
+        "name": "newPanelPadding",
+        "resourceVersion": "1760780310038",
+        "creationTimestamp": "2025-10-18T09:38:30Z"
+      },
+      "spec": {
+        "description": "Increases panel padding globally",
+        "stage": "experimental",
+        "codeowner": "@grafana/dashboards-squad",
+        "expression": "false"
+      }
+    },
     {
       "metadata": {
         "name": "newShareReportDrawer",
@@ -2954,6 +2967,20 @@
         "expression": "true"
       }
     },
+    {
+      "metadata": {
+        "name": "panelPadding",
+        "resourceVersion": "1760779980125",
+        "creationTimestamp": "2025-10-18T09:33:00Z",
+        "deletionTimestamp": "2025-10-18T09:38:30Z"
+      },
+      "spec": {
+        "description": "Increases panel padding globally",
+        "stage": "experimental",
+        "codeowner": "@grafana/dashboards-squad",
+        "expression": "false"
+      }
+    },
     {
       "metadata": {
         "name": "panelTimeSettings",