SecureBitChat/securebit-chat
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(mobile): make the chat layout responsive on phones; release v5.9.2
CodeQL Analysis / Analyze CodeQL (push) Canceled after 0s
Details
Deploy Application / deploy (push) Canceled after 0s
Details
Mirror to Codeberg / mirror (push) Canceled after 0s
Details
Mirror to PrivacyGuides / mirror (push) Canceled after 0s
Details

Browse Source 
The chat did not lay out correctly on phones, iPhone worst of all: the header
would not stay at the top, and the layout shifted as you scrolled or opened the
keyboard.

The root cause was a floor, not a position. 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 visible area. That surplus made the
document scrollable, and a scrolling document is how the header rode off the top.
It also left the visual-viewport tracking inert: forcing --sb-vh to 700px left the
shell at 844px. With the floor removed it follows to 700px and the document does
not scroll.

Also: the app shell is now sized from visualViewport rather than pinned, the
message list is the only scroller and can actually shrink, safe-area padding
applies (viewport-fit=cover) and collapses under the keyboard, and the
online/offline toast no longer sits on top of the header.

Adds ?preview=chat, which renders the chat layout with canned content and no
connection — presentational only, no peer manager, keys, or network.

Verified in an emulated iPhone viewport at rest and with the keyboard open:
header pinned at 0-64, composer flush to the keyboard line, document unscrollable.
This commit is contained in:
lockbitchat
2026-08-09 13:21:44 -04:00
parent 556727eb6f
commit 6a98e2eb00
14 changed files with 545 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+27 -23
View File
@@ -2,7 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<!-- viewport-fit=cover is what makes env(safe-area-inset-*) resolve to anything
other than 0 on notched iPhones; the composer already pads for it.
interactive-widget=resizes-content is honoured by Chrome/Android; iOS
ignores it, which is why the shell also tracks visualViewport in JS. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self';
@@ -24,7 +28,7 @@
<!-- PWA Manifest -->
<link rel="manifest" href="./manifest.json">
<link rel="icon" type="image/x-icon" href="./logo/favicon.ico?v=1786072827999">
<link rel="icon" type="image/x-icon" href="./logo/favicon.ico?v=1786294476636">
<!-- PWA Meta Tags -->
<meta name="mobile-web-app-capable" content="yes">
@@ -90,7 +94,7 @@
<link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./logo/splash/splash_screens/8.3__iPad_Mini_portrait.png">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" href="./logo/icon-180x180.png?v=1786072827999">
<link rel="apple-touch-icon" href="./logo/icon-180x180.png?v=1786294476636">
<link rel="apple-touch-icon" sizes="57x57" href="./logo/icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./logo/icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./logo/icon-72x72.png">
@@ -99,7 +103,7 @@
<link rel="apple-touch-icon" sizes="120x120" href="./logo/icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./logo/icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./logo/icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./logo/icon-180x180.png?v=1786072827999">
<link rel="apple-touch-icon" sizes="180x180" href="./logo/icon-180x180.png?v=1786294476636">
<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#ff6b35">
@@ -183,7 +187,7 @@
<!-- Render-blocking JS is deferred: classic deferred scripts and module scripts
both execute in document order after parsing, so React still runs before the
app modules below, but the parser / first paint is no longer blocked. -->
<script defer src="config/ice-servers.js?v=1786072827999"></script>
<script defer src="config/ice-servers.js?v=1786294476636"></script>
<script defer src="libs/react/react.production.min.js"></script>
<script defer src="libs/react-dom/react-dom.production.min.js"></script>
<!-- Prism syntax highlighting (vendored, offline). Tokenizes code as TEXT only —
@@ -191,8 +195,8 @@
Its CSS is loaded async via load-async-css.js (not paint-critical). -->
<script defer src="libs/prism/prism.js"></script>
<!-- Critical, paint-defining CSS stays render-blocking (avoids FOUC / layout shift). -->
<link rel="stylesheet" href="assets/tailwind.css?v=1786072827999">
<link rel="icon" type="image/x-icon" href="/logo/favicon.ico?v=1786072827999">
<link rel="stylesheet" href="assets/tailwind.css?v=1786294476636">
<link rel="icon" type="image/x-icon" href="/logo/favicon.ico?v=1786294476636">
<!-- Preload only the fonts needed for first paint. fa-solid covers the bulk of UI
icons; fa-regular/fa-brands are loaded on demand by their CSS (rarely on the
first screen). Inter latin 400/700 cover body text and headings/buttons. -->
@@ -200,31 +204,31 @@
<link rel="preload" href="/assets/fonts/inter/files/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/inter/files/inter-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/assets/fonts/inter/inter.css">
<link rel="stylesheet" href="src/styles/main.css?v=1786072827999">
<link rel="stylesheet" href="src/styles/animations.css?v=1786072827999">
<link rel="stylesheet" href="src/styles/components.css?v=1786072827999">
<link rel="stylesheet" href="src/styles/main.css?v=1786294476636">
<link rel="stylesheet" href="src/styles/animations.css?v=1786294476636">
<link rel="stylesheet" href="src/styles/components.css?v=1786294476636">
<!-- Non-critical CSS (FontAwesome ~102KB, Prism) loaded async — no longer blocks paint. -->
<script defer src="src/scripts/load-async-css.js?v=1786072827999"></script>
<script defer src="src/scripts/load-async-css.js?v=1786294476636"></script>
<noscript>
<link rel="stylesheet" href="/assets/fontawesome/css/all.min.css">
<link rel="stylesheet" href="libs/prism/prism.css">
</noscript>
<script defer src="src/scripts/fa-check.js?v=1786072827999"></script>
<script defer src="src/scripts/fa-check.js?v=1786294476636"></script>
<!-- Update Manager - система принудительного обновления -->
<script defer src="src/utils/updateManager.js?v=1786072827999"></script>
<script type="module" src="src/components/UpdateChecker.jsx?v=1786072827999"></script>
<script type="module" src="dist/qr-local.js?v=1786072827999"></script>
<script type="module" src="src/components/QRScanner.js?v=1786072827999"></script>
<script defer src="src/utils/updateManager.js?v=1786294476636"></script>
<script type="module" src="src/components/UpdateChecker.jsx?v=1786294476636"></script>
<script type="module" src="dist/qr-local.js?v=1786294476636"></script>
<script type="module" src="src/components/QRScanner.js?v=1786294476636"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="dist/app-boot.js?v=1786072827999"></script>
<script type="module" src="dist/app.js?v=1786072827999"></script>
<script type="module" src="dist/app-boot.js?v=1786294476636"></script>
<script type="module" src="dist/app.js?v=1786294476636"></script>
<script defer src="src/scripts/pwa-register.js?v=1786072827999"></script>
<script src="./src/pwa/install-prompt.js?v=1786072827999" type="module"></script>
<script src="./src/pwa/pwa-manager.js?v=1786072827999" type="module"></script>
<script defer src="./src/scripts/pwa-offline-test.js?v=1786072827999"></script>
<link rel="stylesheet" href="./src/styles/pwa.css?v=1786072827999">
<script defer src="src/scripts/pwa-register.js?v=1786294476636"></script>
<script src="./src/pwa/install-prompt.js?v=1786294476636" type="module"></script>
<script src="./src/pwa/pwa-manager.js?v=1786294476636" type="module"></script>
<script defer src="./src/scripts/pwa-offline-test.js?v=1786294476636"></script>
<link rel="stylesheet" href="./src/styles/pwa.css?v=1786294476636">
</body>
</html>