fix: Improve PDF viewer cross-browser compatibility

Closes #1219

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
+            <PdfViewer
-            <object
+              src={attachment.data.url}
-              data={attachment.data.url}
-              type={attachment.data.mimeType}
               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) {

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;

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;
+  }
+}