fix: sheet content vertical overflow (#129)

* fix: sheet content vertical overflow

If the sheet content grew too large, the portion overflowing the viewport
would be unreachable as there was no way to scroll to it. This can easily
happen on mobile with keyboard open.

The solution I chose is to limit the height to viewport height and
let the browser handle the overflow by showing a scrollbar.

* update registry files

---------

Co-authored-by: Stefan E-K <stefan.eideloth@gmail.com>

.changeset/new-grapes-mix.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+It makes sheet content vertically scrollable should it overflow the vertical space given by the viewport.

apps/docs/public/registry/ui/dialog.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "dialog.tsx",
-      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DialogPrimitive from \"@kobalte/core/dialog\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {\n  const [, rest] = splitProps(props, [\"children\"])\n  return (\n    <DialogPrimitive.Portal {...rest}>\n      <div class=\"fixed inset-0 z-50 flex items-start justify-center sm:items-center\">\n        {props.children}\n      </div>\n    </DialogPrimitive.Portal>\n  )\n}\n\ntype DialogOverlayProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined }\n\nconst DialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogOverlayProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogOverlayProps, [\"class\"])\n  return (\n    <DialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\ntype DialogContentProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst DialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogContentProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogContentProps, [\"class\", \"children\"])\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        class={cn(\n          \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg\",\n          props.class\n        )}\n        {...rest}\n      >\n        {props.children}\n        <DialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M18 6l-12 12\" />\n            <path d=\"M6 6l12 12\" />\n          </svg>\n          <span class=\"sr-only\">Close</span>\n        </DialogPrimitive.CloseButton>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <div class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", props.class)} {...rest} />\n  )\n}\n\nconst DialogFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DialogTitleProps<T extends ValidComponent = \"h2\"> = DialogPrimitive.DialogTitleProps<T> & {\n  class?: string | undefined\n}\n\nconst DialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, DialogTitleProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogTitleProps, [\"class\"])\n  return (\n    <DialogPrimitive.Title\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  DialogPrimitive.DialogDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst DialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, DialogDescriptionProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogDescriptionProps, [\"class\"])\n  return (\n    <DialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription\n}\n"
+      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DialogPrimitive from \"@kobalte/core/dialog\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {\n  const [, rest] = splitProps(props, [\"children\"])\n  return (\n    <DialogPrimitive.Portal {...rest}>\n      <div class=\"fixed inset-0 z-50 flex items-start justify-center sm:items-center\">\n        {props.children}\n      </div>\n    </DialogPrimitive.Portal>\n  )\n}\n\ntype DialogOverlayProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined }\n\nconst DialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogOverlayProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogOverlayProps, [\"class\"])\n  return (\n    <DialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\ntype DialogContentProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst DialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogContentProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogContentProps, [\"class\", \"children\"])\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        class={cn(\n          \"fixed left-1/2 top-1/2 z-50 grid max-h-screen w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg\",\n          props.class\n        )}\n        {...rest}\n      >\n        {props.children}\n        <DialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M18 6l-12 12\" />\n            <path d=\"M6 6l12 12\" />\n          </svg>\n          <span class=\"sr-only\">Close</span>\n        </DialogPrimitive.CloseButton>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <div class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", props.class)} {...rest} />\n  )\n}\n\nconst DialogFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DialogTitleProps<T extends ValidComponent = \"h2\"> = DialogPrimitive.DialogTitleProps<T> & {\n  class?: string | undefined\n}\n\nconst DialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, DialogTitleProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogTitleProps, [\"class\"])\n  return (\n    <DialogPrimitive.Title\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  DialogPrimitive.DialogDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst DialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, DialogDescriptionProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogDescriptionProps, [\"class\"])\n  return (\n    <DialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription\n}\n"
     }
   ],
   "type": "ui"