fix embed list bullet to render at top of embed (#2221)

* fix embed list bullet to render at top of embed

* make it work for images/video

* fix tweet skeleton and list horizontal scroll

---------

Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
Bryan Mutai 2025-06-18 02:33:42 +03:00 committed by GitHub
parent a7f73fef90
commit 6d50f7c9fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 14 deletions

View File

@ -125,6 +125,7 @@ const Embed = memo(function Embed ({ src, provider, id, meta, className, topLeve
// This Twitter embed could use similar logic to the video embeds below // This Twitter embed could use similar logic to the video embeds below
if (provider === 'twitter') { if (provider === 'twitter') {
return ( return (
<>
<div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}> <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
<TwitterTweetEmbed <TwitterTweetEmbed
tweetId={id} tweetId={id}
@ -138,6 +139,7 @@ const Embed = memo(function Embed ({ src, provider, id, meta, className, topLeve
show full tweet show full tweet
</Button>} </Button>}
</div> </div>
</>
) )
} }

View File

@ -138,7 +138,7 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link> return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link>
}, },
img: TextMediaOrLink, img: TextMediaOrLink,
embed: Embed embed: (props) => <Embed {...props} topLevel={topLevel} />
}), [outlawed, rel, TextMediaOrLink, topLevel]) }), [outlawed, rel, TextMediaOrLink, topLevel])
const carousel = useCarousel() const carousel = useCarousel()

View File

@ -252,11 +252,18 @@
margin-top: .25rem; margin-top: .25rem;
} }
.text li > :is(.twitterContainer, .nostrContainer, .wavlakeWrapper, .spotifyWrapper, .onlyImages) {
display: inline-flex;
vertical-align: top;
width: 100%;
}
.text ul, .text ul,
.text ol { .text ol {
margin-top: 0; margin-top: 0;
margin-bottom: 0rem; margin-bottom: 0rem;
padding-left: 2rem; padding-left: 2rem;
max-width: calc(100% - 1rem);
} }
.text ol ol, .text ol ol,