Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Evaluation column on data grid in the expanded flyout should have fixed width #195950

Closed
1 task
maxcold opened this issue Oct 11, 2024 · 0 comments · Fixed by #199679
Closed
1 task

Evaluation column on data grid in the expanded flyout should have fixed width #195950

maxcold opened this issue Oct 11, 2024 · 0 comments · Fixed by #199679
Assignees
@albertoblaz
Labels
8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Cloud-Security Cloud Security related features Team:Cloud Security Cloud Security team related

Comments

@maxcold
Copy link
Contributor

maxcold commented Oct 11, 2024 •
edited
Loading

Motivation

The result evaluation column (and probably score column on Vulnerability) on data grid on the expanded flyout is responsive, which doesn't work well with small screens. On Findings data grid the column has the fixed width, we should do the same on the expanded flyout

Image

Definition of done

  • columns with badges have fixed width on the expanded flyout

Out of scope

Related tasks/epics

Team tag

@elastic/kibana-cloud-security-posture
@maxcold maxcold added bug Fixes for quality problems that affect the customer experience Team:Cloud Security Cloud Security team related Feature:Cloud-Security Cloud Security related features 8.17 candidate labels Oct 11, 2024
@albertoblaz albertoblaz self-assigned this Nov 11, 2024
@albertoblaz albertoblaz mentioned this issue Nov 11, 2024
Merged
5 tasks
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Nov 12, 2024
@albertoblaz
Fix responsiveness of Misconfigurations data grid (elastic#199679)
e8d3792 
## Summary

Closes elastic#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)

(cherry picked from commit fd5b40d)
tkajtoch pushed a commit to tkajtoch/kibana that referenced this issue Nov 12, 2024
@albertoblaz @tkajtoch
Fix responsiveness of Misconfigurations data grid (elastic#199679)
b511e3a 
## Summary

Closes elastic#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)
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Nov 18, 2024
@albertoblaz @CAWilson94
Fix responsiveness of Misconfigurations data grid (elastic#199679)
efd3160 
## Summary

Closes elastic#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)
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Nov 18, 2024
@albertoblaz @CAWilson94
Fix responsiveness of Misconfigurations data grid (elastic#199679)
8f86757 
## Summary

Closes elastic#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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@albertoblaz albertoblaz

Labels
8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Cloud-Security Cloud Security related features Team:Cloud Security Cloud Security team related
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix responsiveness of Misconfigurations data grid albertoblaz/kibana
2 participants
@maxcold @albertoblaz