[Cloud Security] fix misconfiguration and vulnerability flyout UI issues by alexreal1314 · Pull Request #225862 · elastic/kibana

alexreal1314 · 2025-06-30T15:12:13Z

Summary

This PR fixes the following issues:

misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the design.
fix 'About' section in misconfiguration tab - fix sub titles sizes and spacing, remove link icon from 'show rule details' text.
fix Resource table rendering to handle properly package fields with array of single item - copy icon should be rendered in this case.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the design.

Screenshot

title and sub title fix

**vulnerability flyout - overview tab resource section fix **

misconfiguration flyout - about section spacing and font size issues fix

elasticmachine · 2025-06-30T15:14:10Z

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

Copilot

Pull Request Overview

This PR aligns the font sizes of the expandable flyout’s vulnerability title and CVE subtitle with the Figma design.

Main flyout title size bumped from small to medium.
Vulnerability ID header size changed from medium to small and styling updated to use theme values.
Link styling refactored to a flex container using css and theme-based dimensions.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx	Updated `<EuiTitle>` size from "s" to "m" for the main flyout title
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_right/header.tsx	Changed `<EuiTitle>` size to "s", swapped hardcoded CSS for theme values, and refactored link/container styling

Comments suppressed due to low confidence (1)

x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_right/header.tsx:106

There's a mismatched JSX tag here: a closing without a corresponding opening in this branch. Ensure the vulnerability ID remains wrapped correctly and that all JSX tags are properly paired.

          </EuiLink>

PhilippeOberti · 2025-07-01T09:40:26Z

