From 8f8675768da1a9ba47b750fe9f98c6dd88af5eb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?= Date: Tue, 12 Nov 2024 17:37:58 +0100 Subject: [PATCH] Fix responsiveness of Misconfigurations data grid (#199679) ## Summary Closes https://github.com/elastic/kibana/issues/195950. Enhances Misconfigurations data grid setting a fixed width on the link and result columns. Additionally, adds a "Open" header above the link in mobile views to visually identify what the link does. ### Screenshots
Wide table Screenshot 2024-11-11 at 18 42 26
Shrink table Screenshot 2024-11-11 at 18 42 34
"Open" header added in mobile-only Screenshot 2024-11-11 at 18 58 02
### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [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) --- .../misconfiguration_findings_details_table.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx index 8d4088b19f9b6..69912c58e4e15 100644 --- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx +++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx @@ -126,11 +126,14 @@ export const MisconfigurationFindingsDetailsTable = memo( return getNavUrlParams({ [queryField]: name }, 'configurations', ['rule.name']); }; + const linkWidth = 40; + const resultWidth = 74; + const columns: Array> = [ { field: 'rule', name: '', - width: '5%', + width: `${linkWidth}`, render: (rule: CspBenchmarkRuleMetadata, finding: MisconfigurationFindingDetailFields) => (