@seqera/docusaurus-theme-seqera 1.0.6 → 1.0.7

package/lib/index.js

@@ -54,6 +54,7 @@ function themeSeqera(context, options) {
                 './nprogress',
                 './styles/typography.css',
                 './main-styles.css',
+                './styles/buttons.css',
                 './styles/api.css',
                 './styles/search.css',
                 './styles/admonition-alerts.css',

package/lib/languages/prism-nextflow.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/languages/prism-nextflow.js

@@ -0,0 +1,24 @@
+(function (Prism) {
+  Prism.languages.nextflow = Prism.languages.extend('groovy', {
+    'keyword': /\b(?:as|assert|boolean|byte|catch|char|def|double|else|enum|float|if|in|instanceof|int|long|new|return|short|throw|try|void|process|workflow|input|output|exec|shell|script|stub|include|from)\b/,
+    'string': {
+      pattern: /"""(?:[^\\]|\\[\s\S])*?"""|'''(?:[^\\]|\\[\s\S])*?'''|'(?:\\.|[^\\'\r\n])*'|"(?:\\.|[^\\"\r\n])*"/,
+      greedy: true
+    },
+    'operator': {
+      pattern: /(^|[^.])(?:~|==?~?|\?[.:]?|\*(?:[.=]|\*=?)?|\.[@&]|\.\.<|\.\.(?!\.)|-[-=>]?|\+[+=]?|!=?|<(?:<=?|=>?)?|>(?:>>?=?|=)?|&[&=]?|\|[|=]?|\/=?|\^=?|%=?)/,
+      lookbehind: true
+    },
+    'punctuation': /\.+|[{}[\];(),:$]/
+  });
+
+  // Add support for Nextflow-specific directives
+  Prism.languages.insertBefore('nextflow', 'keyword', {
+    'directive': {
+      pattern: /(?:^|\n)\s*(?:process|workflow|exec|shell|script|stub|container|conda|module|include|from|publishDir|input|output):/,
+      lookbehind: true,
+      alias: 'keyword'
+    }
+  });
+
+}(Prism));

package/lib/main-styles.css

@@ -1,44 +1,11 @@
 @import 'tailwindcss';
-@plugin "daisyui";
 @config "../tailwind.config.js";
 
 /* Dark mode variant */
 @custom-variant dark (&:is([data-theme="dark"] *));
 
