fix(theme): fix <DocCard> height inconsistency (#10849)

Co-authored-by: sebastien <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -624,7 +624,9 @@ declare module '@theme/DocPaginator' {
   import type {PropNavigation} from '@docusaurus/plugin-content-docs';
 
   // May be simpler to provide a {navigation: PropNavigation} prop?
-  export interface Props extends PropNavigation {}
+  export interface Props extends PropNavigation {
+    className?: string;
+  }
 
   export default function DocPaginator(props: Props): ReactNode;
 }

packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {type ComponentProps, type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   useCurrentSidebarSiblings,
@@ -13,12 +13,25 @@ import {
 } from '@docusaurus/plugin-content-docs/client';
 import DocCard from '@theme/DocCard';
 import type {Props} from '@theme/DocCardList';
+import styles from './styles.module.css';
 
 function DocCardListForCurrentSidebarCategory({className}: Props) {
   const items = useCurrentSidebarSiblings();
   return <DocCardList items={items} className={className} />;
 }
 
+function DocCardListItem({
+  item,
+}: {
+  item: ComponentProps<typeof DocCard>['item'];
+}) {
+  return (
+    <article className={clsx(styles.docCardListItem, 'col col--6')}>
+      <DocCard item={item} />
+    </article>
+  );
+}
+
 export default function DocCardList(props: Props): ReactNode {
   const {items, className} = props;
   if (!items) {
@@ -28,9 +41,7 @@ export default function DocCardList(props: Props): ReactNode {
   return (
     <section className={clsx('row', className)}>
       {filteredItems.map((item, index) => (
-        <article key={index} className="col col--6 margin-bottom--lg">
+        <DocCardListItem key={index} item={item} />
-          <DocCard item={item} />
-        </article>
       ))}
     </section>
   );

packages/docusaurus-theme-classic/src/theme/DocCardList/styles.module.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.docCardListItem {
+  margin-bottom: 2rem;
+}
+
+.docCardListItem > * {
+  height: 100%;
+}

packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -53,7 +53,7 @@ function DocCategoryGeneratedIndexPageContent({
       <article className="margin-top--lg">
         <DocCardList items={category.items} className={styles.list} />
       </article>
-      <footer className="margin-top--lg">
+      <footer className="margin-top--md">
         <DocPaginator
           previous={categoryGeneratedIndex.navigation.previous}
           next={categoryGeneratedIndex.navigation.next}

packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css

@@ -9,10 +9,6 @@
   .generatedIndexPage {
     max-width: 75% !important;
   }
-
-  .list article:nth-last-child(-n + 2) {
-    margin-bottom: 0 !important;
-  }
 }
 
 /* Duplicated from .markdown h1 */
@@ -20,7 +16,3 @@
   --ifm-h1-font-size: 3rem;
   margin-bottom: calc(1.25 * var(--ifm-leading));
 }
-
-.list article:last-child {
-  margin-bottom: 0 !important;
-}

packages/docusaurus-theme-classic/src/theme/DocItem/Paginator/index.tsx

@@ -15,5 +15,11 @@ import DocPaginator from '@theme/DocPaginator';
  */
 export default function DocItemPaginator(): ReactNode {
   const {metadata} = useDoc();
-  return <DocPaginator previous={metadata.previous} next={metadata.next} />;
+  return (
+    <DocPaginator
+      className="docusaurus-mt-lg"
+      previous={metadata.previous}
+      next={metadata.next}
+    />
+  );
 }

packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx

@@ -6,15 +6,16 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/DocPaginator';
 
 export default function DocPaginator(props: Props): ReactNode {
-  const {previous, next} = props;
+  const {className, previous, next} = props;
   return (
     <nav
-      className="pagination-nav docusaurus-mt-lg"
+      className={clsx(className, 'pagination-nav')}
       aria-label={translate({
         id: 'theme.docs.paginator.navAriaLabel',
         message: 'Docs pages',