From df53cef3b78b4cdd849b0f95f24f0103ce597bc3 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Tue, 16 Jun 2026 21:33:57 +0200
Subject: [PATCH] feat(11-04): mobile-safe modals and form baseline
 verification

- Add max-h-[90vh] overflow-y-auto to ShareModal, CloudCredentialModal,
  FolderDeleteModal, and DocumentView cloud-delete modal panels
- Add responsive px-4 sm:px-6 to DocumentPreviewModal header for narrow viewports
- Add data-test attributes to all modal panels for testability
- Confirm @tailwindcss/forms active in tailwind.config.js (no drift found)
- Audit forms: focus:outline-none focus:ring-2 pattern is consistent throughout
- Add 4 test files covering mobile-safe modal classes and form baseline:
  ShareModal.mobile.test.js, CloudCredentialModal.mobile.test.js,
  FolderDeleteModal.mobile.test.js, DocumentPreviewModal.mobile.test.js

VISUAL-02, RESP-04
---
 .../components/cloud/CloudCredentialModal.vue |  2 +-
 .../CloudCredentialModal.mobile.test.js       | 52 +++++++++++
 .../documents/DocumentPreviewModal.vue        |  3 +-
 .../DocumentPreviewModal.mobile.test.js       | 58 ++++++++++++
 .../components/folders/FolderDeleteModal.vue  |  3 +-
 .../FolderDeleteModal.mobile.test.js          | 49 ++++++++++
 .../src/components/sharing/ShareModal.vue     |  3 +-
 .../__tests__/ShareModal.mobile.test.js       | 89 +++++++++++++++++++
 frontend/src/views/DocumentView.vue           |  3 +-
 9 files changed, 257 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/cloud/__tests__/CloudCredentialModal.mobile.test.js
 create mode 100644 frontend/src/components/documents/__tests__/DocumentPreviewModal.mobile.test.js
 create mode 100644 frontend/src/components/folders/__tests__/FolderDeleteModal.mobile.test.js
 create mode 100644 frontend/src/components/sharing/__tests__/ShareModal.mobile.test.js

diff --git a/frontend/src/components/cloud/CloudCredentialModal.vue b/frontend/src/components/cloud/CloudCredentialModal.vue
index c230a89..c8672af 100644
--- a/frontend/src/components/cloud/CloudCredentialModal.vue
+++ b/frontend/src/components/cloud/CloudCredentialModal.vue
@@ -5,7 +5,7 @@
     @click.self="handleOverlayClick"
     @keydown.escape.window="handleEscape"
   >
-    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
+    <div data-test="cloud-credential-modal-panel" class="bg-white rounded-xl shadow-xl w-full max-w-md p-6 max-h-[90vh] overflow-y-auto">
       <!-- Header -->
       <div class="flex items-center justify-between mb-5">
         <h3 class="text-xl font-semibold text-gray-900">
