UI: Extend grid of docs layout to 5 columns

Author: fuma-nama

.changeset/wise-rabbits-crash.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-ui': patch
+'@fumadocs/base-ui': patch
+---
+
+Extend grid of docs layout to 5 columns

packages/base-ui/css/lib/shiki.css

@@ -16,11 +16,14 @@
 :is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
   .line& {
     position: relative;
-    min-height: 1lh;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
 
+  .line:empty& {
+    height: 1lh;
+  }
+
   .has-focused .line&:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;

packages/base-ui/src/layouts/docs/client.tsx

@@ -54,15 +54,15 @@ export function LayoutBody({ className, style, children, ...props }: ComponentPr
     <div
       id="nd-docs-layout"
       className={cn(
-        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
+        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
         className,
       )}
       data-sidebar-collapsed={collapsed}
       style={
         {
-          gridTemplate: `"sidebar header toc"
-        "sidebar toc-popover toc"
-        "sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
+          gridTemplate: `"sidebar sidebar header toc toc"
+        "sidebar sidebar toc-popover toc toc"
+        "sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr)`,
           '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
           '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
           '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',

packages/base-ui/src/layouts/docs/page/index.tsx

@@ -138,7 +138,7 @@ export function DocsPage({
         data-full={full}
         className={cn(
           'flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14',
-          full ? 'max-w-[1200px]' : 'xl:layout:[--fd-toc-width:268px]',
+          full ? 'max-w-[1168px]' : 'xl:layout:[--fd-toc-width:268px]',
           className,
         )}
       >

packages/radix-ui/css/lib/shiki.css

@@ -16,11 +16,14 @@
 :is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
   .line& {
     position: relative;
-    min-height: 1lh;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
 
+  .line:empty& {
+    height: 1lh;
+  }
+
   .has-focused .line&:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;

packages/radix-ui/src/layouts/docs/client.tsx

@@ -54,15 +54,15 @@ export function LayoutBody({ className, style, children, ...props }: ComponentPr
     <div
       id="nd-docs-layout"
       className={cn(
-        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
+        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
         className,
       )}
       data-sidebar-collapsed={collapsed}
       style={
         {
-          gridTemplate: `"sidebar header toc"
-        "sidebar toc-popover toc"
-        "sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
+          gridTemplate: `"sidebar sidebar header toc toc"
+        "sidebar sidebar toc-popover toc toc"
+        "sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr)`,
           '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
           '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
           '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',

packages/radix-ui/src/layouts/docs/page/index.tsx

@@ -138,7 +138,7 @@ export function DocsPage({
         data-full={full}
         className={cn(
           'flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14',
-          full ? 'max-w-[1200px]' : 'xl:layout:[--fd-toc-width:268px]',
+          full ? 'max-w-[1168px]' : 'xl:layout:[--fd-toc-width:268px]',
           className,
         )}
       >