refactor(dataTable): mantineify table media preview DEV-2062

[magicznyleszek]

🗒️ Checklist

1. run linter locally
2. update developer docs (API, README, inline, etc.), if any
3. for user-facing doc changes create a Zulip thread at #Support Docs Updates, if any
4. draft PR with a title <type>(<scope>)<!>: <title> DEV-1234
5. assign yourself, tag PR: at least Front end and/or Back end or workflow
6. fill in the template below and delete template comments
7. review thyself: read the diff and repro the preview as written
8. open PR & confirm that CI passes & request reviewers, if needed
9. act on any greptile review below a 5/5 score or leave comment explaining why you won't
10. delete this checklist section from the final squash commit before merging

📣 Summary

Migrates Table Media Preview modal and Text Modal to the Mantine modal flow, removes the legacy BigModal path for table media preview, and adds stable offline-safe DataTableCell stories for media behaviors.

💭 Notes

Changes here:

• Removed legacy code from bigModal.js and constants.ts.
• New TableMediaPreview module
  • Preview body component in TableMediaPreview.tsx
  • Modal title component in TableMediaPreviewModalTitle.tsx
  • Shared opener in openTableMediaPreviewModal.tsx
  • Shared utility for submission position label in tableMediaPreview.utils.ts
  • Module styles in TableMediaPreview.module.scss
  • Exports in index.ts
• MediaCell.tsx and TextModalCell.tsx now both use new TableMediaPreview
• DataTableCell.stories.tsx has few new stories and now correctly opens the modal when clicked (provider was missing)

👀 Preview steps

1. ℹ️ Have a project with text, image, audio and video questions and a submission. Also a transcript, translation and qual question response.
2. Go to Project → Data → Table.
3. Use the "northeast arrow" button in each of the cells:

• text response
• image response
• video response
• transcript
• translation
• qual question response

4. Open Storybook and review DataTableCell stories for PlainText, AttachmentMissing, ImageAttachment, AudioAttachment, and VideoAttachment; confirm the modal can be opened for the ones that have the "northeast arrow" button

[greptile-apps]

Greptile Summary

This PR moves DataTable media and long-text previews to Mantine modals. The main changes are:

• Adds a shared TableMediaPreview module and modal opener.
• Migrates media and text cells away from legacy modal components.
• Removes the old BigModal media-preview path and modal constant.
• Adds offline-safe image, audio, video, and missing-attachment stories.

Confidence Score: 4/5

The text-preview modal should restore automatic direction handling before merging.

• Production and Storybook callers have the required Mantine modal provider.
• The main media routes retain their existing image, video, file, and audio behavior.
• RTL and mixed-direction custom text can render incorrectly in the new modal.

jsapp/js/components/submissions/DataTableCell/TableMediaPreview/openTableMediaPreviewModal.tsx

_{Reviews (1): Last reviewed commit: "remove empty lines" | Re-trigger Greptile}

[greptile-apps]

Automatic Text Direction Is Lost

The old text modal wrapped both plain and custom content in dir='auto', but this branch mounts the content directly. Transcript, translation, or qualitative-response text beginning with an RTL script can therefore inherit the wrong direction and render with incorrect alignment or bidirectional ordering.

Suggested change

	children: args.modalContent ?? (
	<TableMediaPreview questionType={QUESTION_TYPES.text.id} displayValue={args.displayValue} />
	),
	children: (
	<div dir='auto'>
	{args.modalContent ?? (
	<TableMediaPreview questionType={QUESTION_TYPES.text.id} displayValue={args.displayValue} />
	)}
	</div>
	),