[ML] Page titles overlapping with date picker #197892
Comments
alvarezmelissa87
added
:ml
bug
|
Pinging @elastic/ml-ui (:ml) |
|
Looks like the changes may have been due to this EUI change. |
This was referenced Oct 31, 2024
Merged
|
Interim/partial solution, that at least prevents the majority of overlapping: #198625 |
cee-chen
added a commit
that referenced
this issue
Nov 4, 2024
## Summary Partially addresses #197892, but not fully - elastic/eui#8109 and elastic/eui#8110 will need to be merged in first and in Kibana main as well. We can hold this PR until then if desired to confirm that the final UI/responsive UX works as expected. | Before | After | |--------|--------| | <img width="974" alt="" src="https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d"> | <img width="983" alt="" src="https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418"> | ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [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)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 4, 2024
…8625) ## Summary Partially addresses elastic#197892, but not fully - elastic/eui#8109 and elastic/eui#8110 will need to be merged in first and in Kibana main as well. We can hold this PR until then if desired to confirm that the final UI/responsive UX works as expected. | Before | After | |--------|--------| | <img width="974" alt="" src="https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d"> | <img width="983" alt="" src="https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418"> | ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [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 4fdc70b)
kibanamachine
added a commit
that referenced
this issue
Nov 4, 2024
) (#198835) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Fix page header right side items flex responsiveness (#198625)](#198625) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Cee Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-04T17:38:07Z","message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\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":"4fdc70bf8c3b729733415820b48248abbfb5ddf8","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0"],"title":"[ML] Fix page header right side items flex responsiveness","number":198625,"url":"https://github.com/elastic/kibana/pull/198625","mergeCommit":{"message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\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":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198625","number":198625,"mergeCommit":{"message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\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":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
cee-chen
added a commit
that referenced
this issue
Nov 4, 2024
`v97.0.0-backport.1`⏩`v97.0.0-backport.2` This is an 8.16 release intended to help fix #197892 flagged by the ML team. --- ## [`v97.0.0-backport.2`](https://github.com/elastic/eui/releases/v97.0.0-backport.2) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating ([#8109](elastic/eui#8109)) - Fixed a bug with `EuiPageHeader`'s `rightSideItems` responsiveness where single items could overflow past the intended max width ([#8110](elastic/eui#8110))
cee-chen
added a commit
to cee-chen/kibana
that referenced
this issue
Nov 5, 2024
…8625) ## Summary Partially addresses elastic#197892, but not fully - elastic/eui#8109 and elastic/eui#8110 will need to be merged in first and in Kibana main as well. We can hold this PR until then if desired to confirm that the final UI/responsive UX works as expected. | Before | After | |--------|--------| | <img width="974" alt="" src="https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d"> | <img width="983" alt="" src="https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418"> | ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [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 4fdc70b) # Conflicts: # x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
cee-chen
added a commit
that referenced
this issue
Nov 5, 2024
…8625) (#198882) # Backport This will backport the following commits from `main` to `8.16`: - [ML] Fix page header right side items flex responsiveness (#198625) (4fdc70b) <!--- Backport version: 8.9.8 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Cee Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-04T17:38:07Z","message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\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":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[]}] BACKPORT-->
|
Tested now that the EUI changes detailed in #197892 (comment) are in KIbana (eui v97.3.1), and the titles in the ML and AIOps Labs pages are now all looking good, with no overlap with the date picker controls as the page width decreases. Thanks for the fixes @cee-chen ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Page titles are being overlapped by the date picker in aiops and some other ML pages. I've attached screen shots for each.
Kibana version:
Latest
Screenshots (if relevant):
AIOPS:
Anomaly Detection:
This is likely an EUI issue as it's occurring outside ML pages as well:
Data Drift view:
The text was updated successfully, but these errors were encountered: