From 22eebea81ef1b791bca058743d9fffd5da85d962 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 26 Aug 2021 15:31:22 +0300
Subject: [PATCH] fix: make tags wrapping properly (#5422)

---
 .../src/theme/BlogPostItem/index.tsx                        | 4 ++--
 .../src/theme/TagsListInline/styles.module.css              | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
index ae45640ef7..48cff8831c 100644
--- 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
index d77c975550..e8c8da6397 100644
--- 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;
 }