grain.social is a photo sharing platform built on atproto. grain.social
atproto photography appview
57
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: remove profile banner and reposition actions to top-right

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

+29 -38
+29 -38
app/routes/profile/[did]/+page.svelte
··· 117 117 {#if profile.isLoading} 118 118 <DetailHeader label={'\u00A0'} /> 119 119 <div class="profile-header"> 120 - <div class="profile-banner-skeleton"><Skeleton width="100%" height="120px" radius="0" /></div> 121 120 <div class="profile-info"> 122 121 <div class="top-row"> 123 122 <Skeleton circle height="64px" /> ··· 133 132 <DetailHeader label={p.displayName || '\u00A0'} /> 134 133 135 134 <div class="profile-header"> 136 - <div class="profile-banner"></div> 137 - <div class="profile-info"> 138 - <div class="top-row"> 139 - <Avatar {did} src={p.avatar ?? null} name={p.displayName} size={64} {hasStory} onclick={hasStory ? () => (showStoryViewer = true) : p.avatar ? () => (lightboxSrc = p.avatar!) : undefined} /> 140 - <div class="actions"> 141 - {#if viewerDid && viewerDid !== did} 142 - {#if !p.viewer?.blocking && !p.viewer?.blockedBy} 143 - <FollowButton {did} viewerFollow={p.viewer?.following ?? null} onCountChange={(d) => (followersOffset += d)} /> 144 - {/if} 145 - {/if} 146 - <OverflowMenu> 147 - <button class="menu-item" type="button" onclick={handleShare}> 148 - <Share size={15} /> 149 - Share 135 + <div class="actions"> 136 + {#if viewerDid && viewerDid !== did} 137 + {#if !p.viewer?.blocking && !p.viewer?.blockedBy} 138 + <FollowButton {did} viewerFollow={p.viewer?.following ?? null} onCountChange={(d) => (followersOffset += d)} /> 139 + {/if} 140 + {/if} 141 + <OverflowMenu> 142 + <button class="menu-item" type="button" onclick={handleShare}> 143 + <Share size={15} /> 144 + Share 145 + </button> 146 + {#if viewerDid && viewerDid !== did} 147 + {#if !blockHide} 148 + <button class="menu-item" type="button" onclick={handleMute}> 149 + <VolumeX size={15} /> 150 + {p.viewer?.muted ? 'Unmute' : 'Mute'} 150 151 </button> 151 - {#if viewerDid && viewerDid !== did} 152 - {#if !blockHide} 153 - <button class="menu-item" type="button" onclick={handleMute}> 154 - <VolumeX size={15} /> 155 - {p.viewer?.muted ? 'Unmute' : 'Mute'} 156 - </button> 157 - {/if} 158 - <button class="menu-item danger" type="button" onclick={handleBlock}> 159 - <Ban size={15} /> 160 - {p.viewer?.blocking ? 'Unblock' : 'Block'} 161 - </button> 162 - {/if} 163 - </OverflowMenu> 164 - </div> 165 - </div> 152 + {/if} 153 + <button class="menu-item danger" type="button" onclick={handleBlock}> 154 + <Ban size={15} /> 155 + {p.viewer?.blocking ? 'Unblock' : 'Block'} 156 + </button> 157 + {/if} 158 + </OverflowMenu> 159 + </div> 160 + <div class="profile-info"> 161 + <Avatar {did} src={p.avatar ?? null} name={p.displayName} size={64} {hasStory} onclick={hasStory ? () => (showStoryViewer = true) : p.avatar ? () => (lightboxSrc = p.avatar!) : undefined} /> 166 162 <div class="profile-name">{p.displayName || did.slice(0, 18)}</div> 167 163 <div class="handle-row"> 168 164 {#if !blockHide && p.viewer?.followedBy}<span class="follows-you">Follows you</span>{/if} ··· 273 269 274 270 <style> 275 271 .profile-header { border-bottom: 1px solid var(--border); } 276 - .profile-banner-skeleton { line-height: 0; } 277 - .profile-banner { 278 - height: 120px; 279 - background: var(--bg-elevated); 280 - } 281 - .profile-info { padding: 0 16px 16px; position: relative; } 282 - .top-row { display: flex; align-items: flex-start; justify-content: space-between; margin-top: -32px; min-height: 72px; } 283 - .actions { display: flex; gap: 8px; align-items: center; margin-top: 40px; } 272 + .profile-header { position: relative; } 273 + .actions { position: absolute; top: 12px; right: 16px; display: flex; gap: 8px; align-items: center; z-index: 1; } 274 + .profile-info { padding: 16px 16px 16px; } 284 275 .profile-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-top: 10px; } 285 276 .handle-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; } 286 277 .follows-you {