From 6d50f7c9fc562c3fbb95e4037d3d31a5f833c20a Mon Sep 17 00:00:00 2001
From: Bryan Mutai <mutaiwork@gmail.com>
Date: Wed, 18 Jun 2025 02:33:42 +0300
Subject: [PATCH] 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>
---
 components/embed.js        | 28 +++++++++++++++-------------
 components/text.js         |  2 +-
 components/text.module.css |  7 +++++++
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/components/embed.js b/components/embed.js
index 1558f4f5..b336fc81 100644
--- a/components/embed.js
+++ b/components/embed.js
@@ -125,19 +125,21 @@ const Embed = memo(function Embed ({ src, provider, id, meta, className, topLeve
   // This Twitter embed could use similar logic to the video embeds below
   if (provider === 'twitter') {
     return (
-      <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
-        <TwitterTweetEmbed
-          tweetId={id}
-          options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
-          key={darkMode ? '1' : '2'}
-          placeholder={<TweetSkeleton className={className} />}
-          onLoad={() => setOverflowing(true)}
-        />
-        {overflowing && !show &&
-          <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
-            show full tweet
-          </Button>}
-      </div>
+      <>
+        <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
+          <TwitterTweetEmbed
+            tweetId={id}
+            options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
+            key={darkMode ? '1' : '2'}
+            placeholder={<TweetSkeleton className={className} />}
+            onLoad={() => setOverflowing(true)}
+          />
+          {overflowing && !show &&
+            <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+              show full tweet
+            </Button>}
+        </div>
+      </>
     )
   }
 
diff --git a/components/text.js b/components/text.js
index 48a17a3c..654fa3ca 100644
--- a/components/text.js
+++ b/components/text.js
@@ -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>
     },
     img: TextMediaOrLink,
-    embed: Embed
+    embed: (props) => <Embed {...props} topLevel={topLevel} />
   }), [outlawed, rel, TextMediaOrLink, topLevel])
 
   const carousel = useCarousel()
diff --git a/components/text.module.css b/components/text.module.css
index 9e6efb97..fe0b43e4 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -252,11 +252,18 @@
     margin-top: .25rem;
 }
 
+.text li > :is(.twitterContainer, .nostrContainer, .wavlakeWrapper, .spotifyWrapper, .onlyImages) {
+  display: inline-flex;
+  vertical-align: top;
+  width: 100%;
+}
+
 .text ul,
 .text ol {
   margin-top: 0;
   margin-bottom: 0rem;
   padding-left: 2rem;
+  max-width: calc(100% - 1rem);
 }
 
 .text ol ol,