From 6f612064bd47f021f514f2c409b2c7225f4cf162 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Wed, 22 Jul 2026 12:36:29 -0700
Subject: [PATCH 1/2] fix(profile): polish the deactivated account screen on
 web and mobile

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>
---
 .../DeactivatedProfileTombstone.tsx           | 59 +++++++++++++++----
 .../DeactivatedProfileTombstone.module.css    | 28 ---------
 .../DeactivatedProfileTombstone.tsx           | 49 ++++++++++-----
 .../components/desktop/ProfilePage.tsx        | 15 +++--
 .../components/mobile/ProfileHeader.tsx       |  9 ++-
 5 files changed, 96 insertions(+), 64 deletions(-)
 delete mode 100644 packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css

diff --git a/packages/mobile/src/screens/profile-screen/DeactivatedProfileTombstone.tsx b/packages/mobile/src/screens/profile-screen/DeactivatedProfileTombstone.tsx
index bb8bc3e9406..c7005903b57 100644
--- a/packages/mobile/src/screens/profile-screen/DeactivatedProfileTombstone.tsx
+++ b/packages/mobile/src/screens/profile-screen/DeactivatedProfileTombstone.tsx
@@ -2,13 +2,25 @@ import { useCallback } from 'react'
 
 import { route } from '@audius/common/utils'
 import { useLinkTo } from '@react-navigation/native'
+import { ImageBackground } from 'react-native'
 
-import { Button, Flex, IconArrowRight, Text } from '@audius/harmony-native'
+import {
+  Avatar,
+  Button,
+  Flex,
+  IconArrowRight,
+  Text
+} from '@audius/harmony-native'
+import imageCoverPhotoBlank from 'app/assets/images/imageCoverPhotoBlank.jpg'
+import imageProfilePicEmpty from 'app/assets/images/imageProfilePicEmpty2X.png'
 
 const { FEED_PAGE } = route
 
+const COVER_PHOTO_HEIGHT = 96
+
 const messages = {
   helpText: 'This Account No Longer Exists',
+  description: 'The account you’re looking for has been deleted.',
   buttonText: 'Take Me Back To The Music'
 }
 
@@ -20,18 +32,41 @@ export const DeactivatedProfileTombstone = () => {
   }, [linkTo])
 
   return (
-    <Flex column alignItems='center' ph='m' pv='xl' gap='m'>
-      <Text variant='body' strength='default' textAlign='center'>
-        {messages.helpText}
-      </Text>
-      <Button
-        variant='primary'
-        fullWidth
-        iconRight={IconArrowRight}
-        onPress={handlePress}
+    <Flex flex={1} column backgroundColor='white'>
+      <ImageBackground
+        source={imageCoverPhotoBlank}
+        style={{ height: COVER_PHOTO_HEIGHT }}
+        resizeMode='repeat'
+      />
+      {/* Fills the remaining viewport so the message sits centered rather
+          than pinned beneath the cover photo. */}
+      <Flex
+        flex={1}
+        column
+        alignItems='center'
+        justifyContent='center'
+        gap='xl'
+        ph='l'
+        pv='2xl'
       >
-        {messages.buttonText}
-      </Button>
+        <Avatar source={imageProfilePicEmpty} size='xxl' variant='strong' />
+        <Flex column alignItems='center' gap='s'>
+          <Text variant='heading' size='s' textAlign='center'>
+            {messages.helpText}
+          </Text>
+          <Text variant='body' size='l' color='subdued' textAlign='center'>
+            {messages.description}
+          </Text>
+        </Flex>
+        <Button
+          variant='primary'
+          fullWidth
+          iconRight={IconArrowRight}
+          onPress={handlePress}
+        >
+          {messages.buttonText}
+        </Button>
+      </Flex>
     </Flex>
   )
 }
diff --git a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css
deleted file mode 100644
index 3e1e0e6b656..00000000000
--- a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.deactivated {
-  color: var(--harmony-neutral);
-  font-size: var(--harmony-font-m);
-  font-weight: var(--harmony-font-medium);
-  text-align: center;
-
-  margin-top: 38px;
-  padding: 3px;
-  user-select: none;
-}
-.deactivated:not(.mobile) {
-  /** Offset to undo desktop left padding **/
-  width: calc(100% + 229px);
-  margin-left: -229px;
-}
-.deactivatedText {
-  margin: 42px 0;
-  padding: 22px 0;
-}
-
-.mobile.deactivated {
-  margin: 0;
-  padding: 24px 12px;
-  background-color: var(--harmony-white);
-}
-.mobile .deactivatedText {
-  margin: 24px 0 12px;
-}
diff --git a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
index f07f16467ed..6db6cb684ca 100644
--- a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
+++ b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
@@ -1,14 +1,12 @@
 import { route } from '@audius/common/utils'
