From f0680831c2bb7f8cbfb70e880c24529bab37846e Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Wed, 2 Jul 2025 18:26:03 +0200
Subject: [PATCH] fix: Improve PDF viewer cross-browser compatibility

Closes #1219
---
 .../attachments/Attachments/Item.jsx          | 25 +++++++++---------
 .../attachments/Attachments/PdfViewer.jsx     | 26 +++++++++++++++++++
 .../Attachments/PdfViewer.module.scss         | 10 +++++++
 3 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 client/src/components/attachments/Attachments/PdfViewer.jsx
 create mode 100644 client/src/components/attachments/Attachments/PdfViewer.module.scss

diff --git a/client/src/components/attachments/Attachments/Item.jsx b/client/src/components/attachments/Attachments/Item.jsx
index 1efb4035..24c95bf5 100644
--- a/client/src/components/attachments/Attachments/Item.jsx
+++ b/client/src/components/attachments/Attachments/Item.jsx
@@ -16,6 +16,7 @@ import Encodings from '../../../constants/Encodings';
 import { AttachmentTypes } from '../../../constants/Enums';
 import ItemContent from './ItemContent';
 import ContentViewer from './ContentViewer';
+import PdfViewer from './PdfViewer';
 import CsvViewer from './CsvViewer';
 
 import styles from './Item.module.scss';
@@ -40,10 +41,8 @@ const Item = React.memo(({ id, isVisible }) => {
       switch (attachment.data.mimeType) {
         case 'application/pdf':
           content = (
-            // eslint-disable-next-line jsx-a11y/alt-text
-            <object
-              data={attachment.data.url}
-              type={attachment.data.mimeType}
+            <PdfViewer
+              src={attachment.data.url}
               className={classNames(styles.content, styles.contentViewer)}
             />
           );
@@ -60,15 +59,6 @@ const Item = React.memo(({ id, isVisible }) => {
             <audio controls src={attachment.data.url} className={styles.content} />
           );
 
-          break;
-        case 'video/mp4':
-        case 'video/ogg':
-        case 'video/webm':
-          content = (
-            // eslint-disable-next-line jsx-a11y/media-has-caption
-            <video controls src={attachment.data.url} className={styles.content} />
-          );
-
           break;
         case 'text/csv':
           content = (
@@ -78,6 +68,15 @@ const Item = React.memo(({ id, isVisible }) => {
             />
           );
 
+          break;
+        case 'video/mp4':
+        case 'video/ogg':
+        case 'video/webm':
+          content = (
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            <video controls src={attachment.data.url} className={styles.content} />
+          );
+
           break;
         default:
           if (attachment.data.encoding === Encodings.UTF8) {
diff --git a/client/src/components/attachments/Attachments/PdfViewer.jsx b/client/src/components/attachments/Attachments/PdfViewer.jsx
new file mode 100644
index 00000000..578704d8
--- /dev/null
+++ b/client/src/components/attachments/Attachments/PdfViewer.jsx
@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './PdfViewer.module.scss';
+
+const PdfViewer = React.memo(({ src, className }) => (
+  // eslint-disable-next-line jsx-a11y/iframe-has-title
+  <iframe src={src} type="application/pdf" className={classNames(styles.wrapper, className)} />
+));
+
+PdfViewer.propTypes = {
+  src: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+PdfViewer.defaultProps = {
+  className: undefined,
+};
+
+export default PdfViewer;
diff --git a/client/src/components/attachments/Attachments/PdfViewer.module.scss b/client/src/components/attachments/Attachments/PdfViewer.module.scss
new file mode 100644
index 00000000..f8a14bf9
--- /dev/null
+++ b/client/src/components/attachments/Attachments/PdfViewer.module.scss
@@ -0,0 +1,10 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    border: 0;
+  }
+}