fix: #1665 prod release fixes (#1666)

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 {

frontend/src/layouts/ProtectedLayout.vue

@@ -59,7 +59,7 @@ watch(termsAndConditionQuery.status, () => {
 </script>
 
 <template>
-    <div id="proctected-layout-container">
+    <div id="protected-layout-container">
         <!-- Show layout and content -->
         <TermsAndConditions />
         <Header title="FAM" subtitle="Forests Access Management" />
@@ -80,7 +80,7 @@ watch(termsAndConditionQuery.status, () => {
     </div>
 </template>
 <style lang="scss">
-#proctected-layout-container {
+#protected-layout-container {
     .terms-and-condition-spinner-container {
         .spinner-container {
             display: flex;

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
     },
 });