fix(components): Fix DataList Sticky Header Extra Width [JOB-105924]

[ZakaryH]

Motivations

Right now there's an issue on medium and below screens where you can scroll horizontally because of some extra unintended width

Changes

Added

Changed

Deprecated

Removed

Fixed

Even though we're setting a width: 0 on this parent element

the nested FormField elements still have a width

these are causing the layout to have horizontal scrolling

with that width: 0 we're clearly trying to make them take up no space, and have them be functionally invisible. so, instead of doing it with a width I'm doing it with display: none

I tried doing some conditionals in the JSX via visible && (.... however visible is false on big screens which isn't right. in that case it is definitely visible, we're just not accounting for that fact

Security

Testing

this can all be done in Storybook

head on over to the DataList basic example. swap to a mobile view, see that you can pull it back and forth horizontally on master

see that you can no longer do that on this PR

additionally

• on large screens, the search should always be there - no button needed to toggle visibility
• on medium and below screen, the search button should be there and when you press it the search input shows AND it is auto focused then when you press the X to hide the search input, it goes away again
• small/mobile screens same thing as medium and below

Changes can be tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.