diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index eaf18b62b8..f1cb2880bc 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -312,6 +312,7 @@
"pdf_compile_in_progress_error": "",
"pdf_compile_rate_limit_hit": "",
"pdf_compile_try_again": "",
+ "pdf_detach_safari_issues": "",
"pdf_in_separate_tab": "",
"pdf_only_hide_editor": "",
"pdf_preview_error": "",
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx
new file mode 100644
index 0000000000..505c72dd12
--- /dev/null
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Button } from 'react-bootstrap'
+import Tooltip from '../../../shared/components/tooltip'
+import Icon from '../../../shared/components/icon'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+
+const BROWSER_IS_SAFARI =
+ navigator.userAgent &&
+ /.*Safari\/.*/.test(navigator.userAgent) &&
+ !/.*Chrome\/.*/.test(navigator.userAgent) &&
+ !/.*Chromium\/.*/.test(navigator.userAgent)
+
+function PdfHybridSafariWarning() {
+ const { t } = useTranslation()
+ const { detachRole } = useLayoutContext()
+
+ if (!BROWSER_IS_SAFARI) {
+ return null
+ }
+
+ if (detachRole !== 'detached') {
+ return null
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default PdfHybridSafariWarning
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js
new file mode 100644
index 0000000000..62c6a3b170
--- /dev/null
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js
@@ -0,0 +1,38 @@
+import { Alert } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
+
+const BROWSER_IS_SAFARI =
+ navigator.userAgent &&
+ /.*Safari\/.*/.test(navigator.userAgent) &&
+ !/.*Chrome\/.*/.test(navigator.userAgent) &&
+ !/.*Chromium\/.*/.test(navigator.userAgent)
+
+function PdfPreviewDetachedRootSafariWarning() {
+ const { t } = useTranslation()
+
+ const [hidePdfDetachSafariAlert, setHidePdfDetachSafariAlert] =
+ usePersistedState('hide-pdf-detach-safari-alert', false, true)
+
+ function handleDismiss() {
+ setHidePdfDetachSafariAlert(true)
+ }
+
+ if (!BROWSER_IS_SAFARI) {
+ return null
+ }
+
+ if (hidePdfDetachSafariAlert) {
+ return null
+ }
+
+ return (
+
+
+ {t('pdf_detach_safari_issues')}
+
+
+ )
+}
+
+export default PdfPreviewDetachedRootSafariWarning
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js
index 9e0a28b581..1a34c6a41d 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js
@@ -2,11 +2,13 @@ import ReactDOM from 'react-dom'
import PdfPreview from './pdf-preview'
import { ContextRoot } from '../../../shared/context/root-context'
import { Shortcuts } from './shortcuts'
+import PdfPreviewDetachedRootSafariWarning from './pdf-preview-detached-root-safari-warning'
function PdfPreviewDetachedRoot() {
return (
+
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
index 7e0a17b30f..0b2c7c91f3 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
@@ -6,6 +6,7 @@ import PdfCompileButton from './pdf-compile-button'
import PdfExpandButton from './pdf-expand-button'
import PdfHybridLogsButton from './pdf-hybrid-logs-button'
import PdfHybridDownloadButton from './pdf-hybrid-download-button'
+import PdfHybridSafariWarning from './pdf-hybrid-safari-warning'
import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
import { DetachedSynctexControl } from './detach-synctex-control'
@@ -60,6 +61,7 @@ function PdfPreviewHybridToolbarInner() {
+
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index 13741f120b..83e173b80f 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/services/web/frontend/stylesheets/app/editor.less
@@ -63,12 +63,20 @@
display: inline-block;
text-align: left;
min-width: 400px;
- padding: @global-alerts-padding;
font-size: 14px;
margin-bottom: (@line-height-computed / 4);
position: relative;
z-index: 20;
}
+
+ .alert&:not(.alert-dismissable) {
+ padding: @global-alerts-padding;
+ }
+}
+
+.global-alerts-detached {
+ margin-top: 0;
+ padding-top: @margin-sm;
}
#try-reconnect-now-button {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 4fbde9f6ea..4d6b97f72a 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1653,6 +1653,7 @@
"redirect_to_editor": "Redirect to editor",
"layout_processing": "Layout processing",
"your_browser_does_not_support_this_feature": "Sorry, your browser doesn’t support this feature. Please update your browser to its latest version.",
+ "pdf_detach_safari_issues": "Safari users reported experiencing problems with opening PDF in a new tab. If you are also experiencing problems, we recommend trying a different browser.",
"show_in_code": "Show in code",
"show_in_pdf": "Show in PDF",
"fold_line": "Fold line",