Refactor datasheet to use flexbox and add responsive

[ryaplots]

Summary

This PR refactors the dataSheet component to use flex box to be more flexible to responsiveness

Changes

• Use flex box
• Add responsive behavior

Testing

Steps

...

Results

Checklist

• Scope: The referenced issue is addressed, there are no unrelated changes.
• Compatibility: The changes are backwards compatible with existing API, storage, configuration and CLI, according to the compatibility commitments in README.md for the chosen target branch.
• Documentation: Relevant documentation is added or updated.
• Testing: The steps/process to test this feature are clearly explained including testing for regressions.
• Infrastructure: If infrastructural changes (e.g., new RPC, configuration) are needed, a separate issue is created in the infrastructural repositories.
• Changelog: Significant features, behavior changes, deprecations and fixes are added to CHANGELOG.md.
• Commits: Commit messages follow guidelines in CONTRIBUTING.md, there are no fixup commits left.

[kschiffer]

Let's also include the changes that convert the sections into accordions:

It should be possible to solve this with CSS and media queries only. You'd have to track which groups are open/closed in the component state to apply the respective class to each group, then only use these classes in mobile views to show/hide the respective groups.

Please also take care to apply accurate spacing and alignment as per the screendesign.

In the current implementation, there are alignment issues:

[kschiffer]

Looking good already but the spacing is still a bit wonky:

The red area is too much spacing, and I've added my idea of how the spacing should work for individual items.

[ryaplots]

I've removed the excess margin and edited the spacings, however, I didn't make exactly like you are suggesting because then the grey divider does not have the correct width, so I have to bound it by the panel paddings. I tried to make spacing less honky and more predictable: