[Bug] Misarranged layout on mobile in article view in PWA mode

[noctux]

Describe the Bug

When installing reactflux as a PWA on mobile, and opening an unread article from, the layout in the article view is initially fine, including the bottom bar with the action buttons.

However, ocassionally a grey bar appears at the bottom of the screen and shifts down the rest of the view, moving the bottom toolbar partly or completely off the screen (see screenshots).
This appears more often when opening the article in an external browser and then switching back or when moving back to the previous article using slide gestures (so sliding inwards from the left border).

As far as I can tell, the issue does not occur when using the website (instead of the PWA).

The issue occurs both with Fennec (org.mozilla.fennec_fdroid, version 143.0.3 a fork of firefox for android) and Vanadium (version 141.0.7390.122.0, a variant of Android Webview that ships with Grapheneos), so it is most likely not a browser issue.
The issue occurrs for instance on commit 63cbeda of the gh-pages branch.

Steps to Reproduce

1. Visit the reactflux page with a browser on an android device
2. Install the PWA (Browser Menu -> Add to homescreen)
3. Open reactflux via the icon on android's homescreen
4. Miniflux reopens (without an url/address bar in PWA mode)
5. Open an article
6. Open an url in external Browser and go back
7. OR: swipe right/left some times to access next/previous article

Expected Behavior

The toolbar stays put on the bottom of the screen, no grey bar appears at the top of the screen.

Screenshots / Videos

N.B.: The "You need to enable Javascript" is a misleading statement, as Javascript is misleading. I assume that react places it as a plain HTML element on the bottom of the page and renders its SPA over it, but when the page is shifted downwards, it gets visible again.

ReactFlux Version

5f98341

Miniflux Version

v2.2.13

Browser

org.mozilla.fennec_fdroid, version 143.0.3, Vanadium version 141.0.7390.122.0

Operating System

GrapheneOS/Android 16

Device

Google Pixel 8a

Console Errors

Additional Context

Thank you for ReactFlux, it greatly improves miniflux's usability for me :)

[noctux]

Today, I've attached firefox's remote debugger to the webview. The culprit seems to be env(safe-area-inset-top) used as padding on .main:

After manually setting that padding to 0, the buttons are visible once more:

I will testdrive the following user stylesheet (injected via stylus) for some time and see if it fully resolves my issue:

.main {
    padding-top: 0px !important;
}

[NekoAria]

Thank you for the detailed information you provided.
I have fixed the relevant issues in the latest commit and tested it on my Android device.
Please update and try again.

[noctux]

Thank you for looking into this issue!

Unfortunately, the issue seems to persist (I test with my own deplyment of the github pages branch, with a009316 aka "Deploying to gh-pages from @ 13c2280" which includes 0c463e3).

I believe you found the correct location as I believe I can see the 20px max that you have inserted taking effekt as a slim line here:

However, I can still get the bottom button bar to partially shift out of focus by unfortunate swiping:

N.B.: My test drive of my user-stylesheet on the other hand that hard-disables any top padding on .main (even though this is of course only a rather specific fix and does not generalise) was successful so far; I did not notice any adverse rendering in my use.

[NekoAria]

Alright, I’ve disabled the safe-area-inset-top padding on the .main element.