grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
fix: move bluesky icon inline in story bottom bar to prevent overlap
Moved the Bluesky cross-post icon from an absolute-positioned overlay
to inline between the comment input and favorite button in the bottom bar.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+9
-15
+9
-15
app/lib/components/organisms/StoryViewer.svelte
+9
-15
app/lib/components/organisms/StoryViewer.svelte
···
405
405
{/if}
406
406
</div>
407
407
408
-
<!-- Bluesky cross-post link -->
409
-
{#if bskyUrl}
410
-
<a class="bsky-link" href={bskyUrl} target="_blank" rel="noopener noreferrer" title="View on Bluesky" onclick={(e) => e.stopPropagation()}>
411
-
<BskyIcon size={16} />
412
-
</a>
413
-
{/if}
414
-
415
408
<!-- Bottom input bar -->
416
409
{#if !isExpired}
417
410
<div class="story-bottom-bar" onclick={(e) => e.stopPropagation()}>
···
427
420
<button class="input-placeholder" onclick={() => { if (!requireAuth()) return; paused = true; stopTimer(); commentSheetOpen = true }}>
428
421
Add a comment...
429
422
</button>
423
+
{#if bskyUrl}
424
+
<a class="bsky-btn" href={bskyUrl} target="_blank" rel="noopener noreferrer" title="View on Bluesky" onclick={(e) => e.stopPropagation()}>
425
+
<BskyIcon size={20} />
426
+
</a>
427
+
{/if}
430
428
<button class="fav-btn" class:faved={isFaved} onclick={() => toggleFav()}>
431
429
<Heart size={24} fill={isFaved ? 'currentColor' : 'none'} />
432
430
</button>
···
654
652
}
655
653
656
654
/* Bluesky link */
657
-
.bsky-link {
658
-
position: absolute;
659
-
bottom: 24px;
660
-
right: 12px;
655
+
.bsky-btn {
661
656
display: flex;
662
657
align-items: center;
663
658
color: white;
664
-
background: rgba(0, 0, 0, 0.4);
665
-
padding: 6px;
666
-
border-radius: 50%;
667
-
backdrop-filter: blur(4px);
659
+
padding: 0;
660
+
flex-shrink: 0;
661
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
668
662
}
669
663
670
664
/* Bottom input bar */