refactor(theme-classic): fix a few margin inconsistencies (#7129)

* refactor(theme-classic): minor fixes and improvements

* Fixes after review

* Reset spacing for all children inside browser window

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

@@ -176,6 +176,7 @@ declare module '@theme/DocCardList' {
 
   export interface Props {
     readonly items: PropSidebarItem[];
+    readonly className?: string;
   }
 
   export default function DocCardList(props: Props): JSX.Element;

packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -29,6 +29,7 @@
 
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
+  display: block;
 }
 
 .sidebarItemLink:hover {

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

@@ -6,10 +6,12 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 
 import DocCard from '@theme/DocCard';
 import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 import {findFirstCategoryLink} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCardList';
 
 // Filter categories that don't have a link.
 function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
@@ -21,13 +23,9 @@ function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
   });
 }
 
-export default function DocCardList({
+export default function DocCardList({items, className}: Props): JSX.Element {
-  items,
-}: {
-  items: PropSidebarItem[];
-}): JSX.Element {
   return (
-    <div className="row">
+    <div className={clsx('row', className)}>
       {filterItems(items).map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
           <DocCard key={index} item={item} />

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

@@ -61,7 +61,7 @@ function DocCategoryGeneratedIndexPageContent({
           )}
         </header>
         <main className="margin-top--lg">
-          <DocCardList items={category.items} />
+          <DocCardList items={category.items} className={styles.list} />
         </main>
         <footer className="margin-top--lg">
           <DocPaginator

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

@@ -16,3 +16,7 @@
   --ifm-h1-font-size: 3rem;
   margin-bottom: calc(1.25 * var(--ifm-leading));
 }
+
+.list article:nth-last-child(-n + 2) {
+  margin-bottom: 0 !important;
+}

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

@@ -20,3 +20,9 @@
     display: none;
   }
 }
+
+@media print {
+  .tocMobile {
+    display: none;
+  }
+}

packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -60,7 +60,7 @@ export default function LocaleDropdownNavbarItem({
       label={
         <span>
           <IconLanguage className={styles.iconLanguage} />
-          <span>{dropdownLabel}</span>
+          {dropdownLabel}
         </span>
       }
       items={items}

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

@@ -7,6 +7,9 @@
 
 import React from 'react';
 import type {Props} from '@theme/TabItem';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
 
 export default function TabItem({
   children,
@@ -14,7 +17,10 @@ export default function TabItem({
   className,
 }: Props): JSX.Element {
   return (
-    <div role="tabpanel" {...{hidden, className}}>
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItem, className)}
+      {...{hidden}}>
       {children}
     </div>
   );

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

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}

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

@@ -141,7 +141,7 @@ function TabsComponent(props: Props): JSX.Element {
   };
 
   return (
-    <div className="tabs-container">
+    <div className={clsx('tabs-container', styles.tabList)}>
       <ul
         role="tablist"
         aria-orientation="horizontal"
@@ -181,10 +181,10 @@ function TabsComponent(props: Props): JSX.Element {
           children.filter(
             (tabItem) => tabItem.props.value === selectedValue,
           )[0]!,
-          {className: 'margin-vert--md'},
+          {className: 'margin-top--md'},
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className="margin-top--md">
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

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

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
 .tabItem {
   margin-top: 0 !important;
 }

packages/docusaurus-theme-common/src/components/Details/styles.module.css

@@ -56,3 +56,7 @@ CSS variables, meant to be overridden by final theme
   border-top: 1px solid var(--docusaurus-details-decoration-color);
   padding-top: 1rem;
 }
+
+.collapsibleContent > *:last-child {
+  margin-bottom: 0;
+}

website/docs/guides/markdown-features/markdown-features-tabs.mdx

@@ -115,7 +115,6 @@ It is also possible to provide `values` and `defaultValue` props to `Tabs`:
     <TabItem value="banana" label="Banana 2" default>This is a banana 🍌</TabItem>
   </Tabs>
 </BrowserWindow>
-<br/>
 ```
 
 </details>