Update the popup to show properly (#23)

Author: parameshjava

src/components/poll-modal.tsx

@@ -6,12 +6,12 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
 import { getLinkedPollDetail, type LinkedPollDetail } from '@/lib/actions/loans'
 import { LinkedPollResults } from '@/components/linked-poll-results'
+import { MarkdownView } from '@/components/markdown-view'
 
 type Variant = 'pill' | 'icon' | 'link'
 
@@ -90,20 +90,23 @@ export function PollModal({ pollId, pollQuestion, variant = 'pill' }: Props) {
           </DialogClose>
           <DialogHeader className="shrink-0">
             <DialogTitle className="pr-8">{detail?.question ?? pollQuestion}</DialogTitle>
-            {detail?.description ? (
-              <DialogDescription className="whitespace-pre-line">
-                {detail.description}
-              </DialogDescription>
-            ) : null}
           </DialogHeader>
 
-          <div className="min-h-0 flex-1 overflow-y-auto">
+          {/* Description + results scroll together; only the title stays
+              pinned, so a long markdown description never squeezes the
+              results out of view. */}
+          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto">
             {pending && !detail ? (
               <p className="text-sm text-gray-500">Loading poll…</p>
             ) : error ? (
               <p className="text-sm text-rose-600">{error}</p>
             ) : detail ? (
-              <LinkedPollResults detail={detail} />
+              <>
+                {detail.description ? (
+                  <MarkdownView source={detail.description} />
+                ) : null}
+                <LinkedPollResults detail={detail} />
+              </>
             ) : null}
           </div>
         </DialogContent>

src/components/ui/dialog.tsx

@@ -31,7 +31,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/40 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -53,7 +53,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}