Add fullscreen lightbox for dense Mermaid diagrams

components/mermaid-diagram.tsx

@@ -1,15 +1,17 @@
 'use client'
 
 import { isValidElement, useEffect, useId, useState, type ReactNode } from 'react'
-import { Code2, GitBranch } from 'lucide-react'
+import { Code2, GitBranch, Maximize2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 
 /** Renders Mermaid source to sanitized SVG on the client, with a toggle back to the raw source for copying/editing. */
 export function MermaidDiagram({ source }: { source: string }) {
   const rawId = useId().replace(/[^a-zA-Z0-9]/g, '')
   const [svg, setSvg] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [showSource, setShowSource] = useState(false)
+  const [expanded, setExpanded] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -31,23 +33,39 @@ export function MermaidDiagram({ source }: { source: string }) {
 
   const failed = error !== null
   const displaySource = showSource || failed || svg === null
+  const canExpand = svg !== null && !failed && !showSource
 
   return (
     <div className="not-prose my-4 overflow-hidden rounded-lg border bg-card">
       <div className="flex items-center justify-between border-b bg-muted/40 px-3 py-1.5">
         <span className="text-xs font-medium text-muted-foreground">Diagram</span>
-        {!failed && svg !== null && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="h-6 gap-1.5 px-2 text-xs"
-            onClick={() => setShowSource((s) => !s)}
-          >
-            {showSource ? <GitBranch className="h-3 w-3" /> : <Code2 className="h-3 w-3" />}
-            {showSource ? 'View diagram' : 'View source'}
-          </Button>
-        )}
+        <div className="flex items-center gap-1">
+          {canExpand && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 gap-1.5 px-2 text-xs"
+              onClick={() => setExpanded(true)}
+              title="View fullscreen"
+            >
+              <Maximize2 className="h-3 w-3" />
+              Expand
+            </Button>
+          )}
+          {!failed && svg !== null && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 gap-1.5 px-2 text-xs"
+              onClick={() => setShowSource((s) => !s)}
+            >
+              {showSource ? <GitBranch className="h-3 w-3" /> : <Code2 className="h-3 w-3" />}
+              {showSource ? 'View diagram' : 'View source'}
+            </Button>
+          )}
+        </div>
       </div>
       <div className="p-3">
         {failed && (
@@ -59,6 +77,17 @@ export function MermaidDiagram({ source }: { source: string }) {
           <div className="overflow-x-auto [&_svg]:mx-auto" dangerouslySetInnerHTML={{ __html: svg }} />
         )}
       </div>
+      {canExpand && (
+        <Dialog open={expanded} onOpenChange={setExpanded}>
+          <DialogContent className="flex max-h-[92vh] w-full max-w-[96vw] flex-col overflow-hidden sm:max-w-[96vw]">
+            <DialogTitle className="sr-only">Diagram, fullscreen</DialogTitle>
+            <div
+              className="min-h-0 flex-1 overflow-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-none"
+              dangerouslySetInnerHTML={{ __html: svg }}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   )
 }

tests/components/markdown-content.test.tsx

@@ -28,5 +28,6 @@ describe('MarkdownContent', () => {
     expect(html).toContain('flowchart TD')
     expect(html).toContain('A --> B')
     expect(html).not.toContain('language-mermaid')
+    expect(html).not.toContain('Expand')
   })
 })