[Security Solution] Custom Query field overflows the viewport and cannot be completely visualized or edited when the query is too long #178615
Assignees
Labels
8.18 candidate
bug
Fixes for quality problems that affect the customer experience
Feature:Rule Creation
Security Solution Detection Rule Creation workflow
Feature:Rule Edit
Security Solution Detection Rule Editing workflow
impact:medium
Addressing this issue will have a medium level of impact on the quality/strength of our product.
Team:Detection Rule Management
Security Detection Rule Management Team
Team:Detections and Resp
Security Detection Response Team
Team: SecuritySolution
Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.
v8.17.1
v8.18.0
Comments
jpdjere
added
bug
|
Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management) |
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
banderror
added
impact:low
jpdjere
added
8.17 candidate
impact:medium
|
Hi @jpdjere On the other hand, I tried doing the same in Firefox, and, although the issue described here doesn't occur, the way the text of the rule is displayed is far from ideal, I would say. Please take a look at my screenshot below. It looks like Firefox removes end of line characters and the whole text is cluttered in one long line. I checked that the box is scrollable, though (even with much longer texts).
Please help me confirm this. Also, if you see the Firefox issue, we'll have to decide what to do with it, leave as it is (there no issue with scrolling or editing after all), or fix it here, or maybe open a separate ticket. |
|
@jkelas Just to double-check, on your screenshot above we have a multi-line query string that is displayed as a single-line string, and it only happens in Firefox? |
|
@banderror Exactly. I am copying the query text from the Details above. I am pasting it in Chrome and Firefox. In Chrome it looks good. In Firefox it looks bad. |
|
Confirmed the behavior in both Chrome and Firefox, and Safari as well: Chrome: looks goodScreen.Recording.2024-11-29.at.10.01.55.AM.movFirefox: is scrollable but query is displayed as single-line stringScreen.Recording.2024-11-29.at.10.02.52.AM.movWhen rule is saved, it's properly saved as a multi-line string: Screen.Recording.2024-11-29.at.10.09.46.AM.movSafari: looks goodScreen.Recording.2024-11-29.at.10.06.25.AM.mov |
|
@jkelas @pborgonovi Ok, thanks. Let's try to fix this in Firefox, but the priority is lower than fixing: |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Dec 13, 2024
…t to `pre` (elastic#203993) **Resolves: elastic#178615** ## Summary Change the way kbnQueryBar__textarea--autoHeight css class handles the whitespace. Instead of `normal` use `pre`. This improves the behavior for long pre-formatted texts in the query field in Firefox. It doesn't affect Chrome nor Safari. ## BEFORE ### Chrome <img width="1013" alt="image" src="https://github.com/user-attachments/assets/c56be529-b55d-4170-a6d1-4d7b01d98b3e" /> ### Safari <img width="925" alt="image" src="https://github.com/user-attachments/assets/2697c72f-a063-49b8-8501-80e90ef0733f" /> ### Firefox **(the issue is here)** <img width="927" alt="image" src="https://github.com/user-attachments/assets/ed896f71-5303-4ef4-9899-3d46b3e99af7" /> ## AFTER ### Chrome <img width="1014" alt="image" src="https://github.com/user-attachments/assets/71259eb8-c984-4c7f-99a7-d4f528568f3b" /> ### Safari <img width="942" alt="image" src="https://github.com/user-attachments/assets/998499a4-6480-4407-8e40-a897c0d2e7b8" /> ### Firefox **(Note that the issue is gone)** <img width="924" alt="image" src="https://github.com/user-attachments/assets/f79f86d5-726d-4f7d-9c06-d2e003cfcd97" /> Note: please notice that for some reason, with this setting, Firefox additionally presents the whole text at the bottom as one line. But that should be OK. <img width="831" alt="image" src="https://github.com/user-attachments/assets/43198645-7d3e-4f74-a59e-9577531349a6" /> (cherry picked from commit e287528)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Dec 13, 2024
…t to `pre` (elastic#203993) **Resolves: elastic#178615** ## Summary Change the way kbnQueryBar__textarea--autoHeight css class handles the whitespace. Instead of `normal` use `pre`. This improves the behavior for long pre-formatted texts in the query field in Firefox. It doesn't affect Chrome nor Safari. ## BEFORE ### Chrome <img width="1013" alt="image" src="https://github.com/user-attachments/assets/c56be529-b55d-4170-a6d1-4d7b01d98b3e" /> ### Safari <img width="925" alt="image" src="https://github.com/user-attachments/assets/2697c72f-a063-49b8-8501-80e90ef0733f" /> ### Firefox **(the issue is here)** <img width="927" alt="image" src="https://github.com/user-attachments/assets/ed896f71-5303-4ef4-9899-3d46b3e99af7" /> ## AFTER ### Chrome <img width="1014" alt="image" src="https://github.com/user-attachments/assets/71259eb8-c984-4c7f-99a7-d4f528568f3b" /> ### Safari <img width="942" alt="image" src="https://github.com/user-attachments/assets/998499a4-6480-4407-8e40-a897c0d2e7b8" /> ### Firefox **(Note that the issue is gone)** <img width="924" alt="image" src="https://github.com/user-attachments/assets/f79f86d5-726d-4f7d-9c06-d2e003cfcd97" /> Note: please notice that for some reason, with this setting, Firefox additionally presents the whole text at the bottom as one line. But that should be OK. <img width="831" alt="image" src="https://github.com/user-attachments/assets/43198645-7d3e-4f74-a59e-9577531349a6" /> (cherry picked from commit e287528)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Dec 13, 2024
…t to `pre` (elastic#203993) **Resolves: elastic#178615** ## Summary Change the way kbnQueryBar__textarea--autoHeight css class handles the whitespace. Instead of `normal` use `pre`. This improves the behavior for long pre-formatted texts in the query field in Firefox. It doesn't affect Chrome nor Safari. ## BEFORE ### Chrome <img width="1013" alt="image" src="https://github.com/user-attachments/assets/c56be529-b55d-4170-a6d1-4d7b01d98b3e" /> ### Safari <img width="925" alt="image" src="https://github.com/user-attachments/assets/2697c72f-a063-49b8-8501-80e90ef0733f" /> ### Firefox **(the issue is here)** <img width="927" alt="image" src="https://github.com/user-attachments/assets/ed896f71-5303-4ef4-9899-3d46b3e99af7" /> ## AFTER ### Chrome <img width="1014" alt="image" src="https://github.com/user-attachments/assets/71259eb8-c984-4c7f-99a7-d4f528568f3b" /> ### Safari <img width="942" alt="image" src="https://github.com/user-attachments/assets/998499a4-6480-4407-8e40-a897c0d2e7b8" /> ### Firefox **(Note that the issue is gone)** <img width="924" alt="image" src="https://github.com/user-attachments/assets/f79f86d5-726d-4f7d-9c06-d2e003cfcd97" /> Note: please notice that for some reason, with this setting, Firefox additionally presents the whole text at the bottom as one line. But that should be OK. <img width="831" alt="image" src="https://github.com/user-attachments/assets/43198645-7d3e-4f74-a59e-9577531349a6" /> (cherry picked from commit e287528)
kibanamachine
added a commit
that referenced
this issue
Dec 13, 2024
…toheight to `pre` (#203993) (#204172) # Backport This will backport the following commits from `main` to `8.17`: - [[Security Solution] Change handling whitespace for textarea autoheight to `pre` (#203993)](#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":"[email protected]"},"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 <[email protected]>
kibanamachine
added a commit
that referenced
this issue
Dec 13, 2024
…oheight to `pre` (#203993) (#204173) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Change handling whitespace for textarea autoheight to `pre` (#203993)](#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":"[email protected]"},"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 <[email protected]>
kibanamachine
added a commit
that referenced
this issue
Dec 13, 2024
…toheight 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)](#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":"[email protected]"},"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 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Epics: https://github.com/elastic/security-team/issues/1974 (internal), #174168
Kibana version: Latest and all previous
PR: #203993
Summary
Describe the bug:
When creating or editing a Custom Query rule, if the query is long enough so that it exceeds the maximum height of query field, the content is truncated and the field cannot be scrolled downwards. This prevents the user from seeing or modifying the hidden part of the query, at the end.
Steps to reproduce:
host.os.type:linux and event.category:file and event.action:("creation" or "file_create_event") and file.path:( /etc/systemd/system/* or /usr/local/lib/systemd/system/* or /lib/systemd/system/* or /usr/lib/systemd/system/* or /home/*/.config/systemd/user/* ) and not ( process.name:( "dpkg" or "dockerd" or "rpm" or "snapd" or "yum" or "exe" or "dnf" or "dnf-automatic" or python* or "puppetd" or "elastic-agent" or "cinc-client" or "chef-client" or "pacman" or "puppet" or "cloudflared" or "packagekitd" or "podman" ) or file.extension:("swp" or "swpx") ) and not ( process.name:( "dpkg" or "dockerd" or "rpm" or "snapd" or "yum" or "exe" or "dnf" or "dnf-automatic" or python* or "puppetd" or "elastic-agent" or "cinc-client" or "chef-client" or "pacman" or "puppet" or "cloudflared" or "packagekitd" or "podman" ) or file.extension:("swp" or "swpx") ) and not ( process.name:( "dpkg" or "dockerd" or "rpm" or "snapd" or "yum" or "exe" or "dnf" or "dnf-automatic" or python* or "puppetd" or "elastic-agent" or "cinc-client" or "chef-client" or "pacman" or "puppet" or "cloudflared" or "packagekitd" or "podman" ) or file.extension:("swp" or "swpx") ) and not ( process.name:( "dpkg" or "dockerd" or "rpm" or "snapd" or "yum" or "exe" or "dnf" or "dnf-automatic" or python* or "puppetd" or "elastic-agent" or "cinc-client" or "chef-client" or "pacman" or "puppet" or "cloudflared" or "packagekitd" or "podman" ) or file.extension:("swp" or "swpx") )Expected behavior:
If the query is long enough, users should be able to scroll down through the field containing the field.
Screenshots (if relevant):
Any additional context:
This bug becomes especially critical in the context of the Prebuilt Rule Customization epic, since we will allow users to customize their Custom Query prebuilt rules. It is almost a certainty that users will install Custom Query rules with very long queries, and they should be able to customize them with a good UX/UI.
The text was updated successfully, but these errors were encountered: