fix: expand tag column on truncated post (#5667)

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 && (
+          {tagsExists && (
-            <div className={clsx('col', {'col--9': !isBlogPostPage})}>
+            <div className={clsx('col', {'col--9': truncatedPost})}>
               <TagsListInline tags={tags} />
             </div>
           )}
@@ -128,8 +130,11 @@ function BlogPostItem(props: Props): JSX.Element {
             </div>
           )}
 
-          {!isBlogPostPage && truncated && (
+          {truncatedPost && (
-            <div className="col col--3 text--right">
+            <div
+              className={clsx('col text--right', {
+                'col--3': tagsExists,
+              })}>
               <Link
                 to={metadata.permalink}
                 aria-label={`Read more about ${title}`}>

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

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