diff --git a/frontend/src/components/cloud/__tests__/CloudCredentialModal.mobile.test.js b/frontend/src/components/cloud/__tests__/CloudCredentialModal.mobile.test.js
new file mode 100644
index 0000000..4e88ff0
--- /dev/null
+++ b/frontend/src/components/cloud/__tests__/CloudCredentialModal.mobile.test.js
@@ -0,0 +1,52 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+
+vi.mock('../../../api/client.js', () => ({
+  getConnectionConfig: vi.fn().mockResolvedValue({ connection_username: '', server_url: '' }),
+  connectWebDav: vi.fn(),
+}))
+
+import CloudCredentialModal from '../CloudCredentialModal.vue'
+
+const globalStubs = {
+  AppIcon: true,
+}
+
+const testProvider = { key: 'webdav', label: 'WebDAV' }
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  vi.clearAllMocks()
+})
+
+describe('RESP-04: CloudCredentialModal mobile-safe panel', () => {
+  it('panel has max-h-[90vh] class for mobile scroll safety', () => {
+    const wrapper = mount(CloudCredentialModal, {
+      props: { show: true, provider: testProvider, existing: null },
+      global: { stubs: globalStubs },
+    })
+    const panel = wrapper.find('[data-test="cloud-credential-modal-panel"]')
+    expect(panel.exists()).toBe(true)
+    expect(panel.classes()).toContain('max-h-[90vh]')
+  })
+
+  it('panel has overflow-y-auto class for mobile scroll', () => {
+    const wrapper = mount(CloudCredentialModal, {
+      props: { show: true, provider: testProvider, existing: null },
+      global: { stubs: globalStubs },
+    })
+    const panel = wrapper.find('[data-test="cloud-credential-modal-panel"]')
+    expect(panel.classes()).toContain('overflow-y-auto')
+  })
+
+  it('panel not rendered when show=false', () => {
+    const wrapper = mount(CloudCredentialModal, {
+      props: { show: false, provider: testProvider, existing: null },
+      global: { stubs: globalStubs },
+    })
+    // When show=false the v-if hides the entire overlay
+    const panel = wrapper.find('[data-test="cloud-credential-modal-panel"]')
+    expect(panel.exists()).toBe(false)
+  })
+})
diff --git a/frontend/src/components/documents/DocumentPreviewModal.vue b/frontend/src/components/documents/DocumentPreviewModal.vue
index 903d3df..0699569 100644
--- a/frontend/src/components/documents/DocumentPreviewModal.vue
+++ b/frontend/src/components/documents/DocumentPreviewModal.vue
@@ -2,6 +2,7 @@
   <!-- Overlay -->
   <div
     ref="overlayRef"
+    data-test="document-preview-modal"
     class="fixed inset-0 bg-black/60 z-50 flex flex-col"
     role="dialog"
     aria-modal="true"
@@ -9,7 +10,7 @@
     @click="handleOverlayClick"
   >
     <!-- Header bar -->
-    <div class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shrink-0">
+    <div data-test="preview-modal-header" class="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 flex items-center justify-between shrink-0">
       <span class="text-sm font-medium text-gray-900 truncate max-w-xs">{{ doc.filename || doc.original_name }}</span>
       <button
         @click="emit('close')"