-/* Daisy UI settings */
-@plugin "daisyui/theme" {
-  name: 'light';
-  default: true;
-  --color-primary: var(--color-nextflow-800);
-  --color-secondary: var(--color-nextflow-500);
-  --color-accent: #f59e0b;
-  --color-neutral: #3d4451;
-  --color-base-100: #ffffff;
-  --color-base-200: #f2f2f2;
-  --color-base-300: #e5e6e6;
-  --color-info: #3abff8;
-  --color-success: #36d399;
-  --color-warning: #fbbd23;
-  --color-error: #f87272;
-}
-
-@plugin "daisyui/theme" {
-  name: 'dark';
-  --color-primary: var(--color-nextflow-500);
-  --color-secondary: var(--color-nextflow-500);
-  --color-accent: #1fb2a5;
-  --color-neutral: #191d24;
-  --color-base-100: rgb(28, 28, 30);
-  --color-base-200: #242933;
-  --color-base-300: #20252e;
-  --color-info: #3abff8;
-  --color-success: #36d399;
-  --color-warning: #fbbd23;
-  --color-error: #f87272;
-}
-
 /***
-Infima is Docusaurus's built in CSS framework. 
+Infima is Docusaurus's built in CSS framework.
 
 - We have removed Infima using CSS Cascade Layers (https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-css-cascade-layers),
 - We do this so we can more seamless integrate Tailwind 4
@@ -47,14 +14,22 @@ Infima is Docusaurus's built in CSS framework.
 **/
 :root {
   /* the primary color is set to nextflow-900 because it's the most web accessible */
-  --ifm-color-primary: var(--color-nextflow-900);
+  /* --ifm-color-primary: var(--color-nextflow-900);
   --ifm-color-primary-dark: var(--color-nextflow-700);
   --ifm-color-primary-darker: var(--color-nextflow-800);
   --ifm-color-primary-darkest: var(--color-nextflow-900);
   --ifm-color-primary-light: var(--color-nextflow-400);
   --ifm-color-primary-lighter: var(--color-nextflow-300);
   --ifm-color-primary-lightest: var(--color-nextflow-200);
-  --ifm-badge-background-color: var(--color-nextflow-300);
+  --ifm-badge-background-color: var(--color-nextflow-300); */
+  --ifm-color-primary: var(--color-blu-600);
+  --ifm-color-primary-dark: var(--color-blu-700);
+  --ifm-color-primary-darker: var(--color-blu-800);
+  --ifm-color-primary-darkest: var(--color-blu-900);
+  --ifm-color-primary-light: var(--color-blu-400);
+  --ifm-color-primary-lighter: var(--color-blu-300);
+  --ifm-color-primary-lightest: var(--color-blu-200);
+  --ifm-badge-background-color: var(--color-blu-300);
   --ifm-navbar-sidebar-width: 100%;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -65,13 +40,11 @@ Infima is Docusaurus's built in CSS framework.
 
   --ifm-color-info: var(--color-multiqc-600);
 
-
   /* remove box shadow variables */
   --ifm-global-shadow-lw: none;
   --ifm-global-shadow-md: none;
   --ifm-global-shadow-tl: none;
 
-    
   /* Nextflow (green) colors */
   --color-nextflow-100: #e2f7f3;
   --color-nextflow-200: #b6ece2;
@@ -177,6 +150,20 @@ Infima is Docusaurus's built in CSS framework.
   --color-blu-900: #2c3999;
   --color-blu-1000: #1e2768;
   --color-blu: #4256e7;
+
+  /* --color-primary: var(--color-nextflow-800);
+  --color-secondary: var(--color-nextflow-500); */
+  --color-primary: var(--color-blu-800);
+  --color-secondary: var(--color-blu-600);
+  --color-accent: var(--color-blu-200);
+  --color-neutral: #3d4451;
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-info: var(--color-wave-600);
+  --color-success: var(--color-nextflow-500);
+  --color-warning: var(--color-multiqc-600);
+  --color-error: var(--color-fusion-600);
 }
 
 /* Dark Mode Support */
@@ -189,19 +176,43 @@ Infima is Docusaurus's built in CSS framework.
 /* Dark mode */
 [data-theme='dark'] {
   color-scheme: dark;
-  --ifm-color-primary: var(--color-nextflow-300);
+  /* --ifm-color-primary: var(--color-nextflow-300);
   --ifm-color-primary-dark: var(--color-nextflow-400);
   --ifm-color-primary-darker: var(--color-nextflow-500);
   --ifm-color-primary-darkest: var(--color-nextflow-600);
   --ifm-color-primary-light: var(--color-nextflow-300);
   --ifm-color-primary-lighter: var(--color-nextflow-200);
-  --ifm-color-primary-lightest: var(--color-nextflow-100);
+  --ifm-color-primary-lightest: var(--color-nextflow-100); */
+    --ifm-color-primary: var(--color-blu-300);
+  --ifm-color-primary-dark: var(--color-blu-400);
+  --ifm-color-primary-darker: var(--color-blu-500);
+  --ifm-color-primary-darkest: var(--color-blu-600);
+  --ifm-color-primary-light: var(--color-blu-300);
+  --ifm-color-primary-lighter: var(--color-blu-200);
+  --ifm-color-primary-lightest: var(--color-blu-100);
   --ifm-navbar-background-color: rgb(28, 28, 30);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --ifm-code-color: var(--color-red-400);
   --ifm-color-content: #e3e3e3;
   --ifm-font-color-base: #e3e3e3;
   --ifm-heading-color: #e3e3e3;
+
+  /* dark mode overrides */
+  /* --color-primary: var(--color-nextflow-500);
+  --color-secondary: var(--color-nextflow-500); */
+  --color-primary: var(--color-blu-500);
+  --color-secondary: var(--color-blu-500);
+  --color-accent: var(--color-blu-300);
+  /* --color-accent: #1fb2a5; */
+  --color-neutral: #191d24;
+  --color-base-100: rgb(28, 28, 30);
+  --color-base-200: #242933;
+  --color-base-300: #20252e;
+
+    --color-info: var(--color-wave-300);
+  --color-success: var(--color-nextflow-300);
+  --color-warning: var(--color-multiqc-300);
+  --color-error: var(--color-fusion-300);
 }
 
 /* Seqera Tailwind  */
