[Security Solution] Fix broken Rule Details page when filters are extremely long #153338
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jpdjere
force-pushed
the
filters-max-width
branch
from
d035ae9
to
1abd74e
Compare
jpdjere
added
bug
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
banderror
added
Feature:Rule Details
|
@xcrzx Thanks for catching that. Corrected the property to use simply |
💚 Build Succeeded
Metrics [docs]Async chunks
Unknown metric groupsESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: cc @jpdjere |
xcrzx
approved these changes
Mar 23, 2023
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 23, 2023
…remely long (elastic#153338) Fixes elastic#145076 ## Summary When creating a rule that has a **filter** which is extremely long, the Rules Detail UI breaks and information is lost, out of view of the user, due to a broken layout. See connected issue for examples, or below. This PR fixes this bug via a a couple simple CSS fixes in the related components. # Screenshots ## Desktop **Before** <img width="1713" alt="image" src="https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png"> **After** <img width="1723" alt="image" src="https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png"> ## Mobile **Before** <img width="481" alt="image" src="https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png"> **After** <img width="486" alt="image" src="https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png"> ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit 39efe02)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Mar 23, 2023
…re extremely long (#153338) (#153537) # Backport This will backport the following commits from `main` to `8.7`: - [[Security Solution] Fix broken Rule Details page when filters are extremely long (#153338)](#153338) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Juan Pablo Djeredjian","email":"jpdjeredjian@gmail.com"},"sourceCommit":{"committedDate":"2023-03-23T12:23:00Z","message":"[Security Solution] Fix broken Rule Details page when filters are extremely long (#153338)\n\nFixes #145076 Summary\r\n\r\nWhen creating a rule that has a **filter** which is extremely long, the\r\nRules Detail UI breaks and information is lost, out of view of the user,\r\ndue to a broken layout. See connected issue for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple simple CSS fixes in the related\r\ncomponents.\r\n\r\n# Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img width=\"1723\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n## Mobile\r\n\r\n**Before**\r\n<img width=\"481\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img width=\"486\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"39efe026ee8926a412ee0e4206ba4831ea670923","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rules","Feature:Rule Details","v8.8.0","v8.7.1"],"number":153338,"url":"#153338 Solution] Fix broken Rule Details page when filters are extremely long (#153338)\n\nFixes #145076 Summary\r\n\r\nWhen creating a rule that has a **filter** which is extremely long, the\r\nRules Detail UI breaks and information is lost, out of view of the user,\r\ndue to a broken layout. See connected issue for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple simple CSS fixes in the related\r\ncomponents.\r\n\r\n# Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img width=\"1723\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n## Mobile\r\n\r\n**Before**\r\n<img width=\"481\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img width=\"486\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"39efe026ee8926a412ee0e4206ba4831ea670923"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/153338","number":153338,"mergeCommit":{"message":"[Security Solution] Fix broken Rule Details page when filters are extremely long (#153338)\n\nFixes #145076 Summary\r\n\r\nWhen creating a rule that has a **filter** which is extremely long, the\r\nRules Detail UI breaks and information is lost, out of view of the user,\r\ndue to a broken layout. See connected issue for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple simple CSS fixes in the related\r\ncomponents.\r\n\r\n# Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img width=\"1723\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n## Mobile\r\n\r\n**Before**\r\n<img width=\"481\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img width=\"486\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"39efe026ee8926a412ee0e4206ba4831ea670923"}},{"branch":"8.7","label":"v8.7.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Juan Pablo Djeredjian <jpdjeredjian@gmail.com>
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
![https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img](https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img){kind=link}
![https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n##](https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n##){kind=link}
![https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img](https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img){kind=link}
![https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n###](https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n###){kind=link}
jpdjere
added a commit
to jpdjere/kibana
that referenced
this pull request
Apr 3, 2023
…remely long (elastic#153338) Fixes elastic#145076 ## Summary When creating a rule that has a **filter** which is extremely long, the Rules Detail UI breaks and information is lost, out of view of the user, due to a broken layout. See connected issue for examples, or below. This PR fixes this bug via a a couple simple CSS fixes in the related components. # Screenshots ## Desktop **Before** <img width="1713" alt="image" src="https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png"> **After** <img width="1723" alt="image" src="https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png"> ## Mobile **Before** <img width="481" alt="image" src="https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png"> **After** <img width="486" alt="image" src="https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png"> ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit 39efe02)
jpdjere
added a commit
that referenced
this pull request
Apr 3, 2023
…re extremely long (#153338) (#154217) # Backport This will backport the following commits from `main` to `8.7`: - [[Security Solution] Fix broken Rule Details page when filters are extremely long (#153338)](#153338) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Juan Pablo Djeredjian","email":"jpdjeredjian@gmail.com"},"sourceCommit":{"committedDate":"2023-03-23T12:23:00Z","message":"[Security Solution] Fix broken Rule Details page when filters are extremely long (#153338)\n\nFixes #145076 Summary\r\n\r\nWhen creating a rule that has a **filter** which is extremely long, the\r\nRules Detail UI breaks and information is lost, out of view of the user,\r\ndue to a broken layout. See connected issue for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple simple CSS fixes in the related\r\ncomponents.\r\n\r\n# Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img width=\"1723\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n## Mobile\r\n\r\n**Before**\r\n<img width=\"481\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img width=\"486\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"39efe026ee8926a412ee0e4206ba4831ea670923","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rules","Feature:Rule Details","v8.8.0","v8.7.1"],"number":153338,"url":"#153338 Solution] Fix broken Rule Details page when filters are extremely long (#153338)\n\nFixes #145076 Summary\r\n\r\nWhen creating a rule that has a **filter** which is extremely long, the\r\nRules Detail UI breaks and information is lost, out of view of the user,\r\ndue to a broken layout. See connected issue for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple simple CSS fixes in the related\r\ncomponents.\r\n\r\n# Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img width=\"1723\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n## Mobile\r\n\r\n**Before**\r\n<img width=\"481\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img width=\"486\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"39efe026ee8926a412ee0e4206ba4831ea670923"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/153338","number":153338,"mergeCommit":{"message":"[Security Solution] Fix broken Rule Details page when filters are extremely long (#153338)\n\nFixes #145076 Summary\r\n\r\nWhen creating a rule that has a **filter** which is extremely long, the\r\nRules Detail UI breaks and information is lost, out of view of the user,\r\ndue to a broken layout. See connected issue for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple simple CSS fixes in the related\r\ncomponents.\r\n\r\n# Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img width=\"1723\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n## Mobile\r\n\r\n**Before**\r\n<img width=\"481\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img width=\"486\" alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"39efe026ee8926a412ee0e4206ba4831ea670923"}},{"branch":"8.7","label":"v8.7.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/153537","number":153537,"state":"MERGED","mergeCommit":{"sha":"cfdc7d2a83298123bb284b4d77a80ed4a2d03c36","message":"[8.7] [Security Solution] Fix broken Rule Details page when filters are extremely long (#153338) (#153537)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.7`:\n- [[Security Solution] Fix broken Rule Details page when filters are\nextremely long (#153338)](https://github.com/elastic/kibana/pull/153338)\n\n<!--- Backport version: 8.9.7 -->\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT [{\"author\":{\"name\":\"Juan Pablo\nDjeredjian\",\"email\":\"jpdjeredjian@gmail.com\"},\"sourceCommit\":{\"committedDate\":\"2023-03-23T12:23:00Z\",\"message\":\"[Security\nSolution] Fix broken Rule Details page when filters are extremely long\n(#153338)\\n\\nFixes\nhttps://github.com//issues/145076\\r\\n\\r\\n##\nSummary\\r\\n\\r\\nWhen creating a rule that has a **filter** which is\nextremely long, the\\r\\nRules Detail UI breaks and information is lost,\nout of view of the user,\\r\\ndue to a broken layout. See connected issue\nfor examples, or below.\\r\\n\\r\\nThis PR fixes this bug via a a couple\nsimple CSS fixes in the related\\r\\ncomponents.\\r\\n\\r\\n#\nScreenshots\\r\\n\\r\\n## Desktop\\r\\n\\r\\n**Before**\\r\\n<img width=\\\"1713\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img width=\\\"481\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete any items that are not applicable to this\nPR.\\r\\n\\r\\n- [x] Any UI touched in this PR does not create any new axe\nfailures\\r\\n(run axe in\nbrowser:\\r\\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\\r\\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\\r\\n-\n[x] This renders correctly on smaller devices using a\nresponsive\\r\\nlayout. (You can test this [in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x] This was checked for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\",\"sha\":\"39efe026ee8926a412ee0e4206ba4831ea670923\",\"branchLabelMapping\":{\"^v8.8.0$\":\"main\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"bug\",\"release_note:fix\",\"Team:Detections\nand Resp\",\"Team: SecuritySolution\",\"Team:Detection Rules\",\"Feature:Rule\nDetails\",\"v8.8.0\",\"v8.7.1\"],\"number\":153338,\"url\":\"#153338 Fix broken Rule Details page when filters are extremely long\n(#153338)\\n\\nFixes\nhttps://github.com//issues/145076\\r\\n\\r\\n##\nSummary\\r\\n\\r\\nWhen creating a rule that has a **filter** which is\nextremely long, the\\r\\nRules Detail UI breaks and information is lost,\nout of view of the user,\\r\\ndue to a broken layout. See connected issue\nfor examples, or below.\\r\\n\\r\\nThis PR fixes this bug via a a couple\nsimple CSS fixes in the related\\r\\ncomponents.\\r\\n\\r\\n#\nScreenshots\\r\\n\\r\\n## Desktop\\r\\n\\r\\n**Before**\\r\\n<img width=\\\"1713\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img width=\\\"481\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete any items that are not applicable to this\nPR.\\r\\n\\r\\n- [x] Any UI touched in this PR does not create any new axe\nfailures\\r\\n(run axe in\nbrowser:\\r\\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\\r\\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\\r\\n-\n[x] This renders correctly on smaller devices using a\nresponsive\\r\\nlayout. (You can test this [in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x] This was checked for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\",\"sha\":\"39efe026ee8926a412ee0e4206ba4831ea670923\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[\"8.7\"],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v8.8.0\",\"labelRegex\":\"^v8.8.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/153338\",\"number\":153338,\"mergeCommit\":{\"message\":\"[Security\nSolution] Fix broken Rule Details page when filters are extremely long\n(#153338)\\n\\nFixes\nhttps://github.com//issues/145076\\r\\n\\r\\n##\nSummary\\r\\n\\r\\nWhen creating a rule that has a **filter** which is\nextremely long, the\\r\\nRules Detail UI breaks and information is lost,\nout of view of the user,\\r\\ndue to a broken layout. See connected issue\nfor examples, or below.\\r\\n\\r\\nThis PR fixes this bug via a a couple\nsimple CSS fixes in the related\\r\\ncomponents.\\r\\n\\r\\n#\nScreenshots\\r\\n\\r\\n## Desktop\\r\\n\\r\\n**Before**\\r\\n<img width=\\\"1713\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img width=\\\"481\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete any items that are not applicable to this\nPR.\\r\\n\\r\\n- [x] Any UI touched in this PR does not create any new axe\nfailures\\r\\n(run axe in\nbrowser:\\r\\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\\r\\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\\r\\n-\n[x] This renders correctly on smaller devices using a\nresponsive\\r\\nlayout. (You can test this [in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x] This was checked for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\",\"sha\":\"39efe026ee8926a412ee0e4206ba4831ea670923\"}},{\"branch\":\"8.7\",\"label\":\"v8.7.1\",\"labelRegex\":\"^v(\\\\d+).(\\\\d+).\\\\d+$\",\"isSourceBranch\":false,\"state\":\"NOT_CREATED\"}]}]\nBACKPORT-->\n\nCo-authored-by: Juan Pablo Djeredjian <jpdjeredjian@gmail.com>"}}]}] BACKPORT-->
![https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img](https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img){kind=link}
![https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete](https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #145076
Summary
When creating a rule that has a filter which is extremely long, the Rules Detail UI breaks and information is lost, out of view of the user, due to a broken layout. See connected issue for examples, or below.
This PR fixes this bug via a a couple simple CSS fixes in the related components.
Screenshots
Desktop
Before
After
Mobile
Before
After
Checklist
Delete any items that are not applicable to this PR.