From 4d254f39674a496783c28cf3be2f97e8dca9a97c Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Sun, 13 Aug 2023 21:36:29 +0800
Subject: [PATCH] fix: get back the missing scrollbar (#3718)

---
 packages/component/src/theme/global.css    | 8 ++++----
 tests/affine-local/e2e/open-affine.spec.ts | 8 ++++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/component/src/theme/global.css b/packages/component/src/theme/global.css
index e9c32355fc..5badf88fed 100644
--- a/packages/component/src/theme/global.css
+++ b/packages/component/src/theme/global.css
@@ -190,11 +190,11 @@ input[type='number']::-webkit-outer-spin-button {
   width: 0; /* Chrome Safari */
   height: 0;
 }
-.affine-default-viewport::-webkit-scrollbar {
+.affine-doc-viewport::-webkit-scrollbar {
   width: 20px; /* Chrome Safari */
   height: 20px;
 }
-.affine-default-viewport::-webkit-scrollbar-thumb {
+.affine-doc-viewport::-webkit-scrollbar-thumb {
   border-radius: 12px;
   background-clip: padding-box;
   border-style: solid;
@@ -202,10 +202,10 @@ input[type='number']::-webkit-outer-spin-button {
   border-color: transparent;
   transition: all 0.2s;
 }
-.affine-default-viewport:hover::-webkit-scrollbar-thumb {
+.affine-doc-viewport:hover::-webkit-scrollbar-thumb {
   background-color: var(--affine-divider-color);
 }
-.affine-default-viewport:hover::-webkit-scrollbar-thumb:hover {
+.affine-doc-viewport:hover::-webkit-scrollbar-thumb:hover {
   background-color: var(--affine-icon-color);
   border-width: 5px;
 }
diff --git a/tests/affine-local/e2e/open-affine.spec.ts b/tests/affine-local/e2e/open-affine.spec.ts
index 5870a038f6..531dac020c 100644
--- a/tests/affine-local/e2e/open-affine.spec.ts
+++ b/tests/affine-local/e2e/open-affine.spec.ts
@@ -42,3 +42,11 @@ test.skip('Download client tip', async ({ page }) => {
   );
   await expect(currentDownloadClientTipItem).toBeVisible();
 });
+
+test('Check the class name for the scrollbar', async ({ page }) => {
+  //Because the scroll bar in page mode depends on the class name of blocksuite
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  const affineDocViewport = page.locator('.affine-doc-viewport');
+  await expect(affineDocViewport).toBeVisible();
+});