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: 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
··· 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 */