...olutions/security/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx

    const titleComponent = useMemo(() => {
      return (
-        <EuiTitle size="s" data-test-subj={`${dataTestSubj}Text`}>
+        <EuiTitle size="m" data-test-subj={`${dataTestSubj}Text`}>


I don't think we want to make this change like so. The FlyoutTitle component is indeed shared between all the flyout (AI4DSOC, event and alert, host, user, network...) and we haven't received a request to make this title bigger.

2 options:

could we go back to UIUX and make sure that they really want a bigger text? I'm asking because for very long texts, the header now takes even more vertical space...

if the cloud security team wants this, I'd suggest making the title size a optional property, that we'd default to s to not change the behavior on any other flyout

@PhilippeOberti Hi, yes I know it is used by different flyouts, the design does look like it supposed to be medium size but I removed this for now, once we are done with the QA cycle i'll recheck it again as its not that critical.

Ok, thanks! I dismissed my Request changes review to unblock the PR :)

…yout fix resource section UI in the vulnerability expandable flyout

The changes to the file owned by the Threat Hunting Investigations team were reverted.

elasticmachine · 2025-07-01T12:00:59Z

💚 Build Succeeded

Buildkite Build
Commit: 634d169

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`cloudSecurityPosture`	556.3KB	557.0KB	+680.0B

History

cc @alexreal1314

kibanamachine · 2025-07-01T13:52:19Z

Starting backport for target branches: 9.1

https://github.com/elastic/kibana/actions/runs/16001311086

kibanamachine · 2025-07-01T13:52:39Z

Starting backport for target branches: 9.1

https://github.com/elastic/kibana/actions/runs/16001317358

…tic#225862) ## Summary This PR fixes the following issues: 1. misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the [design](https://www.figma.com/design/MimidTyvcOa19Xq9IzrbaS/Expandable-Flyout---Findings?node-id=989-178616&m=dev). 2. fix 'About' section in misconfiguration tab - fix sub titles sizes and spacing, remove link icon from 'show rule details' text. 3. fix Resource table rendering to handle properly package fields with array of single item - copy icon should be rendered in this case. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the [design](https://www.figma.com/design/MimidTyvcOa19Xq9IzrbaS/Expandable-Flyout---Findings?node-id=989-178616&m=dev). ### Screenshot **title and sub title fix** ![image](https://github.com/user-attachments/assets/ccb9e56a-2720-42e6-9903-f043fd8ba701) ![image](https://github.com/user-attachments/assets/adf09a47-2392-44e1-a15b-becce2b3a83e) ![image](https://github.com/user-attachments/assets/b28108e9-e624-47da-b1c2-e3322b8c97f1) ![image](https://github.com/user-attachments/assets/b8ddea87-7e3d-4127-b59f-a845f3528c9c) **vulnerability flyout - overview tab resource section fix ** ![image](https://github.com/user-attachments/assets/15a1a63b-f358-460d-99cc-7519f7d512f4) **misconfiguration flyout - about section spacing and font size issues fix** ![image](https://github.com/user-attachments/assets/fa91badf-4ba4-43c1-82cb-15177cf5fe34) (cherry picked from commit 790848d)

kibanamachine · 2025-07-01T13:58:34Z

💚 All backports created successfully

Status	Branch	Result
✅	9.1

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…tic#225862) ## Summary This PR fixes the following issues: 1. misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the [design](https://www.figma.com/design/MimidTyvcOa19Xq9IzrbaS/Expandable-Flyout---Findings?node-id=989-178616&m=dev). 2. fix 'About' section in misconfiguration tab - fix sub titles sizes and spacing, remove link icon from 'show rule details' text. 3. fix Resource table rendering to handle properly package fields with array of single item - copy icon should be rendered in this case. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the [design](https://www.figma.com/design/MimidTyvcOa19Xq9IzrbaS/Expandable-Flyout---Findings?node-id=989-178616&m=dev). ### Screenshot **title and sub title fix** ![image](https://github.com/user-attachments/assets/ccb9e56a-2720-42e6-9903-f043fd8ba701) ![image](https://github.com/user-attachments/assets/adf09a47-2392-44e1-a15b-becce2b3a83e) ![image](https://github.com/user-attachments/assets/b28108e9-e624-47da-b1c2-e3322b8c97f1) ![image](https://github.com/user-attachments/assets/b8ddea87-7e3d-4127-b59f-a845f3528c9c) **vulnerability flyout - overview tab resource section fix ** ![image](https://github.com/user-attachments/assets/15a1a63b-f358-460d-99cc-7519f7d512f4) **misconfiguration flyout - about section spacing and font size issues fix** ![image](https://github.com/user-attachments/assets/fa91badf-4ba4-43c1-82cb-15177cf5fe34) (cherry picked from commit 790848d)

kibanamachine · 2025-07-01T13:58:57Z

💚 All backports created successfully

Status	Branch	Result
✅	9.1

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…tic#225862) ## Summary This PR fixes the following issues: 1. misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the [design](https://www.figma.com/design/MimidTyvcOa19Xq9IzrbaS/Expandable-Flyout---Findings?node-id=989-178616&m=dev). 2. fix 'About' section in misconfiguration tab - fix sub titles sizes and spacing, remove link icon from 'show rule details' text. 3. fix Resource table rendering to handle properly package fields with array of single item - copy icon should be rendered in this case. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] misconfiguration and vulnerability expandable flyout title and sub title font size should be as specified in the [design](https://www.figma.com/design/MimidTyvcOa19Xq9IzrbaS/Expandable-Flyout---Findings?node-id=989-178616&m=dev). ### Screenshot **title and sub title fix** ![image](https://github.com/user-attachments/assets/ccb9e56a-2720-42e6-9903-f043fd8ba701) ![image](https://github.com/user-attachments/assets/adf09a47-2392-44e1-a15b-becce2b3a83e) ![image](https://github.com/user-attachments/assets/b28108e9-e624-47da-b1c2-e3322b8c97f1) ![image](https://github.com/user-attachments/assets/b8ddea87-7e3d-4127-b59f-a845f3528c9c) **vulnerability flyout - overview tab resource section fix ** ![image](https://github.com/user-attachments/assets/15a1a63b-f358-460d-99cc-7519f7d512f4) **misconfiguration flyout - about section spacing and font size issues fix** ![image](https://github.com/user-attachments/assets/fa91badf-4ba4-43c1-82cb-15177cf5fe34)

alexreal1314 requested review from a team as code owners June 30, 2025 15:12

alexreal1314 linked an issue Jun 30, 2025 that may be closed by this pull request

[Cloud Security] misconfiguration and vulnerability flyout UI issues #225839

Closed

3 tasks

alexreal1314 changed the title ~~[Cloud Security]fix expandable flyout title and sub title size~~ [Cloud Security] fix expandable flyout title and sub title size Jun 30, 2025

alexreal1314 added backport:current-major release_note:skip Skip the PR/issue when compiling release notes Team:Cloud Security Cloud Security team related and removed backport:current-major labels Jun 30, 2025

alexreal1314 self-assigned this Jun 30, 2025

alexreal1314 added backport:version Backport to applied version labels 9.1 candidate v9.1.0 and removed 9.1 candidate labels Jun 30, 2025

maxcold approved these changes Jun 30, 2025

View reviewed changes

alexreal1314 requested a review from Copilot June 30, 2025 19:54

Copilot AI reviewed Jun 30, 2025

View reviewed changes

fix expandable flyout title and sub title size

3b6cb86

alexreal1314 force-pushed the 225839-expandable-flyout-header-text-size branch from 581a8e2 to 23293d5 Compare July 1, 2025 09:26

PhilippeOberti previously requested changes Jul 1, 2025

View reviewed changes

improve styling of overview tab in the misconfiguration expandable fl…

634d169

…yout fix resource section UI in the vulnerability expandable flyout

alexreal1314 force-pushed the 225839-expandable-flyout-header-text-size branch from 23293d5 to 634d169 Compare July 1, 2025 10:26

alexreal1314 merged commit 790848d into main Jul 1, 2025
10 checks passed

alexreal1314 deleted the 225839-expandable-flyout-header-text-size branch July 1, 2025 13:52

kibanamachine added the v9.2.0 label Jul 1, 2025

kibanamachine mentioned this pull request Jul 1, 2025

[9.1] [Cloud Security] fix expandable flyout title and sub title size (#225862) #226012

Merged

alexreal1314 mentioned this pull request Jul 1, 2025

Move Vulnerabilities Flyout Component From CSP plugin to Security Solution Plugin #208841

Closed

6 tasks

alexreal1314 changed the title ~~[Cloud Security] fix expandable flyout title and sub title size~~ [Cloud Security] fix expandable flyout UI issues Jul 1, 2025

alexreal1314 changed the title ~~[Cloud Security] fix expandable flyout UI issues~~ [Cloud Security] fix misconfiguration and vulnerability flyout UI issues Jul 1, 2025

kibanamachine mentioned this pull request Jul 1, 2025

[Discover] Lens config extension point and hiding x-axis tick labels in patterns profile #225571

Merged

8 tasks

This was referenced Jul 2, 2025

Update the UI for Vulnerability Flyout #208847

Closed

Add support for 3rd party integration in the new expandable vulnerability flyout - CVE and package fields #219090

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cloud Security] fix misconfiguration and vulnerability flyout UI issues#225862

[Cloud Security] fix misconfiguration and vulnerability flyout UI issues#225862
alexreal1314 merged 2 commits intomainfrom
225839-expandable-flyout-header-text-size

alexreal1314 commented Jun 30, 2025 •

edited by kibanamachine

Loading

Uh oh!

elasticmachine commented Jun 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

PhilippeOberti Jul 1, 2025

Uh oh!

alexreal1314 Jul 1, 2025

Uh oh!

PhilippeOberti Jul 1, 2025

Uh oh!

elasticmachine commented Jul 1, 2025

Uh oh!

Uh oh!

kibanamachine commented Jul 1, 2025

Uh oh!

kibanamachine commented Jul 1, 2025

Uh oh!

kibanamachine commented Jul 1, 2025

Uh oh!

kibanamachine commented Jul 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

alexreal1314 commented Jun 30, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Screenshot

Uh oh!

elasticmachine commented Jun 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

PhilippeOberti Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

alexreal1314 Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

PhilippeOberti Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 1, 2025

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Uh oh!

Uh oh!

kibanamachine commented Jul 1, 2025

Uh oh!

kibanamachine commented Jul 1, 2025

Uh oh!

kibanamachine commented Jul 1, 2025

💚 All backports created successfully

Questions ?

Uh oh!

kibanamachine commented Jul 1, 2025

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

alexreal1314 commented Jun 30, 2025 •

edited by kibanamachine

Loading