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.

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

bug: Drawer(offcanvas) end(maybe another?) сuts off content on the right and looks wrong on narrow screens. #38

Open
dail45 opened this issue Jan 5, 2025 · 2 comments
Labels
bug Something isn't working

Comments

@dail45
Copy link

dail45 commented Jan 5, 2025

What version of FlyonUI are you using?

v1.3.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://flyonui.com/docs/overlays/drawer/

Describe your issue

  1. Cut off some content on right(the padding on the right was partially cut off):
    image
  2. Devices with narrow screen (like Samsung Galaxy Z Fold series) may not play content correctly (offcanvas moves off the screen).
    image

Possible solution:
Remove "inset-inline-start" in drawer-end class
image

After remove CSS class:
1)
image
2)
image

P.s. This CSS class could have been added by analogy with drawer-start (inset-inline-start), but there it does not create these problems.

P.s.s. For now I have to use this:

.drawer-end {
  inset-inline-start: initial !important;
}
Copy link

github-actions bot commented Jan 5, 2025

Hi @dail45

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

@PruthviPraj00 PruthviPraj00 added the bug Something isn't working label Jan 6, 2025
@PruthviPraj00
Copy link
Member

Hello @dail45,

Thank you for bringing this to our attention—we truly appreciate your feedback.

The code in question was initially added for responsiveness. However, upon review, it seems unnecessary. Specifically, the following can be removed:

.drawer-end {
 inset-inline-start: calc(100vw - 23.45rem);
}

and

.drawer-start {
 inset-inline-end: calc(100vw - 23.45rem);
}

We plan to remove these in the next release. If you'd like, feel free to create a Pull Request for this change. If you do, please ensure both start and end are updated:

When submitting your Pull Request, kindly use the following commit message format for consistency:

fix(component): resolved sizing issue in drawer by removing `calc(100vw - 23.45rem);`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants