[BUG] Dialogs Overflow Screen Vertically

[mark-monteiro]

The bug

On desktop, some dialogs appear to overflow the screen vertically, hiding some of the content. The screenshot below is an example, but I've notices this also happens on the 'Edit User' dialog as well. Possibly it affects all dialogs if they're sharing the same CSS.

The OS that Immich Server is running on

Docker (Ubuntu host)

Version of Immich Server

v1.68.0

Version of Immich Mobile App

N/A

Platform with the issue

• [ ] Server
• [X] Web
• [ ] Mobile

Your docker-compose.yml content

N/A

Your .env content

N/A

Reproduction steps

1. Open 'Add User' dialog on a desktop web browser
2. Resize the window to reduce the window height until the dialog overflows

Additional information

To fix the issue, the parent element of the dialog should have a max-height value set, and overflow-y: auto This will add a scroll bar when the screen is not tall enough to display the full dialog, but leave the scrollbar hidden when the dialog does not overflow the screen.

For example, adding the following CSS:

{
  max-height: 90vh;
  overflow-y: scroll;
}

Results in the following

Some additional work may be desired to make the scrollbar a little bit smaller, but as a quick fix this should work

[jrasm91]

Feel free to open a PR for this. There is an immich-scrollbar class I believe you can use as well.

[mark-monteiro]

As much as I'd like to contribute more, it's unlikely I'll be able to find the time to set up a development environment and put together a PR for this. If anyone else wants to tackle it, that'd be fine by me.

[amitkshatriya01]

Can i take this one? I am looking to do something beginner friendly and this seems like a perfect fit. New immich user, love the product.

[amitkshatriya01]

Replicated this issue on version 1.72.2 as well using the edit user screen. I'll work to fix this.

[Ploonet]

I think we can close this thanks to #3422, can't we ?

[mark-monteiro]

Yep, looks like it. Closing.