From 74dd4a5aec1178d91068e606e7152a8f155e0c4b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 17 Sep 2023 00:30:27 +0530
Subject: [PATCH] fix: missing scrollbar in shared view

closes #6276

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/layouts/shared-view.vue               |  2 +-
 packages/nc-gui/pages/index.vue                       | 11 ++++++++++-
 packages/nc-gui/pages/index/[typeOrId].vue            |  2 +-
 .../pages/index/[typeOrId]/form/[viewId]/index.vue    |  2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/layouts/shared-view.vue b/packages/nc-gui/layouts/shared-view.vue
index a090e8574d..d4ad57966c 100644
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@@ -79,7 +79,7 @@ export default {
         <div class="flex-1" />
       </a-layout-header>
 
-      <div class="w-full overflow-hidden" style="height: calc(100vh)">
+      <div class="w-full overflow-hidden" style="height: calc(100vh - var(--topbar-height))">
         <slot />
       </div>
     </a-layout>
diff --git a/packages/nc-gui/pages/index.vue b/packages/nc-gui/pages/index.vue
index 4408abea77..0d265cc07b 100644
--- a/packages/nc-gui/pages/index.vue
+++ b/packages/nc-gui/pages/index.vue
@@ -40,6 +40,12 @@ const isSharedView = computed(() => {
   return !routeName.startsWith('index-typeOrId-projectId-') && !['index', 'index-typeOrId'].includes(routeName)
 })
 
+const isSharedFormView = computed(() => {
+  const routeName = (route.value.name as string) || ''
+  // check route is shared form view route
+  return routeName.startsWith('index-typeOrId-form-viewId')
+})
+
 async function handleRouteTypeIdChange() {
   // avoid loading projects for shared views
   if (isSharedView.value) {
@@ -91,7 +97,10 @@ provide(ToggleDialogInj, toggleDialog)
 
 <template>
   <div>
-    <NuxtLayout v-if="isSharedView" name="shared-view">
+    <NuxtLayout v-if="isSharedFormView">
+      <NuxtPage />
+    </NuxtLayout>
+    <NuxtLayout v-else-if="isSharedView" name="shared-view">
       <NuxtPage />
     </NuxtLayout>
     <NuxtLayout v-else name="dashboard">
diff --git a/packages/nc-gui/pages/index/[typeOrId].vue b/packages/nc-gui/pages/index/[typeOrId].vue
index 5800abe05f..dd75602bd7 100644
--- a/packages/nc-gui/pages/index/[typeOrId].vue
+++ b/packages/nc-gui/pages/index/[typeOrId].vue
@@ -5,7 +5,7 @@ const route = router.currentRoute
 </script>
 
 <template>
-  <div>
+  <div class="h-full">
     <NuxtPage :transition="false" :page-key="route.params.typeOrId" />
   </div>
 </template>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index a71d70fbdb..ea043051fb 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -38,7 +38,7 @@ router.afterEach((to) => shouldRedirect(to.name as string))
 
 <template>
   <div
-    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-[100vh] min-h-[600px]"
+    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-[100vh] min-h-[600px] py-4"
   >
     <NuxtPage />