SecureBit.chat - P2P Encrypted Messenger Files

Responsive layout fixed for phones. The chat was not laying out correctly on phones, iPhone worst of all: the header would not stay at the top, and the layout shifted around as you scrolled or opened the keyboard.

Fixed

• The header stops scrolling away on iPhone. The app shell and column both carry .minimal-bg, which sets min-height: 100vh — and min-height always beats height. On iOS 100vh is the URL-bar-retracted large viewport, so with the bar showing the shell was held some 60–100px taller than the area you can actually see. That surplus made the document scrollable, and a document that scrolls is how the header rode off the top. Removing the floor is also what makes everything else work: measured with --sb-vh forced to 700px, the shell stayed 844px before the fix and follows to 700px after.
• The chat shell is sized from the visual viewport instead of guessing, with 100dvh as the fallback — already correct on Android, where interactive-widget=resizes-content shrinks the layout viewport for the keyboard. WebKit has not implemented interactive-widget at all, which is why the JS fallback exists.
• The layout no longer resizes while you scroll. Height was recomputed on every visualViewport scroll event, which on iOS fires while the URL bar collapses and during rubber-banding, so the whole chat twitched under the finger. It now tracks resize only.
• Safe-area padding actually applies, and gets out of the way. The composer already padded for the home indicator, but the viewport meta lacked viewport-fit=cover, so the value was always 0 on notched iPhones. It now also collapses while the keyboard is up, where it would otherwise be dead space.
• The message list can shrink. It is flex: 1 in a column, which defaults to min-height: auto: it refused to shrink below its content and pushed the composer off the bottom in a long conversation. It is also the only scroller now, and no longer chains its scroll to the document.
• The online/offline toast no longer covers the peer name — it sat on top of the header inside the chat.
• Nested containers no longer each claim a full viewport height, which counted the header twice.

Added

• ?preview=chat renders the chat layout with canned content and no connection, so it can be looked at without standing up a handshake first. Presentational only: no peer manager, no keys, no network, and the send handlers are no-ops.

Verified

In an emulated iPhone viewport (390×844), at rest and with the keyboard open: header pinned at 0–64, composer flush to the keyboard line, document unscrollable, safe-area inset collapsing as expected.