feat: implement scrollable form components [WD-8093]

[mas-who]

Done

• Implemented scrollable form component for all main configuration sections across the app (creation and edit)
• aligned scrollable behaviour for existing forms and tables across the application

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @lorumic or @edlerd for access.
   • With a local copy of this branch, run as described here.
2. Perform the following QA steps:
   • Check all main configuration sections, make sure that the form is scrollable but not the document body
   • Check instance creation and edit, network creation and edit, profile creation and edit, storage pool creation and edit, storage volume creation and edit, project creation and edit

Screenshots

Example

[webteam-app]

Demo starting at https://lxd-ui-603.demos.haus

[edlerd]

The right scrolling behaviour is missing on

• instance/profile creation/edit > disk devices
• network>bridge, dns, ipv4 and ipv6
• storage volume > snapshots, filesystem
• storage pool > ceph

[mas-who]

The right scrolling behaviour is missing on

• instance/profile creation/edit > disk devices
• network>bridge, dns, ipv4 and ipv6
• storage volume > snapshots, filesystem
• storage pool > ceph

Oh that is interesting. I assumed that all the config tables are already scrollable. I will do a scan through and make sure everything has consistent behaviour.

[mas-who]

The right scrolling behaviour is missing on

• instance/profile creation/edit > disk devices
• network>bridge, dns, ipv4 and ipv6
• storage volume > snapshots, filesystem
• storage pool > ceph

Oh that is interesting. I assumed that all the config tables are already scrollable. I will do a scan through and make sure everything has consistent behaviour.

Picked up two more sections that was missing the same behaviour:

• storage volume > zfs
• network > network forward create/edit

[edlerd]

Thanks for finding all the forms and aligning their layout. Some ideas to simplify and generalize below.

One thing I realized: the min-width of the form-navigation is too low, if we increase it to 14rem, we avoid a vertical scrollbar if the screen is too small to fit the whole expanded menu on the screen. Maybe we can increase it as part of this PR?

[edlerd]

LGTM, thanks for making all the forms consistent and fix them for smaller resolutions!