[Dashboard] Missing panel title h2 style

[markov00]

Kibana version:
8.x, 9.x

Describe the bug:

An h2 element is wrapping the panel title when the panel has a description, when not it just uses the panelTitleElement.

kibana/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx

Lines 90 to 92 in b531427

	if (!panelDescription) {
	return panelTitleElement;
	}

kibana/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx

Lines 114 to 137 in b531427

	{!hideTitle ? (
	<h2
	// styles necessary for applying ellipsis and showing the info icon if description is present
	css={css`
	overflow: hidden;
	`}
	>
	<EuiScreenReaderOnly>
	<span id={headerId}>
	{panelTitle
	? i18n.translate('presentationPanel.ariaLabel', {
	defaultMessage: 'Panel: {title}',
	values: {
	title: panelTitle,
	},
	})
	: i18n.translate('presentationPanel.untitledPanelAriaLabel', {
	defaultMessage: 'Untitled panel',
	})}
	</span>
	</EuiScreenReaderOnly>
	{panelTitleElement}
	</h2>
	) : null}

This h2 doesn't own its style, but is inherited. Unfortunately a style override (from a browser extensions for example) at the body/html level could wrongly updates the font-size of this header causing the title to be larger then the required size.
EUI doesn't block this behaviour and the h2 is not styled to prevent that.

Steps to reproduce:

1. create a dashboard with two panels, one with just the title, the other with title and description
2. add a custom h2 style with font-size: 40px or more
3. you will notice that the panel with description increases in font-size.

Expected behavior:
It should behave as every other h2 elements aka EuiTitles and it should not be overwritten by custom styles.

Also the other wrong fact is that it has semantically a different meaning then the title without the description that is just a link or a span if in read-only mode.

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[Ankit-raj-11]

Hello @markov00 and @elastic/kibana-presentation team,

I see that this issue is currently unassigned and is marked with loe:small and good first issue / low hanging fruit.

This looks like a clear UI consistency and styling issue where the h2 wrapper is missing explicit EUI styling, making it vulnerable to external style overrides. The proposed solution mentioned in the related PR (#240473 - fix(dashboard): use EuiTitle for panel title with description) suggests the correct approach.

Proposed Simple Solution

The fix is to change the raw h2 element wrapping the panel title (when a description is present) to use the correct <EuiTitle> component with the appropriate size prop (likely size="s" or the size that matches the non-description title style). This will ensure:

1. It inherits the correct EUI styles, preventing external overrides.
2. It uses the correct semantic component, improving accessibility and consistency.

I am ready to implement this fix immediately and submit a PR quickly to resolve this style bug. I kindly request that you assign #239708 to me.

Thank you for your consideration!

[Heenawter]

Feel free to give it a shot @Ankit-raj-11! :)