@@ -350,7 +361,7 @@ Infima is Docusaurus's built in CSS framework.
   --color-product-900: #362c5d;
   --color-product-1000: #251e3f;
 
-  /* Seqera "blue" Cclors */
+  /* Seqera "blue" Colors */
   --color-blu-100: #e8ebfc;
   --color-blu-200: #c6ccf8;
   --color-blu-300: #a1abf3;
@@ -363,6 +374,20 @@ Infima is Docusaurus's built in CSS framework.
   --color-blu-1000: #1e2768;
   --color-blu: #4256e7;
 
+  /* --color-primary: var(--color-nextflow-800);
+  --color-secondary: var(--color-nextflow-500); */
+  --color-primary: var(--color-blu-600);
+  --color-secondary: var(--color-blu-500);
+  --color-accent: #f59e0b;
+  --color-neutral: #3d4451;
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-info: #3abff8;
+  --color-success: #36d399;
+  --color-warning: #fbbd23;
+  --color-error: #f87272;
+
   /* Border Radius */
   --radius-sm: 4px;
   --radius-md: 8px;
@@ -443,7 +468,6 @@ Infima is Docusaurus's built in CSS framework.
   border-radius: var(--ifm-badge-border-radius);
   padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
 }
-
 .badge--primary {
   background-color: var(--color-wave-600);
   border-color: var(--color-wave-600);

package/lib/styles/admonition-alerts.css

@@ -4,12 +4,15 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
+  padding: 1rem;
+  font-size: 1rem;
+  line-height: 1.6;
 }
 
 .theme-admonition {
   margin: .75rem 0;
   p {
-    line-height: 1.8;
+    line-height: 1.6;
     margin-top: 0;
   }
 }
@@ -53,6 +56,7 @@
   border-color: var(--color-multiqc-300);
 }
 [data-theme='dark'] {
+  .alert--warning,
   .theme-admonition-warning {
     background-color: var(--color-multiqc-1000);
     border-color: var(--color-multiqc-600);

package/lib/styles/api.css

@@ -27,6 +27,9 @@ Platform API style overrides
   .openapi__method-endpoint-path {
     margin-left: 0.5rem;
   }
+  .openapi-tabs__schema-item {
+    border: 1px solid var(--color-gray-300);
+  }
 
   pre,
   summary,
@@ -140,4 +143,17 @@ Platform API style overrides
     background: rgba(255, 255, 255, 0.4);
     border-color: rgba(255, 255, 255, 0.7);
   }
+  table,
+  code:not(pre code) {
+    background: none;
+  }
+  .alert--info {
+    background: none;
+  }
+  .openapi-tabs__schema-item {
+    border: 1px solid white;
+  }
+  .openapi-tabs__schema-item.active {
+    border: 1px solid var(--color-nextflow-200);
+  }
 }

package/lib/styles/buttons.css

@@ -0,0 +1,55 @@
+.btn {
+  border-radius: 4px;
+  transition: all 0.3s;
+  /* background: var(--color-nextflow-500);
+  border: 1px solid var(--color-nextflow-700); */
+  color: white;
+  background: var(--color-blu);
+  border: 1px solid var(--color-blu);
+  font-weight: 500;
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 0.3rem 1rem;
+  width: auto;
+  text-decoration: none !important;
+  &:hover {
+    /* background: var(--color-nextflow-600); */
+    background: var(--color-blu-700);
+  }
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid black;
+  color: black;
+  &:hover {
+    background: black;
+    color: white;
+  }
+}
+
+[data-theme='dark'] {
+  .btn {
+    color: black;
+    background: var(--color-blu-400);
+    border: 1px solid var(--color-blu-400);
+    &:hover {
+      /* background: var(--color-nextflow-600); */
+      background: var(--color-blu-700);
+      border: 1px solid var(--color-blu-700);
+    }
+  }
+  .btn-outline {
+    /* background: var(--color-nextflow-900);
+    border: 1px solid var(--color-nextflow-900); */
+    background: var(--color-gray-900);
+    border: 1px solid var(--color-gray-100);
+    color: white;
+    &:hover {
+      /* background: var(--color-nextflow-800); */
+      color: black;
+      background: var(--color-gray-400);
+      border: 1px solid var(--color-gray-500);
+    }
+  }
+}

