trying to add a command component for the template https://github.com/shadcn-ui/next-template/blob/main/app/layout.tsx in the layout file

when i search in the command input. the list should be visible overlapping the contents on the page. Right now it takes up space vertically and the content below are pushed down.

layout file

          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
            <div className="relative flex min-h-screen flex-col">
              <SiteHeader />
              <Autocomplete />

              <div className="flex-1">{children}</div>
            </div>
            <TailwindIndicator />
          </ThemeProvider>

autocomplete

    <Command className="rounded-lg border shadow-md w-1/2 mt-6 mx-auto">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList className=''>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem>
            <span>Launch</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <span>Mail</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>

thanks in advance 🙂