Skip to content

Fix modal being too large in narrow screens#490

Open
julien-nc wants to merge 2 commits intomainfrom
fix/418/mobile-modal
Open

Fix modal being too large in narrow screens#490
julien-nc wants to merge 2 commits intomainfrom
fix/418/mobile-modal

Conversation

@julien-nc
Copy link
Member

@julien-nc julien-nc commented Mar 18, 2026

closes #418

Because of the trick we use to make the modal larger than possible with the component size prop, it did not behave well on narrow screens. This is setting a max width to 100% which does the job.

Thank you @evrim for reporting this and suggesting a fix (on which we agree 😁).
cc @DaphneMuller

Before

Kooha-2026-03-18-14-48-01.webm

After

Kooha-2026-03-18-14-46-16.webm

Unrelated change: Update npm pkgs.

…rger in normal view makes it overflow in narrow screens

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
@julien-nc julien-nc added bug Something isn't working 3. to review priority high design Design, UI, UX, etc. labels Mar 18, 2026
@DaphneMuller
Copy link

cc @marcoambrosini @jancborchardt your requested design change is resolved

@janepie
Copy link
Member

janepie commented Mar 18, 2026

Hmm now the outer border including the close button is hidden at some points, any way to prevent that?

Copy link
Member

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

One thing: Could we use the full height on mobile sizes? It seems odd that there’s a row on the top of unused space, instead of the modal expanding to fill the screen.

@julien-nc
Copy link
Member Author

julien-nc commented Mar 18, 2026

@janepie We artificially change the style the NcModal component so this has some side effects that are tricky to deal with. I think it's fine like it is now.

@jancborchardt That's something to ask in https://github.com/nextcloud-libraries/nextcloud-vue because it would make sense to have it changed in all the NcModals (i mean, in the NcModal component itself), not just this one in assistant. Right?

I just fixed a bug that only affects this assistant modal and was introduced in this repo.

@julien-nc julien-nc requested a review from jancborchardt March 18, 2026 15:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review bug Something isn't working design Design, UI, UX, etc. priority high

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mobile Compatibility

4 participants