From 479a502dfd890de72dcacc3958311d60d82fb4ad Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 4 May 2026 10:06:21 +0200
Subject: [PATCH] =?UTF-8?q?feat(ST-1133):=20entityDialogContentClasses=20?=
 =?UTF-8?q?=E2=86=92=20full-screen=20op=20<640px=20(T-316/T-317/T-318)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eén edit op de gedeelde constant dekt PbiDialog, StoryDialog, TaskDialog,
TaskDetailDialog (allen renderen DialogContent met dezelfde className).

Toegevoegd: max-sm:w-screen max-sm:h-screen max-sm:max-h-screen
max-sm:max-w-none max-sm:rounded-none. Desktop-classes (sm:max-w-[90vw],
lg:max-w-[50vw]) blijven onveranderd.

Tests: smoke op constant + regressie-vangnet dat de 4 entity-dialogen
entityDialogContentClasses blijven gebruiken.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../shared/entity-dialog-layout.test.ts       | 38 +++++++++++++++++++
 components/shared/entity-dialog-layout.ts     |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 __tests__/components/shared/entity-dialog-layout.test.ts

diff --git a/__tests__/components/shared/entity-dialog-layout.test.ts b/__tests__/components/shared/entity-dialog-layout.test.ts
new file mode 100644
index 0000000..294ed3a
--- /dev/null
+++ b/__tests__/components/shared/entity-dialog-layout.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { entityDialogContentClasses } from '@/components/shared/entity-dialog-layout'
+
+describe('entityDialogContentClasses', () => {
+  it('bevat mobile-fullscreen classes (<640px)', () => {
+    const cls = entityDialogContentClasses
+    expect(cls).toContain('max-sm:w-screen')
+    expect(cls).toContain('max-sm:h-screen')
+    expect(cls).toContain('max-sm:max-w-none')
+    expect(cls).toContain('max-sm:rounded-none')
+  })
+
+  it('behoudt desktop-classes (>=640px)', () => {
+    const cls = entityDialogContentClasses
+    expect(cls).toContain('sm:max-w-[90vw]')
+    expect(cls).toContain('sm:max-h-[85vh]')
+    expect(cls).toContain('lg:max-w-[50vw]')
+  })
+})
+
+describe('alle entity-dialogen gebruiken entityDialogContentClasses', () => {
+  // Regressie-vangnet: voorkomt dat een dialog zijn eigen className meegeeft en
+  // daarmee de gedeelde mobile-fullscreen-classes ontwijkt.
+  const files = [
+    'app/_components/tasks/task-dialog.tsx',
+    'components/solo/task-detail-dialog.tsx',
+    'components/backlog/pbi-dialog.tsx',
+    'components/backlog/story-dialog.tsx',
+  ]
+  for (const f of files) {
+    it(`${f} importeert + gebruikt entityDialogContentClasses`, () => {
+      const src = readFileSync(resolve(process.cwd(), f), 'utf-8')
+      expect(src).toContain('entityDialogContentClasses')
+    })
+  }
+})
diff --git a/components/shared/entity-dialog-layout.ts b/components/shared/entity-dialog-layout.ts
index c97ddfb..e70e24e 100644
--- a/components/shared/entity-dialog-layout.ts
+++ b/components/shared/entity-dialog-layout.ts
@@ -3,6 +3,7 @@ import { cn } from '@/lib/utils'
 export const entityDialogContentClasses = cn(
   'flex flex-col p-0 gap-0',
   'max-h-[90vh] w-full max-w-[calc(100%-2rem)]',
+  'max-sm:w-screen max-sm:h-screen max-sm:max-h-screen max-sm:max-w-none max-sm:rounded-none',
   'sm:max-w-[90vw] sm:max-h-[85vh]',
   'lg:max-w-[50vw] lg:min-w-[480px]',
 )