Set min-width for DistributionBar and added README for storybook (ela…

…stic#202247)

## Summary
- This pull request resolves
[elastic#200881](elastic#200881)
by setting a min-width of 10px for the DistributionBar component to
prevent it from shrinking too small, ensuring a consistent and readable
visual representation for better usability.
- Additionally, added a README file with instructions for running
Storybook to visually inspect the DistributionBar, as the folder had no
documentation before, improving the developer experience.

## Screenshots:
**Before**
- The min-width of 10px was set, but small segments were not visible in
the DistributionBar.
![Screenshot 2024-11-27 at 5 08
13 PM](https://github.com/user-attachments/assets/6b74580d-28a4-429a-9029-0d212100d2a5)

- The original mockStatsFindings with 'passed' set to 90 and 'failed'
set to 10 did not visually reflect the min-width of 10px in the
DistributionBar. The smallest segment was still not visible.
![Screenshot 2024-11-27 at 5 09
49 PM](https://github.com/user-attachments/assets/01be2f80-77e3-4805-b301-f05dc6e3436c)

**After**:

- Temporarily modified the `mockStatsFindings` in
`distribution_bar.stories.tsx` to simulate the DistributionBar with
extreme values by setting the count for 'passed' to 9000 (highest) and
'failed' to 1 (lowest):
![Screenshot 2024-11-27 at 5 10
49 PM](https://github.com/user-attachments/assets/7278f81b-174e-4df0-8209-6fb6a7a70f18)

- After the modification, the DistributionBar displayed correctly with
even the smallest segments visible, confirming that the min-width is
working as expected.
![Screenshot 2024-11-27 at 5 10
23 PM](https://github.com/user-attachments/assets/95cfc3d4-d1aa-4a69-9d13-17143445dc7f)

- These results were captured in a screenshot for the PR, and no changes
were saved to the `distribution_bar.stories.tsx` file.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/packages/security-solution/distribution_bar/README.md

@@ -0,0 +1,10 @@
+# Security Solution's Distribution Bar
+
+The DistributionBar component visually represents data distribution, such as critical, high, medium, and low alerts.
+
+## Storybook
+
+General look of the component can be checked visually running the following storybook:
+`yarn storybook security_solution_packages`
+
+Note that all the interactions are mocked.

x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx

@@ -36,6 +36,7 @@ const useStyles = () => {
         position: relative;
         border-radius: 2px;
         height: 5px;
+        min-width: 10px; // prevents bar from shrinking too small
       `,
       empty: css`
         background-color: ${euiTheme.colors.lightShade};