#434

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -8,6 +8,7 @@ import { Dialog,
 	 DialogHeader,
 	 DialogTitle } from '@/components/ui/dialog'
 import { DialogueContext } from '@/lib/dialogues/useDialogue'
+import { cn } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC, ReactNode } from 'react'
@@ -183,13 +184,12 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 	      <DialogContent
 		  closeLabel={(active.kind === 'confirm' || active.kind === 'choice')
 		      ? active.options.closeLabel : undefined}
-		  className={
-		      active.kind === 'form'
-		      ? `flex max-h-[calc(100dvh-1rem)] ${ active.options.size === 'large'
-			  ? 'max-w-3xl'
-			  : 'max-w-lg' } flex-col overflow-hidden gap-0`
-		      : 'px-6 pb-6 pt-7'
-		  }
+		  className={cn (active.kind === 'form'
+		      ? 'flex max-h-[calc(100dvh-1rem)] flex-col overflow-hidden gap-0'
+		      : 'px-6 pb-6 pt-7', active.kind === 'form' && (
+		      active.options.size === 'viewport'
+		      ? 'h-[88dvh] w-[88vw] max-w-none'
+		      : (active.options.size === 'large' ? 'max-w-3xl' : 'max-w-lg')))}
 		  onEscapeKeyDown={event => {
 		    if (nestedConfirm?.parentId === active.id || pendingIds.includes (active.id))
 		      event.preventDefault ()