-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Security Solution] Fix a broken header on small screens #156525
[Security Solution] Fix a broken header on small screens #156525
Conversation
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
Pinging @elastic/security-solution (Team: SecuritySolution) |
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [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 @maximpn |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested in Chrome, Safari, and FF locally, and the header now looks good in all browsers. Thank you for the fix, @maximpn 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested locally, LGTM, thank you!
) **Resolves:** elastic#155596 ## Summary It fixes a broken header on small screen after adding rule snooze badge component. *Before:* ![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png) ![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png) ![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png) *After:* ![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png) ![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png) ![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [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 0a9bbe7)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…) (#156650) # Backport This will backport the following commits from `main` to `8.8`: - [[Security Solution] Fix a broken header on small screens (#156525)](#156525) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Maxim Palenov","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-05-04T08:19:36Z","message":"[Security Solution] Fix a broken header on small screens (#156525)\n\n**Resolves:** https://github.com/elastic/kibana/issues/155596\r\n\r\n## Summary\r\n\r\nIt fixes a broken header on small screen after adding rule snooze badge component. \r\n\r\n*Before:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)\r\n\r\n*After:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios\r\n- [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))\r\n- [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))\r\n- [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"0a9bbe7c1fd32765116f508b9d01879ba58482fb","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rules","backport:prev-minor","v8.8.0","v8.9.0"],"number":156525,"url":"https://github.com/elastic/kibana/pull/156525","mergeCommit":{"message":"[Security Solution] Fix a broken header on small screens (#156525)\n\n**Resolves:** https://github.com/elastic/kibana/issues/155596\r\n\r\n## Summary\r\n\r\nIt fixes a broken header on small screen after adding rule snooze badge component. \r\n\r\n*Before:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)\r\n\r\n*After:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios\r\n- [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))\r\n- [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))\r\n- [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"0a9bbe7c1fd32765116f508b9d01879ba58482fb"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/156525","number":156525,"mergeCommit":{"message":"[Security Solution] Fix a broken header on small screens (#156525)\n\n**Resolves:** https://github.com/elastic/kibana/issues/155596\r\n\r\n## Summary\r\n\r\nIt fixes a broken header on small screen after adding rule snooze badge component. \r\n\r\n*Before:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)\r\n\r\n*After:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios\r\n- [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))\r\n- [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))\r\n- [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"0a9bbe7c1fd32765116f508b9d01879ba58482fb"}}]}] BACKPORT--> Co-authored-by: Maxim Palenov <[email protected]>
Resolves: #155596
Summary
It fixes a broken header on small screen after adding rule snooze badge component.
Before:
After:
Checklist