feat: right align bottom buttons with forms across app [WD-7985]

[mas-who]

Done

• adjusted all creation and edit forms to have max width of 54rem
• right aligned bottom control buttons to all creation and edit form contents

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 forms with bottom control buttons. Make sure that buttons are right aligned to the form content for all screen sizes and also check if the forms visually look okay.

Screenshots

Example

[webteam-app]

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

[edlerd]

It looks so much better now with consistent width!

Some ideas to simplify below.

[edlerd]

Found two problems with narrow screens. And a third one, but that might be nasty and can be done as a follow up as well.

1. The profile selector for instances should not be full width. The up/down/remove buttons should be next to the profiles, see below comparison:

now:

before:

2. The secondary form navigation should be scrollable, when on a small screen. To make all the form screens accessible on small screens.

now:

before:

3. One last bit, but feel free to ignore it for a future ticket if out of scope. As this was inconsistent before. The scrollbar for the form content is sometimes on the very right of the page and sometimes in the middle at the content end. I think having the scroller in the middle is preferred. It is inconsistent mostly on the "main" form pages, and on the disk selector for instances.

scrollbar at content end:

scrollbar at the right

[edlerd]

Maybe shorten the name to FormFooter?

[mas-who]

• For the profile selector, I can revert to spacing from before. The buttons will align to the outer edge of the form so it still looks good. I also noticed that on really narrow screen size, even from before the arrows show above and below the selector. This is due to the arrows having fixed width regardless of the screen size. Maybe we should consider a different design for small screen sizes?
• For the secondary form navigation, the current behaviour is caused by me removing the overflow css to keep the side navigation static. It's pretty tricky to get buttons aligned perfectly when the side navigation dynamically grows due to it being a scrollable container. I have adjusted css so that the buttons align mostly with the right edge of the form, but it's not perfect. Have a look on the demo server and let me know if it's okay? Alternatively, it might be possible to introduce a empty div right next to the footer container to mimic the behaviour of the side navigation so that the actual footer can be fixed width, but it would introduce non-semantic elements and might be tricky to get the div behave just like the side navigation.
• For the inconsistent scrollbar issue, I think we should create a ScrollableForm component similar to the ScrollableTable component where it dynamically updates height attributes of the document body. I will create a ticket and circle back on this one later.
• I think naming it FormFooterLayout indicates clearly that it is a wrapper instead of a self-sufficient component?

[edlerd]

• For the profile selector, I can revert to spacing from before. The buttons will align to the outer edge of the form so it still looks good. I also noticed that on really narrow screen size, even from before the arrows show above and below the selector. This is due to the arrows having fixed width regardless of the screen size. Maybe we should consider a different design for small screen sizes?

I think this is fine now.
I can look into it in a follow-up to improve it for smaller screens.

• For the secondary form navigation, the current behaviour is caused by me removing the overflow css to keep the side navigation static. It's pretty tricky to get buttons aligned perfectly when the side navigation dynamically grows due to it being a scrollable container. I have adjusted css so that the buttons align mostly with the right edge of the form, but it's not perfect. Have a look on the demo server and let me know if it's okay? Alternatively, it might be possible to introduce a empty div right next to the footer container to mimic the behaviour of the side navigation so that the actual footer can be fixed width, but it would introduce non-semantic elements and might be tricky to get the div behave just like the side navigation.

I don't fully understand. It seems to be working fine now, doesn't it? From your description it sounds like scrollbar-gutter: stable might solve the issue as it reserves space for the scrollbar even if it is not rendered.

• For the inconsistent scrollbar issue, I think we should create a ScrollableForm component similar to the ScrollableTable component where it dynamically updates height attributes of the document body. I will create a ticket and circle back on this one later.

Yeah, that is a good idea, let's keep it as is for now then.

• I think naming it FormFooterLayout indicates clearly that it is a wrapper instead of a self-sufficient component?

Sounds right.

[edlerd]

Code and QA looks good, thanks for improving this 👍