[8.x] Fix responsiveness of Misconfigurations data grid (#199679) (#1…

…99826)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Fix responsiveness of Misconfigurations data grid
(#199679)](#199679)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alberto
Blázquez","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-12T16:37:58Z","message":"Fix
responsiveness of Misconfigurations data grid (#199679)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/195950.\r\n\r\nEnhances
Misconfigurations data grid setting a fixed width on the link\r\nand
result columns.\r\n\r\nAdditionally, adds a \"Open\" header above the
link in mobile views to\r\nvisually identify what the link
does.\r\n\r\n### Screenshots\r\n\r\n<details><summary>Wide
table</summary>\r\n<img width=\"920\" alt=\"Screenshot 2024-11-11 at 18
42
26\"\r\nsrc=\"https://github.com/user-attachments/assets/97f7c6ae-9e4d-4134-963b-4f999b8ef177\">\r\n</details>
\r\n\r\n<details><summary>Shrink table</summary>\r\n<img width=\"390\"
alt=\"Screenshot 2024-11-11 at 18 42
34\"\r\nsrc=\"https://github.com/user-attachments/assets/fddcde02-b753-44f3-9ded-3c886b8854b5\">\r\n</details>
\r\n\r\n<details><summary>\"Open\" header added in
mobile-only</summary>\r\n<img width=\"315\" alt=\"Screenshot 2024-11-11
at 18 58
02\"\r\nsrc=\"https://github.com/user-attachments/assets/fa9df2ea-ed70-43de-b19b-8f80e5f2a965\">\r\n</details>
\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 text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\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":"fd5b40d495f61cf7a81025e58b483dd2bf0ba74b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","csp: quick
win","backport:version","v8.18.0"],"title":"Fix responsiveness of
Misconfigurations data
grid","number":199679,"url":"https://github.com/elastic/kibana/pull/199679","mergeCommit":{"message":"Fix
responsiveness of Misconfigurations data grid (#199679)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/195950.\r\n\r\nEnhances
Misconfigurations data grid setting a fixed width on the link\r\nand
result columns.\r\n\r\nAdditionally, adds a \"Open\" header above the
link in mobile views to\r\nvisually identify what the link
does.\r\n\r\n### Screenshots\r\n\r\n<details><summary>Wide
table</summary>\r\n<img width=\"920\" alt=\"Screenshot 2024-11-11 at 18
42
26\"\r\nsrc=\"https://github.com/user-attachments/assets/97f7c6ae-9e4d-4134-963b-4f999b8ef177\">\r\n</details>
\r\n\r\n<details><summary>Shrink table</summary>\r\n<img width=\"390\"
alt=\"Screenshot 2024-11-11 at 18 42
34\"\r\nsrc=\"https://github.com/user-attachments/assets/fddcde02-b753-44f3-9ded-3c886b8854b5\">\r\n</details>
\r\n\r\n<details><summary>\"Open\" header added in
mobile-only</summary>\r\n<img width=\"315\" alt=\"Screenshot 2024-11-11
at 18 58
02\"\r\nsrc=\"https://github.com/user-attachments/assets/fa9df2ea-ed70-43de-b19b-8f80e5f2a965\">\r\n</details>
\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 text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\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":"fd5b40d495f61cf7a81025e58b483dd2bf0ba74b"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199679","number":199679,"mergeCommit":{"message":"Fix
responsiveness of Misconfigurations data grid (#199679)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/195950.\r\n\r\nEnhances
Misconfigurations data grid setting a fixed width on the link\r\nand
result columns.\r\n\r\nAdditionally, adds a \"Open\" header above the
link in mobile views to\r\nvisually identify what the link
does.\r\n\r\n### Screenshots\r\n\r\n<details><summary>Wide
table</summary>\r\n<img width=\"920\" alt=\"Screenshot 2024-11-11 at 18
42
26\"\r\nsrc=\"https://github.com/user-attachments/assets/97f7c6ae-9e4d-4134-963b-4f999b8ef177\">\r\n</details>
\r\n\r\n<details><summary>Shrink table</summary>\r\n<img width=\"390\"
alt=\"Screenshot 2024-11-11 at 18 42
34\"\r\nsrc=\"https://github.com/user-attachments/assets/fddcde02-b753-44f3-9ded-3c886b8854b5\">\r\n</details>
\r\n\r\n<details><summary>\"Open\" header added in
mobile-only</summary>\r\n<img width=\"315\" alt=\"Screenshot 2024-11-11
at 18 58
02\"\r\nsrc=\"https://github.com/user-attachments/assets/fa9df2ea-ed70-43de-b19b-8f80e5f2a965\">\r\n</details>
\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 text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\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":"fd5b40d495f61cf7a81025e58b483dd2bf0ba74b"}},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alberto Blázquez <[email protected]>

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<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)`,
       },
     ];