From bf062fb6d48026d947bcbc4e78964375eaf32487 Mon Sep 17 00:00:00 2001
From: fourdim <59462000+fourdim@users.noreply.github.com>
Date: Tue, 22 Aug 2023 19:49:05 -0400
Subject: [PATCH] fix: make media print overflow visible (#3893)

---
 .../src/components/workspace/index.css.ts     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/component/src/components/workspace/index.css.ts b/packages/component/src/components/workspace/index.css.ts
index 5ad1de0fca..b2b0b1e59a 100644
--- a/packages/component/src/components/workspace/index.css.ts
+++ b/packages/component/src/components/workspace/index.css.ts
@@ -97,6 +97,28 @@ export const mainContainerStyle = style({
   },
 } as ComplexStyleRule);
 
+// These styles override the default styles of the react-resizable-panels
+// as the default styles make the overflow part hidden when printing to PDF.
+// See https://github.com/toeverything/AFFiNE/pull/3893
+globalStyle(`${mainContainerStyle} > div[data-panel-group]`, {
+  '@media': {
+    print: {
+      overflow: 'visible !important',
+    },
+  },
+});
+
+// These styles override the default styles of the react-resizable-panels
+// as the default styles make the overflow part hidden when printing to PDF.
+// See https://github.com/toeverything/AFFiNE/pull/3893
+globalStyle(`${mainContainerStyle} > div[data-panel-group] > div[data-panel]`, {
+  '@media': {
+    print: {
+      overflow: 'visible !important',
+    },
+  },
+});
+
 export const toolStyle = style({
   position: 'fixed',
   right: '30px',