How to set the height of the main fumadocs container?

[yannxaver]

To avoid full page reloads between root layouts I am running fumadocs in a nested layout under /docs. The problem I have encountered is that I cannot set the height of the fumadocs container.

This is a problem because the container takes up the full screen by default which means it blocks the primary nav bar of the site. I can set the z-index of the primary nav bar to 50 but then a portion of the fumadocs container is hidden. (see screenshot)

I have tried passing classes and styles through containerProps but they have no impact on the height.

// src/app/(docs)/layout.tsx

import { source } from '@/app/(docs)/source';
import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layout';
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

const docsLayoutProps: DocsLayoutProps = {
  containerProps: {
    className: 'h-32 z-10',
    style: {
      maxHeight: '50px !important',
      zIndex: 0,
    },
  },
  nav: {
    transparentMode: 'none',
    title: 'Documentation',
  },
  tree: source.pageTree,
};

export default function Layout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <RootProvider theme={{ enabled: false }}>
      <DocsLayout {...docsLayoutProps}>{children}</DocsLayout>
    </RootProvider>
  );
}

[fuma-nama]

Use Links API instead of a custom navbar. Otherwise you need some CSS tricks (see the source code of banner component if you are interested)