fix: make tags wrapping properly (#5422)

facebook · Aug 26, 2021 · 22eebea · 22eebea
1 parent e6f4a9b
commit 22eebea
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
@@ -117,7 +117,7 @@ function BlogPostItem(props: Props): JSX.Element {
             [styles.blogPostDetailsFull]: isBlogPostPage,
           })}>
           {tags.length > 0 && (
-            <div className="col">
+            <div className={clsx('col', {'col--9': !isBlogPostPage})}>
               <TagsListInline tags={tags} />
             </div>
           )}
@@ -129,7 +129,7 @@ function BlogPostItem(props: Props): JSX.Element {
           )}
 
           {!isBlogPostPage && truncated && (
-            <div className="col text--right">
+            <div className="col col--3 text--right">
               <Link
                 to={metadata.permalink}
                 aria-label={`Read more about ${title}`}>

diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css
@@ -6,10 +6,10 @@
  */
 
 .tags {
-  list-style: none;
-  display: inline-flex;
+  display: inline;
 }
 
 .tag {
-  margin-right: 0.4rem;
+  margin: 0 0.4rem 0.5rem 0;
+  display: inline-block;
 }