mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
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 <details><summary>Wide table</summary> <img width="920" alt="Screenshot 2024-11-11 at 18 42 26" src="https://github.com/user-attachments/assets/97f7c6ae-9e4d-4134-963b-4f999b8ef177"> </details> <details><summary>Shrink table</summary> <img width="390" alt="Screenshot 2024-11-11 at 18 42 34" src="https://github.com/user-attachments/assets/fddcde02-b753-44f3-9ded-3c886b8854b5"> </details> <details><summary>"Open" header added in mobile-only</summary> <img width="315" alt="Screenshot 2024-11-11 at 18 58 02" src="https://github.com/user-attachments/assets/fa9df2ea-ed70-43de-b19b-8f80e5f2a965"> </details> ### 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)
This commit is contained in:
parent
839a9759ea
commit
fd5b40d495
1 changed files with 6 additions and 3 deletions
|
@ -126,11 +126,14 @@ export const MisconfigurationFindingsDetailsTable = memo(
|
|||
return getNavUrlParams({ [queryField]: name }, 'configurations', ['rule.name']);
|
||||
};
|
||||
|
||||
const linkWidth = 40;
|
||||
const resultWidth = 74;
|
||||
|
||||
const columns: Array<EuiBasicTableColumn<MisconfigurationFindingDetailFields>> = [
|
||||
{
|
||||
field: 'rule',
|
||||
name: '',
|
||||
width: '5%',
|
||||
width: `${linkWidth}`,
|
||||
render: (rule: CspBenchmarkRuleMetadata, finding: MisconfigurationFindingDetailFields) => (
|
||||
<SecuritySolutionLinkAnchor
|
||||
deepLinkId={SecurityPageName.cloudSecurityPostureFindings}
|
||||
|
@ -160,7 +163,7 @@ export const MisconfigurationFindingsDetailsTable = memo(
|
|||
defaultMessage: 'Result',
|
||||
}
|
||||
),
|
||||
width: '10%',
|
||||
width: `${resultWidth}px`,
|
||||
},
|
||||
{
|
||||
field: 'rule',
|
||||
|
@ -171,7 +174,7 @@ export const MisconfigurationFindingsDetailsTable = memo(
|
|||
defaultMessage: 'Rule',
|
||||
}
|
||||
),
|
||||
width: '90%',
|
||||
width: `calc(100% - ${linkWidth + resultWidth}px)`,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue