[8.16] [Security Solution] Change handling whitespace for textarea autoheight to `pre` (#203993) (#204171)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Security Solution] Change handling whitespace for textarea
autoheight to `pre`
(#203993)](https://github.com/elastic/kibana/pull/203993)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jacek
Kolezynski","email":"jacek.kolezynski@elastic.co"},"sourceCommit":{"committedDate":"2024-12-13T08:35:42Z","message":"[Security
Solution] Change handling whitespace for textarea autoheight to `pre`
(#203993)\n\n**Resolves: #178615**\n\n## Summary\n\nChange the way
kbnQueryBar__textarea--autoHeight css class handles the\nwhitespace.
Instead of `normal` use `pre`. This improves the\nbehavior for long
pre-formatted texts in the query field in Firefox. It doesn't
affect\nChrome nor Safari.\n\n\n## BEFORE\n### Chrome \n<img
width=\"1013\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c56be529-b55d-4170-a6d1-4d7b01d98b3e\"\n/>\n\n###
Safari\n<img width=\"925\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/2697c72f-a063-49b8-8501-80e90ef0733f\"\n/>\n\n###
Firefox **(the issue is here)**\n<img width=\"927\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/ed896f71-5303-4ef4-9899-3d46b3e99af7\"\n/>\n\n\n##
AFTER\n### Chrome\n<img width=\"1014\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/71259eb8-c984-4c7f-99a7-d4f528568f3b\"\n/>\n\n###
Safari\n<img width=\"942\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/998499a4-6480-4407-8e40-a897c0d2e7b8\"\n/>\n\n###
Firefox **(Note that the issue is gone)**\n<img width=\"924\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/f79f86d5-726d-4f7d-9c06-d2e003cfcd97\"\n/>\n\nNote:
please notice that for some reason, with this setting,
Firefox\nadditionally presents the whole text at the bottom as one line.
But that\nshould be OK.\n<img width=\"831\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/43198645-7d3e-4f74-a59e-9577531349a6\"\n/>","sha":"e287528eda0ba1a3056c8693baeb8e7f6588342e","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rule
Management","backport:version","v8.18.0","v8.16.3","v8.17.1"],"title":"[Security
Solution] Change handling whitespace for textarea autoheight to
`pre`","number":203993,"url":"https://github.com/elastic/kibana/pull/203993","mergeCommit":{"message":"[Security
Solution] Change handling whitespace for textarea autoheight to `pre`
(#203993)\n\n**Resolves: #178615**\n\n## Summary\n\nChange the way
kbnQueryBar__textarea--autoHeight css class handles the\nwhitespace.
Instead of `normal` use `pre`. This improves the\nbehavior for long
pre-formatted texts in the query field in Firefox. It doesn't
affect\nChrome nor Safari.\n\n\n## BEFORE\n### Chrome \n<img
width=\"1013\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c56be529-b55d-4170-a6d1-4d7b01d98b3e\"\n/>\n\n###
Safari\n<img width=\"925\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/2697c72f-a063-49b8-8501-80e90ef0733f\"\n/>\n\n###
Firefox **(the issue is here)**\n<img width=\"927\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/ed896f71-5303-4ef4-9899-3d46b3e99af7\"\n/>\n\n\n##
AFTER\n### Chrome\n<img width=\"1014\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/71259eb8-c984-4c7f-99a7-d4f528568f3b\"\n/>\n\n###
Safari\n<img width=\"942\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/998499a4-6480-4407-8e40-a897c0d2e7b8\"\n/>\n\n###
Firefox **(Note that the issue is gone)**\n<img width=\"924\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/f79f86d5-726d-4f7d-9c06-d2e003cfcd97\"\n/>\n\nNote:
please notice that for some reason, with this setting,
Firefox\nadditionally presents the whole text at the bottom as one line.
But that\nshould be OK.\n<img width=\"831\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/43198645-7d3e-4f74-a59e-9577531349a6\"\n/>","sha":"e287528eda0ba1a3056c8693baeb8e7f6588342e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.16","8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203993","number":203993,"mergeCommit":{"message":"[Security
Solution] Change handling whitespace for textarea autoheight to `pre`
(#203993)\n\n**Resolves: #178615**\n\n## Summary\n\nChange the way
kbnQueryBar__textarea--autoHeight css class handles the\nwhitespace.
Instead of `normal` use `pre`. This improves the\nbehavior for long
pre-formatted texts in the query field in Firefox. It doesn't
affect\nChrome nor Safari.\n\n\n## BEFORE\n### Chrome \n<img
width=\"1013\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c56be529-b55d-4170-a6d1-4d7b01d98b3e\"\n/>\n\n###
Safari\n<img width=\"925\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/2697c72f-a063-49b8-8501-80e90ef0733f\"\n/>\n\n###
Firefox **(the issue is here)**\n<img width=\"927\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/ed896f71-5303-4ef4-9899-3d46b3e99af7\"\n/>\n\n\n##
AFTER\n### Chrome\n<img width=\"1014\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/71259eb8-c984-4c7f-99a7-d4f528568f3b\"\n/>\n\n###
Safari\n<img width=\"942\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/998499a4-6480-4407-8e40-a897c0d2e7b8\"\n/>\n\n###
Firefox **(Note that the issue is gone)**\n<img width=\"924\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/f79f86d5-726d-4f7d-9c06-d2e003cfcd97\"\n/>\n\nNote:
please notice that for some reason, with this setting,
Firefox\nadditionally presents the whole text at the bottom as one line.
But that\nshould be OK.\n<img width=\"831\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/43198645-7d3e-4f74-a59e-9577531349a6\"\n/>","sha":"e287528eda0ba1a3056c8693baeb8e7f6588342e"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jacek Kolezynski <jacek.kolezynski@elastic.co>

src/plugins/unified_search/public/query_string_input/query_string_input.scss

@@ -51,7 +51,7 @@
   &.kbnQueryBar__textarea--autoHeight {
     overflow-x: auto;
     overflow-y: auto;
-    white-space: normal;
+    white-space: pre;
     max-height: calc(35vh - 100px);
     min-height: $euiFormControlHeight;
   }