fix(mobile): keyboard flicker, placeholder loop, tablet Enter-to-send, read-receipt bar jump

src/app/components/SwipeableChatWrapper.tsx

@@ -44,8 +44,8 @@ export function SwipeableChatWrapper({
       if (active) {
         x.set(val);
       } else {
-        const swipeThreshold = 120;
-        const velocityThreshold = 0.5;
+        const swipeThreshold = 180;
+        const velocityThreshold = 1.2;
 
         if (val > swipeThreshold || (vx > velocityThreshold && dx > 0 && val > 0)) {
           onOpenSidebar?.();

src/app/components/SwipeableMessageWrapper.tsx

@@ -18,9 +18,9 @@ function ActiveSwipeWrapper({ children, onReply }: { children: ReactNode; onRepl
       if (active) {
         const val = mx < 0 ? mx : 0;
         x.set(Math.max(-80, val));
-        if (mx < -50 !== isReady) setIsReady(mx < -50);
+        if (mx < -80 !== isReady) setIsReady(mx < -80);
       } else {
-        if (mx < -50) onReply();
+        if (mx < -80) onReply();
         x.set(0);
         setIsReady(false);
       }

src/app/components/SwipeableOverlayWrapper.tsx

@@ -40,8 +40,8 @@ export function SwipeableOverlayWrapper({
       if (active) {
         x.set(val);
       } else {
-        const swipeThreshold = 100;
-        const velocityThreshold = 0.5;
+        const swipeThreshold = 150;
+        const velocityThreshold = 1.2;
 
         const swipedLeft =
           direction === 'left' && (val < -swipeThreshold || (vx > velocityThreshold && dx < 0));

src/app/components/editor/Editor.tsx

@@ -2,7 +2,7 @@
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Box, Scroll, Text } from 'folds';
 import type { Descendant, Editor } from 'slate';
-import { Node, createEditor } from 'slate';
+import { Node, Transforms, createEditor } from 'slate';
 import type { RenderLeafProps, RenderElementProps, RenderPlaceholderProps } from 'slate-react';
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
 import { withHistory } from 'slate-history';
@@ -440,10 +440,35 @@
                 onPaste={onPaste}
                 // Defer to OS capitalization setting (respects iOS sentence-case toggle).
                 autoCapitalize="sentences"
+                // Enables autocorrect on iOS, which also helps autocapitalization work.
+                autoCorrect="on"
                 // keeps focus after pressing send.
                 onBlur={() => {
                   if (mobileOrTablet()) ReactEditor.focus(editor);
                 }}
+                // iOS Slate.js bug: an empty contenteditable doesn't signal
+                // "start of sentence" to autocapitalize. A two-frame round-trip
+                // (insert space, then delete it one frame later) lets iOS process
+                // the intermediate "has text" state before seeing the empty field
+                // again — this is what triggers sentence-case on the next keystroke.
+                //
+                // Guard: skip the trick when triggerAutoCapitalize is returning focus
+                // to Slate (justRestoredFocusRef is set synchronously before the
+                // ReactEditor.focus call). Without this guard the space→delete fires
+                // again, handleChange sees non-empty→empty while focused, calls
+                // triggerAutoCapitalize again, and the placeholder flashes in a
+                // tight loop every time a reply is started.
+                onFocus={() => {
+                  if (!mobileOrTablet()) return;
+                  if (justRestoredFocusRef.current) return;
+                  requestAnimationFrame(() => {
+                    if (!ReactEditor.isFocused(editor) || Node.string(editor).length > 0) return;
+                    Transforms.insertText(editor, ' ');
+                    requestAnimationFrame(() => {
+                      Transforms.delete(editor, { reverse: true });
+                    });
+                  });
+                }}
               />
             </Scroll>
             {(hasAfter || showResponsiveAfterInline) && (

src/app/components/emoji-board/EmojiBoard.tsx

@@ -380,6 +380,8 @@ type EmojiBoardProps = {
   imagePackRooms: Room[];
   requestClose: () => void;
   returnFocusOnDeactivate?: boolean;
+  /** Controls whether the FocusTrap is active. Pass false when rendering but hiding the board. */
+  active?: boolean;
   onEmojiSelect?: (unicode: string, shortcode: string) => void;
   onCustomEmojiSelect?: (mxc: string, shortcode: string) => void;
   onStickerSelect?: (mxc: string, shortcode: string, label: string) => void;
@@ -393,6 +395,7 @@ export function EmojiBoard({
   imagePackRooms,
   requestClose,
   returnFocusOnDeactivate,
+  active = true,
   onEmojiSelect,
   onCustomEmojiSelect,
   onStickerSelect,
@@ -534,6 +537,7 @@ export function EmojiBoard({
 
   return (
     <FocusTrap
+      active={active}
       focusTrapOptions={{
         returnFocusOnDeactivate,
         initialFocus: false,

src/app/components/notification-banner/NotificationBanner.tsx

@@ -177,45 +177,9 @@ export function NotificationBanner() {
   // We store an array locally so multiple rapid notifications stack briefly.
   const [banner, setBanner] = useAtom(inAppBannerAtom);
   const [queue, setQueue] = useState<InAppBannerNotification[]>([]);
-  const containerRef = useRef<HTMLDivElement>(null);
 
   log.log('[Banner] Component render, queue length:', queue.length, 'banner:', banner);
 
-  // Adjust banner position for iOS keyboard
-  useEffect(() => {
-    // Only apply on iOS/browsers that support visualViewport
-    if (!('visualViewport' in window)) return undefined;
-
-    const updatePosition = () => {
-      const container = containerRef.current;
-      if (!container) return;
-
-      const visualViewport = window.visualViewport!;
-      // Calculate how much of the screen is covered by the keyboard
-      // When keyboard opens, visualViewport.height shrinks
-      const keyboardHeight = window.innerHeight - visualViewport.height;
-
-      // Position the banner down by the keyboard height so it appears at the top of the visible area
-      // This puts it "halfway down the page" when keyboard covers half the screen
-      if (keyboardHeight > 0) {
-        container.style.top = `${keyboardHeight}px`;
-      } else {
-        // Reset to CSS default (env(safe-area-inset-top))
-        container.style.top = '';
-      }
-    };
-
-    const visualViewport = window.visualViewport!;
-    visualViewport.addEventListener('resize', updatePosition);
-    visualViewport.addEventListener('scroll', updatePosition);
-    updatePosition(); // Initial position
-
-    return () => {
-      visualViewport.removeEventListener('resize', updatePosition);
-      visualViewport.removeEventListener('scroll', updatePosition);
-    };
-  }, []);
-
   // Push new notifications into the local queue.
   useEffect(() => {
     if (!banner) return;
@@ -247,7 +211,7 @@ export function NotificationBanner() {
 
   log.log('[Banner] Rendering', queue.length, 'banners');
   return (
-    <div ref={containerRef} className={css.BannerContainer} aria-live="polite" aria-atomic="false">
+    <div className={css.BannerContainer} aria-live="polite" aria-atomic="false">
       {queue.map((n) => (
         <BannerItem key={n.id} notification={n} onDismiss={handleDismiss} />
       ))}

src/app/components/page/style.css.ts

@@ -60,7 +60,8 @@ export const PageNavContent = style({
   minHeight: '100%',
   padding: config.space.S200,
   paddingRight: 0,
-  paddingBottom: config.space.S700,
+  // Ensure the last nav item is always above the home indicator / Android nav bar.
+  paddingBottom: `max(${config.space.S700}, env(safe-area-inset-bottom, 0px))`,
 });
 
 export const PageHeader = recipe({

src/app/components/splash-screen/SplashScreen.css.ts

@@ -2,11 +2,16 @@ import { style } from '@vanilla-extract/css';
 import { color, config } from 'folds';
 
 export const SplashScreen = style({
-  minHeight: '100%',
+  flexGrow: 1,
   backgroundColor: color.Background.Container,
   color: color.Background.OnContainer,
 });
 
 export const SplashScreenFooter = style({
-  padding: config.space.S400,
+  paddingTop: config.space.S400,
+  paddingLeft: config.space.S400,
+  paddingRight: config.space.S400,
+  // Ensure footer clears the home indicator / Android nav bar.
+  // Falls back to S400 on devices without a bottom safe area.
+  paddingBottom: `max(${config.space.S400}, env(safe-area-inset-bottom, 0px))`,
 });