diff --git a/frontend/src/components/documents/__tests__/DocumentPreviewModal.mobile.test.js b/frontend/src/components/documents/__tests__/DocumentPreviewModal.mobile.test.js
new file mode 100644
index 0000000..41381dc
--- /dev/null
+++ b/frontend/src/components/documents/__tests__/DocumentPreviewModal.mobile.test.js
@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+vi.mock('../../../api/client.js', () => ({
+  fetchDocumentContent: vi.fn().mockResolvedValue({ ok: true, blob: () => Promise.resolve(new Blob()) }),
+}))
+
+import DocumentPreviewModal from '../DocumentPreviewModal.vue'
+
+const globalStubs = {
+  AppIcon: true,
+}
+
+const testDoc = { id: 'doc-1', filename: 'test.pdf', original_name: 'test.pdf' }
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  // Mock URL.createObjectURL since it's not available in jsdom
+  vi.stubGlobal('URL', {
+    createObjectURL: vi.fn().mockReturnValue('blob:mock-url'),
+    revokeObjectURL: vi.fn(),
+  })
+})
+
+describe('RESP-04: DocumentPreviewModal mobile-safe sizing', () => {
+  it('renders full-screen overlay (fixed inset-0)', () => {
+    const wrapper = mount(DocumentPreviewModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    const overlay = wrapper.find('[data-test="document-preview-modal"]')
+    expect(overlay.exists()).toBe(true)
+    expect(overlay.classes()).toContain('fixed')
+    expect(overlay.classes()).toContain('inset-0')
+  })
+
+  it('header has responsive horizontal padding (px-4 at mobile, sm:px-6 at >=640px)', () => {
+    const wrapper = mount(DocumentPreviewModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    const header = wrapper.find('[data-test="preview-modal-header"]')
+    expect(header.exists()).toBe(true)
+    expect(header.classes()).toContain('px-4')
+    expect(header.classes()).toContain('sm:px-6')
+  })
+
+  it('header filename is truncated with truncate class to prevent overflow', () => {
+    const wrapper = mount(DocumentPreviewModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    const header = wrapper.find('[data-test="preview-modal-header"]')
+    // The filename span should have truncate class
+    const filenameSpan = header.find('span.truncate')
+    expect(filenameSpan.exists()).toBe(true)
+  })
+})
diff --git a/frontend/src/components/folders/FolderDeleteModal.vue b/frontend/src/components/folders/FolderDeleteModal.vue
index 2e8b4ac..52176d7 100644
--- a/frontend/src/components/folders/FolderDeleteModal.vue
+++ b/frontend/src/components/folders/FolderDeleteModal.vue
@@ -9,7 +9,8 @@
       role="dialog"
       aria-modal="true"
       aria-labelledby="delete-modal-title"
-      class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4"
+      data-test="folder-delete-modal-panel"
+      class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"
     >
       <!-- Warning icon -->
       <div class="flex justify-center">
diff --git a/frontend/src/components/folders/__tests__/FolderDeleteModal.mobile.test.js b/frontend/src/components/folders/__tests__/FolderDeleteModal.mobile.test.js
new file mode 100644
index 0000000..e45dcc3
--- /dev/null
+++ b/frontend/src/components/folders/__tests__/FolderDeleteModal.mobile.test.js
@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import FolderDeleteModal from '../FolderDeleteModal.vue'
+
+const globalStubs = {
+  AppIcon: true,
+}
+
+const testFolder = { id: 'f1', name: 'Projects', doc_count: 3 }
+
+describe('RESP-04: FolderDeleteModal mobile-safe panel', () => {
+  it('panel has max-h-[90vh] class for mobile scroll safety', () => {
+    const wrapper = mount(FolderDeleteModal, {
+      props: { folder: testFolder },
+      global: { stubs: globalStubs },
+    })
+    const panel = wrapper.find('[data-test="folder-delete-modal-panel"]')
+    expect(panel.exists()).toBe(true)
+    expect(panel.classes()).toContain('max-h-[90vh]')
+  })
+
+  it('panel has overflow-y-auto class for mobile scroll', () => {
+    const wrapper = mount(FolderDeleteModal, {
+      props: { folder: testFolder },
+      global: { stubs: globalStubs },
+    })
+    const panel = wrapper.find('[data-test="folder-delete-modal-panel"]')
+    expect(panel.classes()).toContain('overflow-y-auto')
+  })
+
+  it('panel has mx-4 horizontal margin so it fits within 375px viewport', () => {
+    const wrapper = mount(FolderDeleteModal, {
+      props: { folder: testFolder },
+      global: { stubs: globalStubs },
+    })
+    const panel = wrapper.find('[data-test="folder-delete-modal-panel"]')
+    expect(panel.classes()).toContain('mx-4')
+  })
+
+  it('confirm and cancel buttons are accessible (text, role)', () => {
+    const wrapper = mount(FolderDeleteModal, {
+      props: { folder: testFolder },
+      global: { stubs: globalStubs },
+    })
+    expect(wrapper.text()).toContain('Keep folder')
+    expect(wrapper.text()).toContain('Delete folder and documents')
+  })
+})
diff --git a/frontend/src/components/sharing/ShareModal.vue b/frontend/src/components/sharing/ShareModal.vue
index b2fb4e4..6eebd0f 100644
--- a/frontend/src/components/sharing/ShareModal.vue
+++ b/frontend/src/components/sharing/ShareModal.vue
@@ -9,7 +9,8 @@
       role="dialog"
       aria-modal="true"
       aria-labelledby="share-modal-title"
-      class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 relative"
+      data-test="share-modal-panel"
+      class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 relative max-h-[90vh] overflow-y-auto"
     >
       <!-- Close button -->
       <button
diff --git a/frontend/src/components/sharing/__tests__/ShareModal.mobile.test.js b/frontend/src/components/sharing/__tests__/ShareModal.mobile.test.js
new file mode 100644
index 0000000..e3f00c1
--- /dev/null
+++ b/frontend/src/components/sharing/__tests__/ShareModal.mobile.test.js
@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+
+// Mock stores and API so mount doesn't error out
+vi.mock('../../../stores/documents.js', () => ({
+  useDocumentsStore: () => ({
+    listShares: vi.fn().mockResolvedValue([]),
+    shareDocument: vi.fn(),
+    updateSharePermission: vi.fn(),
+    revokeShare: vi.fn(),
+  }),
+}))
+
+vi.mock('../../../stores/toast.js', () => ({
+  useToastStore: () => ({ show: vi.fn() }),
+}))
+
+import ShareModal from '../ShareModal.vue'
+
+const globalStubs = {
+  AppIcon: true,
+}
+
+const testDoc = { id: 'doc-1', original_name: 'test.pdf' }
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  vi.clearAllMocks()
+})
+
+describe('VISUAL-02: ShareModal form baseline (@tailwindcss/forms consistent pattern)', () => {
+  it('text input uses consistent ring-2 focus class pattern', async () => {
+    const wrapper = mount(ShareModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    await flushPromises()
+    const input = wrapper.find('input[type="text"]')
+    expect(input.exists()).toBe(true)
+    expect(input.classes()).toContain('focus:ring-2')
+    expect(input.classes()).toContain('focus:outline-none')
+  })
+
+  it('select uses consistent ring-2 focus class pattern', async () => {
+    const wrapper = mount(ShareModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    await flushPromises()
+    const select = wrapper.find('select')
+    expect(select.exists()).toBe(true)
+    expect(select.classes()).toContain('focus:ring-2')
+    expect(select.classes()).toContain('focus:outline-none')
+  })
+})
+
+describe('RESP-04: ShareModal mobile-safe panel', () => {
+  it('panel has max-h-[90vh] class for mobile scroll safety', async () => {
+    const wrapper = mount(ShareModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    await flushPromises()
+    const panel = wrapper.find('[data-test="share-modal-panel"]')
+    expect(panel.exists()).toBe(true)
+    expect(panel.classes()).toContain('max-h-[90vh]')
+  })
+
+  it('panel has overflow-y-auto class for mobile scroll', async () => {
+    const wrapper = mount(ShareModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    await flushPromises()
+    const panel = wrapper.find('[data-test="share-modal-panel"]')
+    expect(panel.classes()).toContain('overflow-y-auto')
+  })
+
+  it('panel has mx-4 horizontal margin so it fits within 375px viewport', async () => {
+    const wrapper = mount(ShareModal, {
+      props: { doc: testDoc },
+      global: { stubs: globalStubs },
+    })
+    await flushPromises()
+    const panel = wrapper.find('[data-test="share-modal-panel"]')
+    expect(panel.classes()).toContain('mx-4')
+  })
+})
diff --git a/frontend/src/views/DocumentView.vue b/frontend/src/views/DocumentView.vue
index f4619c2..84fe3e0 100644
--- a/frontend/src/views/DocumentView.vue
+++ b/frontend/src/views/DocumentView.vue
@@ -119,7 +119,8 @@
         role="dialog"
         aria-modal="true"
         aria-labelledby="cloud-delete-modal-title"
-        class="bg-white rounded-2xl shadow-xl p-6 max-w-sm w-full mx-4"
+        data-test="cloud-delete-modal-panel"
+        class="bg-white rounded-2xl shadow-xl p-6 max-w-sm w-full mx-4 max-h-[90vh] overflow-y-auto"
       >
         <div class="flex items-center gap-2 mb-2">
           <AppIcon name="warning" class="w-5 h-5 text-amber-500 shrink-0" />