From a644a91956ea6a1d301a064063028f07168d4723 Mon Sep 17 00:00:00 2001
From: Craig Yu <craig.yu93@gmail.com>
Date: Wed, 20 Nov 2024 10:55:05 -0800
Subject: [PATCH] fix: scroll bar issue

---
 frontend/src/assets/styles/layout.scss |  1 +
 frontend/src/router/index.ts           | 17 +++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/assets/styles/layout.scss b/frontend/src/assets/styles/layout.scss
index 39646aee9..fdab0a3e0 100644
--- a/frontend/src/assets/styles/layout.scss
+++ b/frontend/src/assets/styles/layout.scss
@@ -15,6 +15,7 @@ label {
     width: 100vw;
     bottom: 0;
     padding: 1.06rem 1rem 0 1rem;
+    overflow-y: auto;
 }
 
 .page-body {
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 5927c5b41..dd4666b8e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -13,15 +13,16 @@ export const router = createRouter({
         }
     }),
     scrollBehavior(to) {
-        // Check if the route has the `protectedLayoutMeta`
         if (to.meta?.layout === "ProtectedLayout") {
-            return {
-                top: 0,
-                behavior: "smooth",
-                el: "#proctected-layout-container",
-            };
+            const mainElement = document.querySelector(".main");
+            if (mainElement) {
+                mainElement.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                });
+            }
+            return false; // Prevent default Vue Router scrolling behavior
         }
-        // Default behavior (no scrolling for other routes)
-        return false;
+        return false; // Default behavior for other routes
     },
 });