package/lib/styles/other-overrides.css

@@ -3,9 +3,4 @@ svg.excalidraw {
     max-width: 100%;
     height: 100%;
     margin-bottom: 2rem;
-}
-
-/* force height on searchbar to match button heights */
-.DocSearch-Button {
-    height: 33px!important;
 }

package/lib/styles/typography.css

@@ -18,7 +18,8 @@ h6 {
   border-bottom: 4px solid transparent;
 }
 .navbar__link--active {
-  border-bottom: 4px solid var(--color-nextflow-600);
+  /* border-bottom: 4px solid var(--color-nextflow-600); */
+  border-bottom: 4px solid var(--color-blu-600); 
   padding-bottom: 0.1rem;
 }
 
@@ -27,7 +28,7 @@ h6 {
 }
 
 /***
-main prose styles 
+main prose styles
 
 .prose__wrapper for main prose layout styles
 .theme-doc-markdown specifies open-api pages
@@ -36,13 +37,13 @@ main prose styles
 
 .prose__wrapper,
 .theme-doc-markdown {
+  max-width: 100%;
   /* H1 */
   h1 {
     font-size: 2rem;
     line-height: 1.5;
     margin-top: 0;
     margin-bottom: 1.5rem;
-
     @media (min-width: 997px) {
       font-size: 2.45rem;
     }
@@ -57,6 +58,7 @@ main prose styles
 
     @media (min-width: 997px) {
       font-size: 2.25rem;
+      line-height: 1.3;
     }
   }
 
@@ -195,6 +197,7 @@ main prose styles
     border: 1px solid var(--color-gray-400);
     filter: none;
     box-shadow: none;
+    word-break: break-all;
     &::before,
     &::after {
       content: none;
@@ -349,7 +352,7 @@ main prose styles
     background: #0000004d;
   }
   table {
-    background: rgba(255, 255, 255, 0.2);
+    background: transparent;
   }
 
   table tr:nth-child(2n) {
@@ -367,7 +370,23 @@ main prose styles
 
   a {
     &:hover {
-      color: var(--color-primary)!important;
+      color: var(--color-primary) !important;
+    }
+  }
+}
+
+.blog-wrapper {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1rem;
+    margin-bottom: 0;
+
+    a {
+      text-decoration: none !important;
     }
   }
-}
+}

package/lib/theme/Admonition/Layout/styles.module.css

@@ -10,11 +10,12 @@
   flex-direction: row;
   justify-content: items-center;
   align-items: center;
