From e29810ea2a51256e40d787b6af6ee3a29caae686 Mon Sep 17 00:00:00 2001 From: sravan Date: Fri, 17 Jul 2026 21:34:15 +0530 Subject: [PATCH] fix(mobile): un-clip popups, swipe-to-reply, swipe-down-close image, no msg dance, slide-back Addresses reported iOS observations (web-side, no rebuild): - #1: the overflow-x:hidden I added to stop sideways-scroll was clipping the profile/bell popup menus; now only the chat-list scroller is clipped and long content wraps instead of widening the page. - #9: swipe a message bubble right to reply (WhatsApp/Teams style). - #8: swipe an opened image down to dismiss the lightbox. - #7: hide the thread for one frame on open so messages don't visibly scroll/'dance' into place. - #4: slide the outgoing conversation off-screen on back (inline transform, reliable across WebKit). Build marker -> 2026-07-17-batch93. Co-Authored-By: Claude Opus 4.8 --- server/public/home.html | 59 ++++++++++++++++++++++++++++++++++------- 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/server/public/home.html b/server/public/home.html index 003fdf8..5d1422f 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -1027,8 +1027,10 @@ /* #3: kill any horizontal drift on phones (long content, over-wide children, safe-area math) — the page must never pan left/right. Clip every scroll surface and let long words/URLs wrap. */ html,body{overflow-x:hidden;} - .shell,.content,.chatcol,.panel,.convo,.convo-msgs,.chatlist,.side-head,.side-search-row,.chat-row{overflow-x:hidden;max-width:100%;min-width:0;} - .chat-main,.msg,.msg-body,.bubble{min-width:0;max-width:100%;overflow-wrap:anywhere;} + /* Stop the page from widening WITHOUT clipping overlays (profile/bell menus, reaction popups): only + cap the chat-list scroller and let long words/URLs wrap instead of pushing width. */ + .chatlist{overflow-x:hidden;} + .chat-main,.msg,.msg-body,.bubble,.chat-sub,.chat-preview{min-width:0;max-width:100%;overflow-wrap:anywhere;} /* #1/#5: the top safe-area inset (notch / Dynamic Island) is applied PER SURFACE — the chat-list column and each content panel — rather than on the whole shell, so nothing hides under the island and there's no double-padding. Bottom inset is handled by the fixed nav + panel bottom below. */ @@ -1071,10 +1073,11 @@ /* Native-style push/pop: the conversation slides in from the right when opened and slides back out when you go back, so navigation has a clear direction (like Teams/WhatsApp). */ @keyframes bzConvoIn{from{transform:translateX(100%);}to{transform:translateX(0);}} - @keyframes bzConvoOut{from{transform:translateX(0);}to{transform:translateX(100%);}} body.chat-open:not(.chat-closing) .content .panel{animation:bzConvoIn .22s cubic-bezier(.2,.7,.3,1);} body.chat-closing .content{display:block!important;} - body.chat-closing .content .panel{animation:bzConvoOut .2s cubic-bezier(.4,0,.7,.4) forwards;will-change:transform;} + /* Close: the outgoing conversation is slid out via an inline transform in showWelcome() — more + reliable across WebKit than swapping @keyframes on the same element mid-flight. */ + body.chat-closing .content .panel{will-change:transform;} /* Bigger touch targets */ .chat-row{padding:.7rem .85rem;} .convo-head{padding:.7rem .85rem;} @@ -1101,7 +1104,7 @@ -