eleven / messenger Public

Revert visualViewport keyboard sizing (broke iOS PWA); keep message bottom-anchor

The --app-height approach made it worse on the iOS PWA (visualViewport didn't
report the keyboard-reduced height reliably, so the chat overflowed and iOS
scrolled the input to the top). Back to height:100%. Kept #feed::before
margin-top:auto so a few messages sit near the composer.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Paul Campbell 4 months ago a3f5ba2b8d260b8ec9b975ea934ff33b9ab1a4e3 parent 11cb918

2 files changed, +2 −14

web/static/chat.js +0 −12
web/static/style.css +2 −2

diff --git a/web/static/chat.js b/web/static/chat.js

index b965e8f..9f96200 100644

--- a/web/static/chat.js

+++ b/web/static/chat.js

@@ -16,18 +16,6 @@ const SESSION_KEY = "lchat_session";

const app = document.getElementById("app");

const session = loadSession();

-// Track the *visible* viewport height (it shrinks when the mobile keyboard opens)

-// so the chat fits above the keyboard instead of overflowing off-screen.

-function setAppHeight() {

- const h = (window.visualViewport && window.visualViewport.height) || window.innerHeight;

- document.documentElement.style.setProperty("--app-height", h + "px");

-setAppHeight();

-window.visualViewport?.addEventListener("resize", setAppHeight);

-window.visualViewport?.addEventListener("scroll", setAppHeight);

-window.addEventListener("resize", setAppHeight);

-window.addEventListener("orientationchange", () => setTimeout(setAppHeight, 150));

route();

// Full-screen onboarding steps come before the chat feed: "Add to Home Screen"

diff --git a/web/static/style.css b/web/static/style.css

index a89cff8..cfa5497 100644

--- a/web/static/style.css

+++ b/web/static/style.css

@@ -53,7 +53,7 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr

/* ---- centered card layout (join / fallback) ---- */

.center {

- min-height: var(--app-height, 100%);

+ min-height: 100%;

display: grid;

place-items: center;

padding: 24px;

@@ -75,7 +75,7 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr

.chat {

display: flex;

flex-direction: column;

- height: var(--app-height, 100dvh);

+ height: 100%;

max-width: 720px;

margin: 0 auto;

background: var(--panel);