style(popover): add max-w-4xl, add demo with very long content

Author: adaptive-shield-matrix

lib/interactive/popover/classesPopoverContent.ts

@@ -2,6 +2,7 @@ import { classMerge } from "~ui/utils/classMerge"
 
 export const classesPopoverContent = [
   "z-50", // positioning
+  "max-w-4xl",
   "px-3 py-3", // spacing
   "rounded-lg", // border
   "dark:border", // border

src/demos/interactive/DemoPopover.tsx

@@ -1,3 +1,4 @@
+import { LongContent } from "@/demos/interactive/LongContent"
 import { mdiDotsVertical } from "@mdi/js"
 import { buttonVariant } from "~ui/interactive/button/buttonCva"
 import { CorvuPopover } from "~ui/interactive/popover/CorvuPopover"
@@ -12,7 +13,7 @@ export function DemoPopover() {
       <h1 class="text-3xl font-bold mb-6">Popover Demo</h1>
       <div class={classArr(classesGridCols3xl, "gap-4")}>
         <BasicPopoverDemo title="Start" class="justify-start items-start" />
-        <BasicPopoverDemo title="Center" class="justify-center items-center" />
+        <BasicPopoverDemo title="Long content" class="justify-center items-center" />
         <BasicPopoverDemo title="End" class="justify-end items-end" />
         <IconPopoverDemo title="Icon" class="justify-center items-center" />
       </div>
@@ -29,7 +30,7 @@ function BasicPopoverDemo(p: BasicPopoverDemo) {
     <div class={classArr("flex flex-col", p.class)}>
       <h2 class="text-2xl font-bold mb-4">{p.title + " Popover"}</h2>
       <CorvuPopover icon={mdiDotsVertical} variant={buttonVariant.outline} buttonChildren={"Open"}>
-        <Content />
+        <LongContent />
       </CorvuPopover>
     </div>
   )

src/demos/interactive/LongContent.tsx

@@ -0,0 +1,57 @@
+export function LongContent() {
+  return (
+    <div class="space-y-6">
+      <div class="min-h-screen">
+        <h3 class="text-lg font-semibold mb-3">1. Introduction</h3>
+        <p class="text-muted-foreground leading-relaxed">
+          Welcome to our service. By using our platform, you agree to comply with and be bound by the following terms
+          and conditions. Please read these terms carefully before using our services. If you do not agree to these
+          terms, you should not use our service.
+        </p>
+        <p class="mt-4 text-muted-foreground leading-relaxed">
+          These terms apply to all users of the service, including without limitation users who are browsers, vendors,
+          customers, merchants, and/or contributors of content. By accessing or using the service, you acknowledge that
+          you have read, understood, and agree to be bound by these terms.
+        </p>
+      </div>
+
+      <div class="min-h-screen">
+        <h3 class="text-lg font-semibold mb-3">2. User Responsibilities</h3>
+        <p class="text-muted-foreground leading-relaxed">
+          As a user of our service, you are responsible for maintaining the confidentiality of your account and
+          password. You agree to accept responsibility for all activities that occur under your account or password.
+        </p>
+        <ul class="mt-4 space-y-2 text-muted-foreground list-disc list-inside">
+          <li>You must provide accurate and complete information</li>
+          <li>You must not share your password with anyone</li>
+          <li>You must notify us of any unauthorized use</li>
+          <li>You must comply with all applicable laws</li>
+          <li>You must not interfere with or disrupt the service</li>
+        </ul>
+      </div>
+
+      <div class="min-h-screen">
+        <h3 class="text-lg font-semibold mb-3">3. Privacy Policy</h3>
+        <p class="text-muted-foreground leading-relaxed">
+          Your privacy is important to us. Our Privacy Policy explains how we collect, use, and protect your information
+          when you use our service. By using our service, you agree to the collection and use of information in
+          accordance with this policy.
+        </p>
+        <div class="mt-4 space-y-3">
+          <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <h4 class="font-medium mb-2">Information We Collect</h4>
+            <p class="text-sm text-muted-foreground">Personal information, usage data, and device information</p>
+          </div>
+          <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <h4 class="font-medium mb-2">How We Use Information</h4>
+            <p class="text-sm text-muted-foreground">To provide, maintain, and improve our services</p>
+          </div>
+          <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <h4 class="font-medium mb-2">Data Protection</h4>
+            <p class="text-sm text-muted-foreground">Industry-standard encryption and security measures</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}