Native Scrollbar Dialog

1import { Button } from "@/components/ui/button";
2import {
3  ResponsiveDialog,
4  ResponsiveDialogClose,
5  ResponsiveDialogContent,
6  ResponsiveDialogDescription,
7  ResponsiveDialogFooter,
8  ResponsiveDialogHeader,
9  ResponsiveDialogTitle,
10  ResponsiveDialogTrigger,
11} from "@/components/ui/revola";
12 
13export default function NativeScrollDialog() {
14  return (
15    <ResponsiveDialog>
16      <ResponsiveDialogTrigger asChild>
17        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
18          Native Scrollbar
19        </Button>
20      </ResponsiveDialogTrigger>
21      <ResponsiveDialogContent
22        showCloseButton={false}
23        className="flex max-h-[min(640px,80dvh)] flex-col overflow-hidden"
24      >
25        <div className="overflow-y-auto">
26          <ResponsiveDialogHeader className="contents space-y-0 text-left">
27            <ResponsiveDialogTitle className="px-6 pt-6">Frequently Asked Questions (FAQ)</ResponsiveDialogTitle>
28            <ResponsiveDialogDescription asChild>
29              <div className="p-6">
30                <div className="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
31                  <div className="space-y-1">
32                    <p>
33                      <strong>Account Management</strong>
34                    </p>
35                    <p>
36                      Navigate to the registration page, provide required information, and verify your email address.
37                      You can sign up using your email or through social media platforms.
38                    </p>
39                  </div>
40                  <div className="space-y-1">
41                    <p>
42                      <strong>Password Reset Process</strong>
43                    </p>
44                    <p>
45                      Users can reset their password through the account settings page. Click &quot;Forgot
46                      Password&quot; and follow the email verification steps to regain account access quickly and
47                      securely.
48                    </p>
49                  </div>
50                  <div className="space-y-1">
51                    <p>
52                      <strong>Service Pricing Tiers</strong>
53                    </p>
54                    <p>
55                      We offer three primary subscription levels designed to meet diverse user needs: Basic (free with
56                      limited features), Professional (monthly fee with comprehensive access), and Enterprise (custom
57// … truncated