Common Layout Overflow in Messaging Apps: Causes and Fixes

Layout overflow in messaging apps isn't just a visual bug — it breaks core user flows. When a message bubble renders outside the viewport, when a reply thread pushes the composer off-screen, or when a

Layout overflow in messaging apps isn't just a visual bug — it breaks core user flows. When a message bubble renders outside the viewport, when a reply thread pushes the composer off-screen, or when an emoji picker overlaps the send button, users can't communicate. In a messaging app, that's a P0.

---

1. What Causes Layout Overflow in Messaging Apps

Unbounded Content in Constrained Containers

Message bubbles are the classic case. A RecyclerView/FlatList item with wrap_content height but no max-width constraint on the text view. Long URLs, unbroken strings (tracking numbers, crypto addresses), or RTL/LTR mixing force the bubble wider than the screen.

Dynamic Content Without Layout Passes

Keyboards appear. Emoji pickers expand. Reply previews slide in. Voice note waveforms animate. Each changes available space. If the message list doesn't re-layout — or re-layouts asynchronously — frames drop and overflow occurs.

Nested Scroll Views

ScrollView inside RecyclerView inside NestedScrollView. The inner scroll consumes touch events, the outer doesn't know its child grew, and the bottom message sits behind the composer. Common in thread views and media galleries.

Safe Area Ignorance

Notches, punch-holes, gesture bars, fold creases. A message list padded for iPhone 14's Dynamic Island renders fine. On a foldable half-open, the same padding pushes the last message under the hinge.

Text Measurement Edge Cases

• Zero-width joiners (ZWJ) in emoji sequences: 👨‍👩‍👧‍👦 measures as 1 char but renders 4 glyphs
• Combining diacritics: e\u0301 vs é — different advance widths
• Variable-width fonts in monospace contexts (code blocks, timestamps)
• CJK characters in Latin line-height calculations

---

2. Real-World Impact

Users don't file bugs. They switch. Telegram, WhatsApp, Signal, iMessage — switching cost is near zero.

---

3. 5–7 Specific Manifestations in Messaging Apps

1. Composer Obscured by Keyboard + Reply Preview

User taps "Reply" on message #47. Reply preview bar slides down. Keyboard slides up. Composer EditText gets squeezed to 12dp height. Cursor invisible. Send button tap target < 24dp.

2. Message Bubble Exceeds Screen Width

Paste a 200-char tracking number. No word-break opportunities. Bubble width = 520dp on 360dp screen. Horizontal scroll appears *inside* the list item. User must swipe each message horizontally.

3. Emoji Picker Overlaps Last Message

Bottom sheet height: 40% hardcoded. On landscape foldable, 40% = 180dp. Last message sits at 200dp from bottom. Picker covers it. User can't reference the message they're reacting to.

4. Voice Note Waveform Pushes Content

Waveform animates width: 0 → 280dp. Adjacent timestamp TextView gets pushed off-screen. layout_weight not set on timestamp. No ellipsize="end". Timestamp vanishes.

5. Thread View Header Collapse Failure

Thread header (participants, topic) uses CollapsingToolbarLayout. Message list RecyclerView doesn't implement NestedScrollingChild3. Header doesn't collapse. Thread title overlaps first message. User can't read context.

6. Media Gallery Horizontal Overflow

ViewPager2 for shared media. Page margin 16dp + page width match_parent. Last page clips. On RTL, first page clips. clipToPadding="false" missing. paddingEnd not mirrored.

7. System Font Scaling Breaks Fixed Heights

User sets "Large" or "Largest" system font. Message bubble min-height: 48dp hardcoded. Text wraps to 3 lines. Bubble clips text. maxLines not set on TextView. Accessibility service reads truncated content.

---

4. How to Detect Layout Overflow

Automated: SUSA Autonomous Exploration

pip install susatest-agent
susatest explore --apk app-release.apk --personas accessibility,elderly,power-user

SUSA's accessibility persona runs at 200% font scale, rotates device, opens keyboard, triggers every bottom sheet. It captures:

• Element bounds vs. screen bounds (overflow = element.right > screen.width)
• Touch target size < 48dp (WCAG 2.5.5)
• Scrollable content not reachable
• JUnit XML with screenshot + view hierarchy per failure

Manual: Layout Inspector + Device Config Matrix

What to look for in Layout Inspector:

• Red bounds extending past parent
• ViewGroup measured width > parent measured width
• ScrollView fillViewport="false" with tall child
• ConstraintLayout chains broken by GONE views

CI Gate: Pixel Diff + Accessibility Scan

# .github/workflows/layout-check.yml
- uses: susatest/agent-action@v1
  with:
    apk: app/build/outputs/apk/release/app-release.apk
    fail-on: overflow,accessibility,touch-target
    personas: accessibility,elderly

Fails PR if any message bubble exceeds 95% screen width at 200% font scale.

---

5. How to Fix Each Example (Code-Level)

1. Composer Obscured → WindowInsetsAnimation + IME Listener

// Compose
val ime = WindowInsets.ime
val keyboardHeight by remember { mutableStateOf(0) }
LaunchedEffect(ime) {
    snapshotFlow { ime.source }.collect { source ->
        keyboardHeight = if (source == WindowInsets.Source.IME) ime.bottom