Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show modal will cause body width becomeing smaller #30816

Closed
yp05327 opened this issue May 2, 2024 · 7 comments · Fixed by #30831
Closed

Show modal will cause body width becomeing smaller #30816

yp05327 opened this issue May 2, 2024 · 7 comments · Fixed by #30831
Labels
topic/ui Change the appearance of the Gitea UI type/bug

Comments

@yp05327
Copy link
Contributor

yp05327 commented May 2, 2024

Description

image

Gitea Version

latest

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

build

Database

None
@yp05327 yp05327 added type/bug topic/ui Change the appearance of the Gitea UI labels May 2, 2024
@yp05327
Copy link
Contributor Author

yp05327 commented May 2, 2024 •
edited
Loading

image
margin-right will become bigger

@yp05327
Copy link
Contributor Author

yp05327 commented May 2, 2024 •
edited
Loading

https://forum.freecodecamp.org/t/issues-with-bootstrap-5-2-modal/570924

this will be added after open a modal
image

@yp05327 yp05327 added the type/upstream This is an issue in one of Gitea's dependencies and should be reported there label May 2, 2024
@wxiaoguang
Copy link
Contributor

No, not "upstream".

The tw-overflow-hidden was introduced by Remove fomantic dimmer module #30723 ,

@wxiaoguang wxiaoguang mentioned this issue May 2, 2024
Merged
@yp05327 yp05327 removed the type/upstream This is an issue in one of Gitea's dependencies and should be reported there label May 2, 2024
@yp05327
Copy link
Contributor Author

yp05327 commented May 2, 2024

but it seems that margin-right is from bootstrap 🤔

@silverwind
Copy link
Member

silverwind commented May 2, 2024 •
edited
Loading

The tw-overflow-hidden on body could maybe replaced with pointer-events-none on the dimmer to inhibit scrolling the body while modal is open. But I'm pretty sure fomantic used the former too.

Edit: Ah no, that would prevent closing the modal with dimmer click.

@silverwind
Copy link
Member

Margin is coming from fomantic modal module:

https://github.com/fomantic/Fomantic-UI/blob/59d9b409879ad9413ea0a3efa4ab2e51017ad9b9/src/definitions/modules/modal.js#L611-L617

@silverwind silverwind mentioned this issue May 2, 2024
Merged
@silverwind
Copy link
Member

#30831 will fix it.

lunny pushed a commit that referenced this issue May 3, 2024
@silverwind @wxiaoguang
Fix body margin shifting with modals, fix error on project column edit (
b30b7df 
#30831)

Fixes: #30816, regression from
#30723.
Fixes: #30815, regression from
#30723.

Fomantic [expects a
callback](https://github.com/fomantic/Fomantic-UI/blob/59d9b409879ad9413ea0a3efa4ab2e51017ad9b9/src/definitions/modules/modal.js#L530-L534)
to be called during `hide` which we did not do, so it could never remove
the margin it added to `body`.

I do observe the body content shifting to right by 1px when modal opens,
but this is a bug that existed on v1.21 as well, so not a regression.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
topic/ui Change the appearance of the Gitea UI type/bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix body margin shifting with modals, fix error on project column edit silverwind/gitea
3 participants
@silverwind @wxiaoguang @yp05327