revite

revite copied to clipboard

Please make sure to check the following tasks before opening and submitting a PR

• [x] I understand and have followed the contribution guide
• [x] I have tested my changes locally and they are working as intended
• [x] These changes do not have any notable side effects on other Revolt projects
• [ ] (optional) I have opened a pull request on the translation repository
• [x] I have included screenshots to demonstrate my changes

Related #370

Before: Source #370

After:

The first case (MessageBox) was fixed in commit b6cafcfc7f14dfe141a7ec3777aea2c7c8c149bf by adding padding-bottom with value of env(safe-area-inset-bottom)

As for the second case (BottomNavigation), adding the same styles as the first case introduces a new problem: It solves the issue of respecting the safe area

but it breaks the following: which is caused by: https://github.com/revoltchat/revite/blob/12b97160433151c188b077bd3e85fc2ee35bbd99/src/pages/RevoltApp.tsx#L157-L161

and for that to be solved, the height prop would need to somehow account for env(safe-area-inset-bottom) so it would look somewhat like this, 50 + getSafeAreaInsetBottom() and getSafeAreaInsetBottom(), can be anything from an external library to an implementation somewhere in the codebase, or maybe there's another way?

Commit ffc0b77ffbaeb03f2aba010b8a8f3eca6e6001fd, showcases how case 2 would be fixed (replace 10px with env(safe-area-inset-bottom))

Preview:

This would probably need some sort of media query in the React code.

This would probably need some sort of media query in the React code.

@insertish, I am not sure how that would work because the hiding and showing of BottomNavigation depends on react-overlapping-panels, so I would suggest either adding the ability to pass in custom styles or add the ability to account for env(safe-area-inset-bottom)

e.g. by adding the ability to pass a prop here https://github.com/revoltchat/revite/blob/aa9974149cb4cd86ee9b53b2582cb116bc5cc1c3/src/pages/RevoltApp.tsx#L168-L172 something like withSafeArea, so the implementation would be

const baseTopValue = (el.scrollLeft / lWidth * bottomNav!.height) + 'px';
const withSafeAreaTopValue = `calc(${el.scrollLeft / lWidth} * calc(${bottomNav!.height}px + env(--safe-area-inset-bottom)))`

bEl.style.top = bottomNav!.withSafeArea ? withSafeAreaTopValue : baseTopValue;

previously

bEl.style.top = (el.scrollLeft / lWidth * bottomNav!.height) + 'px';

https://github.com/insertish/overlapping-panels/blob/a5ec86305387a7c6f87984da2489550a2111d4ac/src/index.tsx#L76

and should also change hidden to include env(safe-area-inset-bottom)

const hidden = bottomNav!.withSafeArea ? `calc(${bottomNav!.height}px + env(--safe-area-inset-bottom))` : `${bottomNav!.height}px`; 

previously

const hidden = bottomNav!.height + 'px';

https://github.com/insertish/overlapping-panels/blob/a5ec86305387a7c6f87984da2489550a2111d4ac/src/index.tsx#L72

---

I've tested these changes (using var instead of env) and they're working as expected.

Preview:

these changes can be tested by defining --safe-area-inset-bottom to any value.

Changes https://github.com/LedaThemis/overlapping-panels/commit/1e83386480ffc4af8cea4386cffc286d3d4c47e4 https://github.com/revoltchat/revite/commit/ca1da5f3eb6250bd6c1b913f1fafbf0cedaa5b4e

Closing due to rewrite, marking as potential issue in future by linking to https://github.com/revoltchat/frontend/issues/134.