[EuiTextArea] Fix extra 2-3px of height caused by `display: inline-bl…

…ock` (#7607)
elastic · Mar 21, 2024 · 40f0b0d · 40f0b0d
1 parent c9a6c36
commit 40f0b0d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/changelogs/upcoming/7607.md b/changelogs/upcoming/7607.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiTextArea`'s CSS box model to no longer render a few extra pixels of strut height
diff --git a/src/components/form/text_area/_text_area.scss b/src/components/form/text_area/_text_area.scss
@@ -2,6 +2,11 @@
   @include euiFormControlStyle;
   line-height: $euiLineHeight; // give more spacing between multiple lines
 
+  // <textarea>s default to `inline-block`, which causes an extra 2-3px of
+  // unnecessary height within its parent `block` form control wrapper.
+  // @see https://stackoverflow.com/a/27536461/4294462
+  display: block;
+
   // Textareas have their own sizing
   &,
   &--compressed {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed `EuiTextArea`'s CSS box model to no longer render a few extra pixels of strut height