Use var(--anchor-max-height) when using the anchor prop (#3148)

* use `var(--anchor-max-height)` if available

When using the `anchor` prop, we try to position the anchored element
within the viewport. We use the size middleware of Floating UI to ensure
we are working in a constrained `max-width` and `max-height`.

However, if you want to limit the height of let's say a
`ComboboxOptions` then you instinctively add `max-h-60` for example. The
problem is that the `max-height` set by Floating UI will win because
it's inline styles.

You could use `!max-h-60` which makes it `!important`, but then you can
run into an issue where the max height set by the user is larger than
the available space which results in combobox options that are
unavailable.

To solve this, we want best of both worlds by ensuring we prefer the
size from the user, but constrain it with the value we know.

We now read from a `var(--anchor-max-height)` variable where you can set
your own preferred max height.

E.g.:

```ts
<Combobox>
  <ComboboxInput />
  <ComboboxOptions anchor="bottom start" className="[--anchor-gap:var(--spacing-4)] [--anchor-max-height:var(--spacing-60)]">
    …
  </ComboboxOptions>
</Combobox>
```

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `portal` prop to `Combobox`, `Listbox`, `Menu` and `Popover` components ([#3124](https://github.com/tailwindlabs/headlessui/pull/3124))
 - Add frozen value to `ComboboxOptions` component ([#3126](https://github.com/tailwindlabs/headlessui/pull/3126))
 - Add string shorthand for the `anchor` prop ([#3133](https://github.com/tailwindlabs/headlessui/pull/3133))
+- Use `var(--anchor-max-height)` when using the `anchor` prop ([#3148](https://github.com/tailwindlabs/headlessui/pull/3148))
 
 ## [1.7.19] - 2024-04-15
 

packages/@headlessui-react/src/internal/floating.tsx

@@ -316,7 +316,7 @@ export function FloatingProvider({
           Object.assign(elements.floating.style, {
             overflow: 'auto',
             maxWidth: `${availableWidth - padding}px`,
-            maxHeight: `${availableHeight - padding}px`,
+            maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight - padding}px)`,
           })
         },
       }),