grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
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
+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 {