-import { Button, IconArrowRight } from '@audius/harmony'
-import cn from 'classnames'
+import { Button, Flex, IconArrowRight, Text } from '@audius/harmony'
 import { Link } from 'react-router'
 
-import styles from './DeactivatedProfileTombstone.module.css'
-
 const { HOME_PAGE } = route
 
 const messages = {
   helpText: 'This Account No Longer Exists',
+  description: 'The account you’re looking for has been deleted.',
   buttonText: 'Take Me Back To The Music'
 }
 
@@ -18,16 +16,39 @@ export const DeactivatedProfileTombstone = ({
   isMobile?: boolean
 }) => {
   return (
-    <div className={cn(styles.deactivated, { [styles.mobile]: isMobile })}>
-      <div className={styles.deactivatedText}>{messages.helpText}</div>
-      <Button
-        variant='primary'
-        fullWidth={isMobile}
-        asChild
-        iconRight={IconArrowRight}
+    <Flex
+      w='100%'
+      column
+      alignItems='center'
+      justifyContent='center'
+      p='xl'
+      // Fill the space below the profile header so the message reads as a
+      // centered empty state rather than being pinned to the top.
+      css={{ minHeight: 'clamp(240px, 32vh, 420px)', userSelect: 'none' }}
+    >
+      <Flex
+        column
+        alignItems='center'
+        gap='xl'
+        css={{ width: '100%', maxWidth: 400 }}
       >
-        <Link to={HOME_PAGE}>{messages.buttonText}</Link>
-      </Button>
-    </div>
+        <Flex column alignItems='center' gap='s'>
+          <Text variant='heading' size='m' textAlign='center'>
+            {messages.helpText}
+          </Text>
+          <Text variant='body' size='l' color='subdued' textAlign='center'>
+            {messages.description}
+          </Text>
+        </Flex>
+        <Button
+          variant='primary'
+          fullWidth={isMobile}
+          asChild
+          iconRight={IconArrowRight}
+        >
+          <Link to={HOME_PAGE}>{messages.buttonText}</Link>
+        </Button>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
index 35d4317e55e..66a91b2c85f 100644
--- a/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
+++ b/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
@@ -450,8 +450,12 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
       fromOpacity={1}
     >
       <Box ref={profileFocusRootRef} w='100%' pb='2xl'>
+        {/* `useCoverPhoto`/`useProfilePicture` already scrub deactivated
+            accounts' images and return the default placeholders, so pass the
+            real userId — withholding it leaves the hooks unresolved and the
+            images stuck on a loading skeleton. */}
         <CoverPhoto
-          userId={isDeactivated ? null : userId}
+          userId={userId}
           updatedCoverPhoto={updatedCoverPhoto ? updatedCoverPhoto.url : ''}
           error={updatedCoverPhoto ? updatedCoverPhoto.error : false}
           loading={status === Status.LOADING}
@@ -484,7 +488,7 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
               >
                 {/* @ts-ignore */}
                 <ProfilePicture
-                  userId={isDeactivated ? undefined : userId}
+                  userId={userId}
                   updatedProfilePicture={
                     updatedProfilePicture ? updatedProfilePicture.url : ''
                   }
@@ -551,12 +555,7 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
           <Box>
             <EmptyStatBanner />
             <EmptyNavBanner />
-            <FlushPageContainer>
-              <Flex flex='1 1 100%' mh='auto' columnGap={PROFILE_COLUMN_GAP}>
-                <LeftColumnSpacer />
-                {status === Status.SUCCESS && <DeactivatedProfileTombstone />}
-              </Flex>
-            </FlushPageContainer>
+            {status === Status.SUCCESS && <DeactivatedProfileTombstone />}
           </Box>
         ) : (
           <Mask show={editMode} zIndex={zIndex.PROFILE_EDIT_MASK}>
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
index 945cbfa9c90..cd355843cee 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
@@ -1,7 +1,10 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 
 import { useArtistCreatedFanClub } from '@audius/common/api'
-import { imageCoverPhotoBlank } from '@audius/common/assets'
+import {
+  imageCoverPhotoBlank,
+  imageProfilePicEmpty
+} from '@audius/common/assets'
 import {
   Name,
   SquareSizes,
@@ -297,7 +300,9 @@ const ProfileHeader = ({
       </GrowingCoverPhoto>
       <Image
         src={
-          isDeactivated ? undefined : updatedProfilePicture || profilePicture
+          isDeactivated
+            ? imageProfilePicEmpty
+            : updatedProfilePicture || profilePicture
         }
         alt={messages.profilePicAltText}
         className={cn(styles.profilePictureWrapper, styles.profilePicture, {

From eac88e420abf8f0818a8ac3b32e43dc2a687a412 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Thu, 23 Jul 2026 13:39:27 -0700
Subject: [PATCH 2/2] fix(profile): fill the viewport on the deactivated
 profile page (mobile web)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/DeactivatedProfileTombstone.tsx    | 11 +++++++++--
 .../components/mobile/ProfileHeader.module.css    | 10 ++++++++++
 .../components/mobile/ProfileHeader.tsx           |  6 +++++-
 .../components/mobile/ProfilePage.module.css      | 15 +++++++++++++++
 .../components/mobile/ProfilePage.tsx             | 12 ++++++------
 5 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
index 6db6cb684ca..8e8228839f9 100644
--- a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
+++ b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
@@ -23,8 +23,15 @@ export const DeactivatedProfileTombstone = ({
       justifyContent='center'
       p='xl'
       // Fill the space below the profile header so the message reads as a
-      // centered empty state rather than being pinned to the top.
-      css={{ minHeight: 'clamp(240px, 32vh, 420px)', userSelect: 'none' }}
+      // centered empty state rather than being pinned to the top. On mobile
+      // web the page container is stretched to the viewport, so `flex: 1`
+      // claims everything below the header; on desktop the page is sized by
+      // its content, so fall back to a fixed minimum.
+      flex={isMobile ? 1 : undefined}
+      css={{
+        minHeight: isMobile ? undefined : 'clamp(240px, 32vh, 420px)',
+        userSelect: 'none'
+      }}
     >
       <Flex
         column
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css
index ec4fbcad3b8..b3d1bee8382 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css
@@ -9,6 +9,16 @@
   flex-direction: column;
 }
 
+/**
+ * Deactivated profiles render no artist info below the cover photo, so the
+ * header must size to its content instead of growing into the space the
+ * tombstone claims — otherwise the two split the viewport and leave a blank
+ * band between the avatar and the message.
+ */
+.headerContainer.deactivated {
+  flex: none;
+}
+
 .coverPhoto {
   display: flex;
   flex-direction: column;
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
index cd355843cee..44391052c28 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
@@ -280,7 +280,11 @@ const ProfileHeader = ({
   }
 
   return (
-    <div className={styles.headerContainer}>
+    <div
+      className={cn(styles.headerContainer, {
+        [styles.deactivated]: isDeactivated
+      })}
+    >
       <GrowingCoverPhoto
         src={updatedCoverPhoto || coverPhoto}
         style={coverPhotoStyle}
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.module.css b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.module.css
index d4d173e28e1..19c83714285 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.module.css
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.module.css
@@ -1,6 +1,21 @@
 .container {
   flex-direction: column;
 }
+
+/**
+ * Deactivated profiles have no tabs or lineups, so the page would otherwise
+ * end just below the header and leave the rest of the viewport blank. Stretch
+ * the container to the full viewport so the tombstone (flex: 1) can fill it.
+ */
+.deactivatedContainer {
+  /**
+   * 100% (not 100dvh) so the page stops at the bottom of the scroll area
+   * rather than overflowing by the height of anything stacked above it,
+   * e.g. the announcement banner.
+   */
+  min-height: 100%;
+}
+
 /* Bottom Section */
 
 .tracksLineupContainer {
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
index 49ef7c50de0..30912f8ad98 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
@@ -433,11 +433,9 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
   }
 
   if (profile.is_deactivated) {
-    content = (
-      <div className={styles.contentContainer}>
-        <DeactivatedProfileTombstone isMobile />
-      </div>
-    )
+    // Rendered as a direct child of the page container (a flex column) so the
+    // tombstone's `flex: 1` can claim the space left below the header.
+    content = <DeactivatedProfileTombstone isMobile />
   } else if (!isLoading && !isEditing) {
     content = (
       <div className={styles.contentContainer}>
@@ -463,7 +461,9 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
         structuredData={structuredData}
         entityType='user'
         hashId={profile?.user_id ? Id.parse(profile.user_id) : undefined}
-        containerClassName={styles.container}
+        containerClassName={cn(styles.container, {
+          [styles.deactivatedContainer]: profile.is_deactivated
+        })}
       >
         <ProfileHeader
           isDeactivated={profile.is_deactivated ?? false}