Wizard: Ensure wizard footer remains visible in repo step

[rissh]

• Improved the layout of the repository step in the wizard to prevent the "Next" button from being hidden behind a scroll.
• Adjusted the wizard size to ensure a better user experience without needing to scroll in the repository selection step.
• Ensured consistent button positioning across varying screen resolutions.
• Attached is a video demo showcasing how this change resolves it.
• This is my approach to solving the issue, and I'm happy to consider alternative suggestions if anyone has a different idea.

Screencast.from.2024-10-22.11-59-24.webm

[app-sre-bot]

Can one of the admins verify this patch?

[rissh]

Fixes #2467

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.63%. Comparing base (a2b8883) to head (0598fb8).
Report is 123 commits behind head on main.

@@           Coverage Diff           @@
##             main    #2527   +/-   ##
=======================================
  Coverage   83.63%   83.63%           
=======================================
  Files         162      162           
  Lines       17638    17638           
  Branches     1796     1796           
=======================================
  Hits        14751    14751           
  Misses       2865     2865           
  Partials       22       22           

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a2b8883...0598fb8. Read the comment docs.

[ezr-ondrej]

/ok-to-test

[ezr-ondrej]

/retest

[ezr-ondrej]

Hi! This now is in fixed height, but it always scrolls for me even on zoomed out screen where there is a lot of room blank room, the buttons are hidden.

Screencast.from.2024-10-23.08-12-22.mp4

[rissh]

Hi!
Thanks for your feedback. I've made the necessary adjustments to address the issue, and the buttons should now remain visible without unnecessary scrolling.

I've also added a video for reference to show how it’s working fine now.

Let me know if you have any further suggestions!
Screencast from 2024-10-23 14-56-46.webm

[avitova]

Thank you for looking into this. 🥳
If I zoom out now, the button is at the bottom. However, when zooming in, now I have to scroll. Is that the intended behaviour?

Screencast.from.2024-10-24.11-02-46.webm

[rissh]

Thank you for looking into this. 🥳 If I zoom out now, the button is at the bottom. However, when zooming in, now I have to scroll. Is that the intended behaviour?

Screencast.from.2024-10-24.11-02-46.webm

Hey,
I’m aware of this behavior, and I kept it that way since Ondrej suggested the buttons should always be at the bottom when zoomed out. For zooming in, the buttons stay at the bottom up to 110%, but after that, you’ll need to scroll down.

If you'd prefer the buttons to always be visible regardless of zoom, I can make that change! The only thing holding me back is that if you zoom in too much, the buttons can become annoyingly large for users. But if we want to move forward with it, I’m happy to tweak it—just say the word! 😊

[avitova]

Yes, I thought the scrolling problem was the initial reason for the issue.
My first thoughts for solving this are a bit different approach, so I thought it could be interesting to share. We could also put the contents of the custom repositories step into something like a fixed-height size "flexbox" (not sure how to describe this). That way, it would not extend and not push the button down. But honestly, that is just my two cents and different view on things. Whatever works for you!

[rissh]

Yes, I thought the scrolling problem was the initial reason for the issue. My first thoughts for solving this are a bit different approach, so I thought it could be interesting to share. We could also put the contents of the custom repositories step into something like a fixed-height size "flexbox" (not sure how to describe this). That way, it would not extend and not push the button down. But honestly, that is just my two cents and different view on things. Whatever works for you!

Okay, this could definitely be one approach to try. I’m happy to explore it—thanks for the suggestion! 😊

[ezr-ondrej]

I'm still not sure how this is supposed to work, I'm lost in css positioning, could you elaborate a bit? I've left few inline comments on lines I'm mostly lost on.

[rissh]

I'm still not sure how this is supposed to work, I'm lost in css positioning, could you elaborate a bit? I've left few inline comments on lines I'm mostly lost on.

Sure, I'll go through each of your comments one by one and clarify the CSS positioning as best I can. I'll make any necessary adjustments along the way if needed. Thanks for the detailed feedback!

[rissh]

I have attached a video demonstrating the current behavior. The video showcases how the footer behaves with the latest changes and how it resolves the previous positioning issues.

Feel free to reach out if you have any questions or need further clarification! I'm still open to making any changes if needed—just let me know, and I'll be happy to update it.

Screencast.From.2024-11-13.20-00-24.mp4

[ezr-ondrej]

Please remove the now unecessary comments and add an empty line at EOF, apart of that it looks good to me 👍

[avitova]

Good, I am happy with this solution. Feel free to merge after Ondra approves. :)

[ezr-ondrej]

/ok-to-test

[ezr-ondrej]

Thanks 👍 Works nicely on my end.

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove "Stale" label or comment or this will be closed in 7 days.

[ezr-ondrej]

Doesn't work on Firefox