chore(textarea): moving ios+md specific margin to native file

[rugoncalves]

Issue number: resolves internal

---

What is the current behavior?

The Ionic Textarea component, has a margin to avoid the textarea element to overlap the label when the label placement is stacked. However, as the ionic theme already has other styles that safeguard the label, this margin, is causing a misalignment of the content:

What is the new behavior?

• In the new behavior, the corresponding CSS was moved in to the textarea.native.scss file that is inherited by both ios and md themes, leaving ionic theme unaffected.
• After the change:

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Mar 2, 2026 4:24pm

[Copilot]

Pull request overview

This PR fixes a visual misalignment in the Ionic Textarea component when the label-placement is set to stacked. The textarea.common.scss defines an 8px top margin on the textarea element to prevent it from overlapping the label in the MD/iOS themes. However, the Ionic theme already handles the spacing through other means (the .textarea-wrapper gap), so this margin causes a content misalignment. The fix overrides that margin to 0 exclusively for the Ionic theme's stacked label placement.

Changes:

• Adds a CSS override in textarea.ionic.scss to remove the inherited 8px top margin on the textarea and the auto-grow pseudo-element mirror when the label placement is stacked.
• Updates visual regression snapshot baselines across multiple test suites (states, size, shape, highlight, fill) to reflect the corrected layout.

Reviewed changes

Copilot reviewed 1 out of 61 changed files in this pull request and generated 2 comments.

File	Description
core/src/components/textarea/textarea.ionic.scss	Adds margin override for stacked label placement in the Ionic theme
*.e2e.ts-snapshots/*.png (multiple files)	Updated visual regression baseline snapshots reflecting the corrected alignment

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[brandyscarney]

Rather than overriding the margin here, we should move the rule that sets the margin out of textarea.common.scss and into textarea.native.scss:

ionic-framework/core/src/components/textarea/textarea.common.scss

Lines 509 to 518 in 55c506d

	/**
	* Ensures the textarea does not
	* overlap the label.
	*/
	:host(.textarea-label-placement-stacked) textarea,
	:host(.textarea-label-placement-floating) textarea,
	:host(.textarea-label-placement-stacked[auto-grow]) .native-wrapper::after,
	:host(.textarea-label-placement-floating[auto-grow]) .native-wrapper::after {
	@include margin(8px, 0px, 0px, 0px);
	}

[rugoncalves]

Thank you for the highlighting a more elegant solution. I've changed the PR title and body.