From 00bb405b8933ab9b7d6e9df7334f3789d3b948ea Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 14 Oct 2021 10:54:57 +0300
Subject: [PATCH] fix: expand tag column on truncated post (#5667)

---
 .../src/theme/BlogPostItem/index.tsx              | 15 ++++++++++-----
 .../_blog tests/2021-08-23-multiple-authors.md    | 10 ++++++++++
 .../2021-10-07-blog-post-mdx-feed-tests.mdx       |  1 +
 3 files changed, 21 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 48cff8831c..a2b8b9bb0f 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
@@ -63,6 +63,8 @@ function BlogPostItem(props: Props): JSX.Element {
   } = metadata;
 
   const image = assets.image ?? frontMatter.image;
+  const truncatedPost = !isBlogPostPage && truncated;
+  const tagsExists = tags.length > 0;
 
   const renderPostHeader = () => {
     const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
@@ -111,13 +113,13 @@ function BlogPostItem(props: Props): JSX.Element {
         <MDXProvider components={MDXComponents}>{children}</MDXProvider>
       </div>
 
-      {(tags.length > 0 || truncated) && (
+      {(tagsExists || truncated) && (
         <footer
           className={clsx('row docusaurus-mt-lg', {
             [styles.blogPostDetailsFull]: isBlogPostPage,
           })}>
-          {tags.length > 0 && (
-            <div className={clsx('col', {'col--9': !isBlogPostPage})}>
+          {tagsExists && (
+            <div className={clsx('col', {'col--9': truncatedPost})}>
               <TagsListInline tags={tags} />
             </div>
           )}
@@ -128,8 +130,11 @@ function BlogPostItem(props: Props): JSX.Element {
             </div>
           )}
 
-          {!isBlogPostPage && truncated && (
-            <div className="col col--3 text--right">
+          {truncatedPost && (
+            <div
+              className={clsx('col text--right', {
+                'col--3': tagsExists,
+              })}>
               <Link
                 to={metadata.permalink}
                 aria-label={`Read more about ${title}`}>
diff --git a/website/_dogfooding/_blog tests/2021-08-23-multiple-authors.md b/website/_dogfooding/_blog tests/2021-08-23-multiple-authors.md
index 5777def030..81f0e3ab05 100644
--- a/website/_dogfooding/_blog tests/2021-08-23-multiple-authors.md	
+++ b/website/_dogfooding/_blog tests/2021-08-23-multiple-authors.md	
@@ -4,6 +4,16 @@ authors:
   - name: Josh-Cena
     image_url: https://avatars.githubusercontent.com/u/55398995?v=4
     url: https://joshcena.com
+tags:
+  [
+    blog,
+    docusaurus,
+    long,
+    long-long,
+    long-long-long,
+    long-long-long-long,
+    long-long-long-long-long,
+  ]
 ---
 
 # Multiple authors
diff --git a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx
index 3c2511a7eb..72db346e72 100644
--- a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx	
+++ b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx	
@@ -2,6 +2,7 @@
 title: Blog post MDX Feed tests
 authors:
   - slorber
+tags: [blog, docusaurus, long-long, long-long-long, long-long-long-long]
 ---
 
 Some MDX tests, mostly to test how the RSS feed render those