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 82.09%. Comparing base (1662d9a) to head (771b698).
Report is 57 commits behind head on main.

@@           Coverage Diff           @@
##             main    #2527   +/-   ##
=======================================
  Coverage   82.09%   82.09%           
=======================================
  Files         207      207           
  Lines       23291    23291           
  Branches     2286     2286           
=======================================
  Hits        19120    19120           
  Misses       4144     4144           
  Partials       27       27           

---

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 1662d9a...771b698. Read the comment docs.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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

[regexowl]

Tried to revisit this PR - not sure if anything changed directly in PF, but the sticky footer now seems to be working in Firefox as well most of the time (there are like two out of ten re-renders when the css seems to be ignored for some reason). I'd say let's merge this, what do you think @ezr-ondrej?

@rissh Would it be possible to squash the commits please? Sorry this took so long.

[regexowl]

/ok-to-test

[regexowl]

/retest

[regexowl]

Hmm, not sure what's up with the pr_check failure

/retest

[ezr-ondrej]

/retest

[ezr-ondrej]

Yeah, doesn't seem to break stuff 🤷 And I don't assume we'll get @rissh to rebase this, or continue working on it.
Can you admin push to squash? or squash on merge?

[rissh]

Hey @ezr-ondrej ,
I can take care of it! Sorry for missing it the first time. If we can wait a bit, I’ll rebase/squash later this week. 🚀

[rissh]

Tried to revisit this PR - not sure if anything changed directly in PF, but the sticky footer now seems to be working in Firefox as well most of the time (there are like two out of ten re-renders when the css seems to be ignored for some reason). I'd say let's merge this, what do you think @ezr-ondrej?

@rissh Would it be possible to squash the commits please? Sorry this took so long.

@regexowl Sure, I just rebased and squashed the commits. Let me know if anything else is needed. Thanks for following up!

[regexowl]

/ok-to-test

[regexowl]

Thank you! @tkoscieln is looking into the failing check, otherwise looks good to me 👍

[regexowl]

/ok-to-test