Add second section for modals and move away from absolute positionning

[Tbaut]

closes #1664
I tested some modal such as the sharing explainer.

todo,test the following:

• Shared transfer
• Sharing explainer
• Team modal (fake door)
• Folder creation
• Create or edit shared folder
• File Info
• Move File
• Report File
• Share Modal
• Upload File
• Mobile folder/file edit
• forget browser

To test the 2nd section you can add the prop subModal={<div>Some section here</div>} to any CustomModal element, I did it in the following video for the Shared modal creation.

Modal.mp4

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1715.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c64i9bjru51na3lbct60.

[render]

Your Render PR Server URL is https://gaming-ui-stage-pr-1715.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c64i9c3ru51na3lbctng.

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1715.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c64i9crru51na3lbcu10.

[FSM1]

The Delete confirmation needs padding and radius:

Previously:

[Tbaut]

Good catch, the Dialog was also using Modal. It should be fixed now. I checked a couple other modals, and they looked fine, but a proper go around is prob needed again.

[asnaith]

I inspected all the modals on the list on the desktop without issue but noticed multiple problems on mobile (iOS)

New issues:

• For modals that have a cancel button outside of the modal, when the keyboard is invoked it covers the cancel button (on production the cancel button is adjusted so that it is displayed above the keyboard).

• "Create or edit shared folder" modal (mobile): After invoking a “Folder name is already in use” error the input bar needs to be tapped a few times before it responds and can be edited again.

• "Create or edit shared folder" modal (mobile): I managed to cause an issue where the cursor was appearing on the wrong part of the screen and not where I was typing. I couldn't nail down reproduction steps but caught it on video.

create.share.cursor.positioning.MP4

• "Report File" modal (mobile): The decryption key is being cut off

• Rename file modal (mobile): The modal is fixed in the middle but the background is scrollable (this happens on all but it is more noticeable on smaller modals like this).

upload.file.scrolling.MP4

• "Manage Access" modal (mobile): Only 2 / 3 characters of the share link url are shown the rest of the string is truncated due to lack of room (side note - looks like link sharing is not available in prod for mobile view so I guess we all missed that!).

• "Forget browser" modal (mobile): The cancel button is within the modal but the top corners are rounded and the bottom is straight.

Issues that also occur in prod

Some issues are already present in prod so they are probably out of the scope here but I wanted to mention them first and then we can decide whether to create separate issues:

• Some modals have the cancel / close button inside the actual modal. Others it is a secondary bar fixed to the bottom of the screen. Lots of inconsistencies.

• Modals that have a cancel button outside the modal have rounded corners on the top of the modal but straight edges on the bottom. This is the same in prod but now the distance between modal and cancel bar is larger the straight edges look more like a bug than intentional design.

• Rotating the phone to landscape and back to portrait whilst a modal is in view causes the zoom level to get messed up and requires the user to pinch to zoom back out.

• "Share" modal (mobile): The placeholder text is very close to the edges of the input box, some padding would make this look nicer.

• Tapping a dropdown or text input on a modal adjusts the zoom level of the screen and requires the user to manually zoom out to return to normal.

[Tbaut]

Thanks for the thorough review. Many issues here are actually also happening in prod. I'll try to fix some, but I don't want to keep this PR open forever and try to fix them all here. The potential to add some more breaking changes is high and I value small and to the point PRs rather than big catch-all.

For modals that have a cancel button outside of the modal, when the keyboard is invoked it covers the cancel button (on production the cancel button is adjusted so that it is displayed above the keyboard).

But you can scroll to it right? I wonder if showing a cancel button all the time above the keyboard is the way to go. it takes quite some display real estate.

"Create or edit shared folder" modal (mobile): After invoking a “Folder name is already in use” error the input bar needs to be tapped a few times before it responds and can be edited again.

Can you please confirm this doesn't happen in prob?

Rename file modal (mobile): The modal is fixed in the middle but the background is scrollable

That's also in prod. Applying a overflow: hidden to the body should fix it, I'll consider it (it's not that trivial and could break yet other things).
edit: added it, I think it's doing a pretty good job.

"Report File" modal (mobile): The decryption key is being cut off

This must happen in prod too. We have an issue related that could handle this as well #1720 and #1713

Issues that also occur in prod

Thanks for finding all those. Would you mind creating issues for these. This PR breaks many things already for me to take care of everything here that's already broken :)

[asnaith]

For modals that have a cancel button outside of the modal, when the keyboard is invoked it covers the cancel button (on production the cancel button is adjusted so that it is displayed above the keyboard).

But you can scroll to it right? I wonder if showing a cancel button all the time above the keyboard is the way to go. it takes quite some display real estate.

Yeah, you can still scroll to it. I agree that we are already limited on available space and showing it limits it even more. I just wanted to mention it as it differed from prod behaviour.

"Create or edit shared folder" modal (mobile): After invoking a “Folder name is already in use” error the input bar needs to be tapped a few times before it responds and can be edited again.

Can you please confirm this doesn't happen in prob?

Yep, I wasn't able to reproduce this on production but I also can't reproduce now either. Sorry for the red herring, might have been an issue between localhost and my phone

Rename file modal (mobile): The modal is fixed in the middle but the background is scrollable

That's also in prod. Applying a overflow: hidden to the body should fix it, I'll consider it (it's not that trivial and could break yet other things). edit: added it, I think it's doing a pretty good job.

Nice, I'll check it out.

"Report File" modal (mobile): The decryption key is being cut off

This must happen in prod too. We have an issue related that could handle this as well #1720 and #1713

Ah yes you're right it's in prod. The issues you mentioned are for the "File Info" modal though (but similar fix probably). I created a separate issue for the "Report File" modal #1726.

Issues that also occur in prod

Thanks for finding all those. Would you mind creating issues for these. This PR breaks many things already for me to take care of everything here that's already broken :)

Yep pre-existing ones are now separate issues #1727, #1728, #1729

Apologies for the myriad of things discussed at once in this PR. I just had to read it all back for my own sake/sanity 😅.

TL;DR I think everything discussed here that is fixable we will address in another issue now (due to them being pre-existing). I can't recreate the weirdness with the mispositioned cursor or frozen input so they could have been edge cases that exist in production too. I'll continue to see if I can recreate those issues but they shouldn't hold up this change imo.