From d0fc1a7cafd8de75b612fe959ab1b11d779e57e5 Mon Sep 17 00:00:00 2001
From: Julian Appel <kontakt@julianappel.de>
Date: Sun, 2 Aug 2026 17:10:22 +0200
Subject: [PATCH] Widen Revit CSV dialog

---
 src/frontend/components/form-modal.tsx      |  7 ++++++-
 src/frontend/components/revit-csv-modal.tsx |  3 ++-
 tests/revit-csv-frontend-api.test.ts        | 19 +++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/form-modal.tsx b/src/frontend/components/form-modal.tsx
index 43aa10e..05e18eb 100644
--- a/src/frontend/components/form-modal.tsx
+++ b/src/frontend/components/form-modal.tsx
@@ -5,6 +5,7 @@ import React, { type FormEvent, type ReactNode } from "react";
 interface FormModalProps {
   children: ReactNode;
   description?: string;
+  dialogSize?: "large" | "viewport";
   isSaving: boolean;
   onClose: () => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
@@ -16,6 +17,7 @@ interface FormModalProps {
 export function FormModal({
   children,
   description,
+  dialogSize = "large",
   isSaving,
   onClose,
   onSubmit,
@@ -31,7 +33,10 @@ export function FormModal({
         role="dialog"
         tabIndex={-1}
       >
-        <div className="modal-dialog modal-lg modal-dialog-centered">
+        <div
+          className={`modal-dialog modal-dialog-centered ${dialogSize === "large" ? "modal-lg" : ""}`}
+          style={dialogSize === "viewport" ? { maxWidth: "calc(100vw - 2rem)" } : undefined}
+        >
           <form className="modal-content" onSubmit={onSubmit}>
             <div className="modal-header">
               <div>
diff --git a/src/frontend/components/revit-csv-modal.tsx b/src/frontend/components/revit-csv-modal.tsx
index d62e78b..35affc1 100644
--- a/src/frontend/components/revit-csv-modal.tsx
+++ b/src/frontend/components/revit-csv-modal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState, type FormEvent } from "react";
+import React, { useEffect, useMemo, useState, type FormEvent } from "react";
 import {
   createDefaultExternalCsvConfiguration,
   type ExternalCsvConfiguration,
@@ -132,6 +132,7 @@ export function RevitCsvModal({
   return (
     <FormModal
       description="Projektweites Mapping speichern und Revit-CSV ohne Datenübernahme prüfen."
+      dialogSize="viewport"
       isSaving={isSaving}
       onClose={onClose}
       onSubmit={handleSave}
diff --git a/tests/revit-csv-frontend-api.test.ts b/tests/revit-csv-frontend-api.test.ts
index e70c71c..e08c1e2 100644
--- a/tests/revit-csv-frontend-api.test.ts
+++ b/tests/revit-csv-frontend-api.test.ts
@@ -1,5 +1,8 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { RevitCsvModal } from "../src/frontend/components/revit-csv-modal.js";
 import {
   getExternalCsvConfiguration,
   previewExternalCsv,
@@ -52,3 +55,19 @@ describe("Revit CSV frontend API", () => {
     ]);
   });
 });
+
+describe("Revit CSV modal presentation", () => {
+  it("uses the viewport-wide dialog variant", () => {
+    const markup = renderToStaticMarkup(
+      createElement(RevitCsvModal, {
+        currentRevision: 0,
+        onClose: () => undefined,
+        onRevisionChange: () => undefined,
+        projectId: "project-1",
+      })
+    );
+
+    assert.match(markup, /max-width:calc\(100vw - 2rem\)/);
+    assert.doesNotMatch(markup, /modal-lg/);
+  });
+});