Skip to content

Memory Viewer Back Button Positioned Too High

Metadata

  • Date: 2026-05-27
  • Status: fixed
  • Severity: low
  • Related issue/ticket: PR #541 (reverted)
  • Owner: N/A

About

Overview: - The back button in memory-viewer-modal.tsx was positioned using insets.top - 16, which pushed it above the safe area on devices with large top insets (e.g., iPhone with Dynamic Island or notch). On such devices the button was rendered partially or fully off-screen. - This broke back-navigation UX across all memory viewer views (video, audio, image, transcript).

Technical Questions: - Was this introduced intentionally? Yes — PR #541 changed the value from insets.top + 8 to insets.top - 16 and was then reverted/cleaned up. - Root cause is clear: arithmetic error in the inline style override. - No ambiguity about the correct value: the AudioPlayer transcript area uses paddingTop: insets.top + 56 to clear the button (40px button height + 8px top + 8px gap), confirming insets.top + 8 is the intended baseline.

Resources: - main/app/components/memory/memory-viewer-modal.tsx line 476 — viewerClose top override - main/app/components/memory/AudioPlayer.tsx line 355 — paddingTop: insets.top + 56 (proof of expected baseline)

Steps to cause failure

flowchart LR
  OpenApp --> OpenMemoryFeed --> TapMemoryTile --> MemoryViewerModal --> BackButtonOffscreen

System

flowchart TD
  MemoryViewerModal --> FlatList
  MemoryViewerModal --> ViewerCloseButton
  ViewerCloseButton -->|"top: insets.top - 16 (WRONG)"| OffscreenOrMisaligned
  ViewerCloseButton -->|"top: insets.top + 8 (CORRECT)"| AlignedWithStatusBar
  FlatList --> AudioPlayer
  FlatList --> VideoPlayer
  FlatList --> ImageView
  AudioPlayer -->|"paddingTop: insets.top + 56"| TranscriptClearsButton

The viewerClose button is absolutely positioned over the FlatList. The inline style { top: insets.top + N } controls its vertical placement. insets.top is the device safe area height (status bar + notch/island). A positive offset pushes the button down into visible screen space; a negative offset pushes it up toward or past the edge.

Reproduction Details

  1. Open app on a device with a top safe area inset (iPhone notch/Dynamic Island, or emulator with status bar).
  2. Tap any memory tile to open the MemoryViewerModal.
  3. Observe the back button position — with insets.top - 16, it renders above the safe area, partially or fully hidden.

Reproduction test (unit test): N/A — this is a pure layout positioning issue not feasibly testable in Jest without a real device layout engine.

Notes for PR

Root cause: PR #541 changed insets.top + 8 to insets.top - 16 in the inline style for the viewerClose back button in memory-viewer-modal.tsx. This subtracted 16 from the safe area inset instead of adding 8, pushing the button upward. The correct value insets.top + 8 positions the button 8px below the top safe area edge, consistent with the AudioPlayer's transcript padding (insets.top + 56 = insets.top + 8 + 40px button + 8px gap).

Fix: Restored the top value to insets.top + 8 at line 476 of memory-viewer-modal.tsx.

Audit Log

ID Action Note Context
1 Create audit log Initialize bug investigation PR #541 reverted, user reports back button misaligned
2 Identify root cause insets.top - 16 instead of insets.top + 8 in viewerClose style Confirmed via AudioPlayer paddingTop = insets.top + 56 cross-reference
3 Apply fix Changed insets.top - 16 → insets.top + 8 in memory-viewer-modal.tsx line 476 Single-line change

Verification

  • [ ] Reproduced failure before fix
  • [ ] Reproduction test fails before fix
  • [x] Root cause identified with evidence
  • [x] Fix applied at source (no workaround-only patch)
  • [ ] Reproduction test passes after fix
  • [ ] Reproduction path now passes
  • [x] Regression test added/updated — N/A: layout positioning not testable in Jest
  • [x] Verified no duplicate solved-bug log exists for same root cause