+  font-size: .875rem;
 }
 
 /* Heading alone without content (does not handle fragment content) */
 .admonitionHeading:not(:last-child) {
-  margin-bottom: 0.3rem;
+  margin-bottom: .75rem;
 }
 
 .admonitionHeading code {

package/lib/theme/BlogLayout/index.js

@@ -11,7 +11,7 @@ export default function BlogLayout(props) {
         <div className="row">
           <BlogSidebar sidebar={sidebar} />
           <main
-            className={clsx('prose__wrapper col p-6', {
+            className={clsx('w-full prose__wrapper col max-w-3xl mx-auto', {
               'col--7': hasSidebar,
               'col--9 col--offset-1': !hasSidebar,
             })}>

package/lib/theme/BlogPostItem/index.js

@@ -8,7 +8,9 @@ import BlogPostItemFooter from '@theme/BlogPostItem/Footer';
 // apply a bottom margin in list view
 function useContainerClassName() {
   const {isBlogPostPage} = useBlogPost();
-  return !isBlogPostPage ? 'margin-bottom--xl' : undefined;
+  return !isBlogPostPage
+    ? 'margin-bottom--xl border-b border-black/20 dark:border-white/20 pb-4'
+    : undefined;
 }
 export default function BlogPostItem({children, className}) {
   const containerClassName = useContainerClassName();

package/lib/theme/BlogPostPaginator/index.js

@@ -5,7 +5,7 @@ export default function BlogPostPaginator(props) {
   const {nextItem, prevItem} = props;
   return (
     <nav
-      className="pagination-nav docusaurus-mt-lg"
+      className="pagination-nav docusaurus-mt-lg pb-6"
       aria-label={translate({
         id: 'theme.blog.post.paginator.navAriaLabel',
         message: 'Blog post page navigation',

package/lib/theme/BlogSidebar/Content/index.js

@@ -5,7 +5,9 @@ import Heading from '@theme/Heading';
 function BlogSidebarYearGroup({year, yearGroupHeadingClassName, children}) {
   return (
     <div role="group">
-      <Heading as="h3" className={yearGroupHeadingClassName}>
+      <Heading
+        as="h3"
+        className={`${yearGroupHeadingClassName} text-2xl no-underline!`}>
         {year}
       </Heading>
       {children}

package/lib/theme/BlogSidebar/Desktop/index.js

@@ -5,8 +5,11 @@ import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
 } from '@docusaurus/plugin-content-blog/client';
+import {useLocation} from '@docusaurus/router';
 import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import RssIcon from './rss.svg';
 import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
 const ListComponent = ({items}) => {
   return (
     <BlogSidebarItemList
@@ -20,21 +23,54 @@ const ListComponent = ({items}) => {
 };
 function BlogSidebarDesktop({sidebar}) {
   const items = useVisibleBlogSidebarItems(sidebar.items);
+  // Figure out if we're looking at a product tag or changelog entry
+  const location = useLocation();
+  const pathMatch = location.pathname.match(
+    /\/changelog\/(?:tags\/)?([^\/]+)(?:\/v[\d.]+.*)?/,
+  );
+  const product = pathMatch ? pathMatch[1] : null;
+  // Map product names to their correct documentation paths
+  const getProductPath = (product) => {
+    if (!product || product === 'tags' || product === 'page') return '/';
+    const mapping = {
+      'seqera-cloud': '/platform-cloud',
+      'seqera-enterprise': '/platform-enterprise',
+    };
+    return mapping[product] || `/${product}`;
+  };
+  // Filter the sidebar for just this product
+  const filteredItems = product
+    ? items.filter((item) => item.permalink.includes(`/changelog/${product}/`))
+    : items;
   return (
     <aside
-      className={`${styles.sidebarWrapper} col col--3 border-r border-base-content/20`}>
+      className={`${styles.sidebarWrapper} col col--3 border-r border-black/20 dark:border-white/20`}>
       <nav
-        className={clsx(styles.sidebar, 'thin-scrollbar p-6 ')}
+        className={clsx(styles.sidebar, 'thin-scrollbar ')}
         aria-label={translate({
           id: 'theme.blog.sidebar.navAriaLabel',
           message: 'Blog recent posts navigation',
           description: 'The ARIA label for recent posts in the blog sidebar',
         })}>
-        <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+        <div
+          className={clsx(
+            styles.sidebarItemTitle,
+            'margin-bottom--md w-full flex justify-between items-center pr-4',
+          )}>
           {sidebar.title}
+
+          <Link
+            href="/changelog/rss.xml"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Subscribe to RSS"
+            className={styles.RssIconLink}>
+            <RssIcon />
+          </Link>
         </div>
+
         <BlogSidebarContent
-          items={items}
+          items={filteredItems}
           ListComponent={ListComponent}
           yearGroupHeadingClassName={styles.yearGroupHeading}
         />

package/lib/theme/BlogSidebar/Desktop/rss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m2.5 12A1.5 1.5 0 0 0 6 16.5A1.5 1.5 0 0 0 7.5 18A1.5 1.5 0 0 0 9 16.5A1.5 1.5 0 0 0 7.5 15M6 10v2a6 6 0 0 1 6 6h2a8 8 0 0 0-8-8m0-4v2a10 10 0 0 1 10 10h2A12 12 0 0 0 6 6"/></svg>

package/lib/theme/BlogSidebar/Desktop/styles.module.css

@@ -9,10 +9,20 @@
 }
 
 .sidebarItemTitle {
-  font-size: var(--ifm-h3-font-size);
+  font-size: 1.8rem;
   font-weight: var(--ifm-font-weight-bold);
 }
 
+  .RssIconLink {
+    display: inline-block;
+    height: 24px;
+    & svg {
+      color: var(--color-multiqc-600);
+      width: 24px;
+      height: 24px;
+    }
+  }
+
 .sidebarItemList {
   font-size: 0.9rem;
 }

package/lib/theme/BlogSidebar/Mobile/index.js

@@ -10,9 +10,9 @@ const ListComponent = ({items}) => {
   return (
     <BlogSidebarItemList
       items={items}
-      ulClassName="menu__list"
-      liClassName="menu__list-item"
-      linkClassName="menu__link"
+      ulClassName="menu__list mx-6"
+      liClassName="menu__list-item mx-6"
+      linkClassName="menu__link mx-6"
       linkActiveClassName="menu__link--active"
     />
   );

package/lib/theme/DocItem/Layout/index.js

@@ -43,8 +43,8 @@ export default function DocItemLayout({children}) {
         )}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
-        <div className={styles.docItemContainer}>
-          <article className="max-w-3xl md:pr-4">
+        <div className={clsx(styles.docItemContainer, 'w-full')}>
+          <article className="max-w-3xl mx-auto md:pr-4">
             <DocBreadcrumbs />
             <DocVersionBadge />
             {docTOC.mobile}

package/lib/theme/DocItem/Layout/styles.module.css

@@ -7,6 +7,6 @@
 
 @media (min-width: 997px) {
   .docItemCol {
-    max-width: 75% !important;
+    width: 75% !important;
   }
 }

package/lib/theme/DocRoot/Layout/Main/styles.module.css

@@ -3,7 +3,10 @@
 .docMainContainer {
   display: flex;
   width: 100%;
-  padding: 0 1rem;
+  padding: 0;
+  @media (min-width: 997px) {
+      padding: 0 1rem;
+  }
 }
 
 @media (min-width: 997px) {

package/lib/theme/DocSidebar/Desktop/Content/VersionSwitcher/index.js

@@ -4,11 +4,22 @@ import {
   useDocsVersion,
   useDocsPreferredVersion,
 } from '@docusaurus/plugin-content-docs/client';
+import {usePluginData} from '@docusaurus/useGlobalData';
 import {useLocation} from '@docusaurus/router';
 import Link from '@docusaurus/Link';
 const VersionSwitcher = ({isOpen, setIsOpen}) => {
   const dropdownRef = useRef(null);
   const location = useLocation();
+  // check if the plugin exists first
+  let pluginData;
+  try {
+    pluginData = usePluginData(
+      'docusaurus-plugin-content-docs',
+      'platform-enterprise',
+    );
+  } catch (e) {
+    return null;
+  }
   const {savePreferredVersionName} = useDocsPreferredVersion(
     'platform-enterprise',
   );

package/lib/theme/DocSidebar/Desktop/Content/index.js

@@ -31,12 +31,16 @@ export default function DocSidebarDesktopContent({path, sidebar, className}) {
         description: 'The ARIA label for the sidebar navigation',
       })}
       className={clsx(
-        'menu thin-scrollbar w-full block font-normal mt-2',
+        'menu thin-scrollbar w-full block font-normal mt-2 text-[.9rem]',
         styles.menu,
         showAnnouncementBar && styles.menuWithAnnouncementBar,
         className,
       )}>
-      <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+      <ul
+        className={clsx(
+          ThemeClassNames.docs.docSidebarMenu,
+          'menu__list px-2',
+        )}>
         <DocSidebarItems items={sidebar} activePath={path} level={1} />
       </ul>
     </nav>