[Feature]: update Dialog to make it scrollable vertically if the content is larger

[maelp]

Describe the feature

Make the content scrollable, using https://www.radix-vue.com/components/dialog.html

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import {
  DialogClose,
  DialogContent,
  type DialogContentEmits,
  type DialogContentProps,
  DialogOverlay,
  DialogPortal,
} from "radix-vue";
import { X } from "lucide-vue-next";
import { cn, useEmitAsProps } from "../frameworkUtils";

const props = defineProps<DialogContentProps & { class?: string }>();
const emits = defineEmits<DialogContentEmits>();

const emitsAsProps = useEmitAsProps(emits);
</script>

<template>
  <DialogPortal>
    <DialogOverlay
      class="fixed inset-0 grid place-items-center z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 overflow-y-auto"
    >
      <DialogContent
        :class="
          cn(
            'z-50 grid place-items-center w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
            props.class
          )
        "
        v-bind="{ ...props, ...emitsAsProps }"
      >
        <slot />

        <DialogClose
          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
        >
          <X class="w-4 h-4" />
          <span class="sr-only">Close</span>
        </DialogClose>
      </DialogContent>
    </DialogOverlay>
  </DialogPortal>
</template>

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[zernonia]

@maelp thanks for this feature request! I think we can include that in a Dialog example! Could you create a PR and add this into Dialog examples? 😁

[maelp]

You mean the example rather than in the code for the Dialog of shadcn directly? I think it's better in the code directly no? because if the screen is large enough it keeps the same behaviour as now, and if it is too small, it allows scrolling

[sadeghbarati]

It can be done with CSS :has or CVA Variants but I don't know it's worth to have or not

[hrynevychroman]

I can take this issue, but don't understand task properly, @sadeghbarati can you help with some screenshots? Maybe I will help ❤️

[sadeghbarati]

@romanhrynevych Thanks man!

You can take a look 🌟Bootstrap🌟 Modal examples

https://getbootstrap.com/docs/5.3/components/modal/#scrolling-long-content

[hrynevychroman]

Thanks mate 👐

I will open a PR to resolve this issue 🙂

[0xinhua]

@zernonia Hi,I want to ask is this issue fixed in the latest version? At present, we also encountered the same problem, in the device with relatively small resolution, the Dialog content is not fully displayed and cannot be scroll. Or is there a hotfix to make the contents of the popup scroll? many thanks.

[hrynevychroman]

@0xinhua you can refer to this PR #287, see code changes, scroll works fine but need some updates in Radix-vue repo, refer to this PR PR in radix-vue, but there is a bug with toaster and Dialog, don't have time to take a look on it 🙁