fix(profile): polish the deactivated account screen on web and mobile#14533
Merged
Conversation
The deactivated profile page rendered its message pinned to the top of a mostly empty page, with no cover photo and a profile picture stuck on a loading skeleton. - Rebuild the tombstone as a centered empty state (heading + supporting copy + button) using harmony primitives, replacing the CSS module and its negative-margin hack for the desktop left column. - Desktop: pass the real userId to CoverPhoto/ProfilePicture. The image hooks already scrub deactivated accounts' images and return the default placeholders; withholding the id left useImageSize unresolved, so no cover photo rendered and the avatar never left its skeleton. - Mobile web: show the default avatar instead of an empty src. - Native: fill the viewport so the message is vertically centered, and show the default cover photo and avatar. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
…le web) The tombstone was capped at `clamp(240px, 32vh, 420px)`, so on mobile web it ended partway down the screen and left roughly half the viewport as dead grey space below the button. Mirror what the native screen already does and let the tombstone flex to fill instead: - Stretch the mobile page container to the scroll area for deactivated profiles (`min-height: 100%`, not `100dvh` — the latter overflows by the height of the announcement banner stacked above it). - Give the tombstone `flex: 1` on mobile web and render it as a direct child of the container so the flex line applies. Desktop keeps the fixed minimum, since that page is sized by its content. - Stop `.headerContainer` (`flex: 1`) from growing when deactivated. Otherwise the header and tombstone split the free space and a ~200px blank band opens up between the avatar and the message. Verified on /cyranomusic under iPhone 13 emulation: page height now equals the viewport with zero overflow, and a normal profile is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The deactivated / deleted account profile page looked broken: the "This Account No Longer Exists" message was pinned to the top of a mostly empty page, there was no cover photo, and the profile picture sat on a loading skeleton forever.
What changed
Shared tombstone (web)
DeactivatedProfileTombstoneas a proper centered empty state — heading, supporting copy, and the CTA — using harmony primitives. Deleted the CSS module, including itsmargin-left: -229pxhack for undoing the desktop left-column padding.Desktop profile page
userIdtoCoverPhotoandProfilePicture.useCoverPhoto/useProfilePicturealready scrub deactivated accounts' images and return the default placeholders (privacy/GDPR), so withholding the id was redundant and harmful:useImageSizeearly-returns when there's no artwork, leavingimageUrlundefined, so the cover photo rendered as bare gradient and the avatar never left its shimmer skeleton.Mobile web
ProfileHeadernow renders the default avatar for deactivated accounts instead of an emptysrc.Native (React Native)
flex: 1) so the message is vertically centered rather than stuck under the header, and it shows the default cover photo strip and default avatar.Verification
Ran the web dev server against production and loaded
/cyranomusic(a deactivated account). Before: no cover photo, skeleton avatar, message pinned to the top. After: default Audius cover photo, default avatar, and the message + button centered in the content area. Typecheck and lint pass for all touched files.Native change verified by inspection — no simulator run.
🤖 Generated with Claude Code