From d0342cf6e0b8ad3d67341e1168b4579096c66279 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 15:53:11 +0200
Subject: [PATCH] fix(gui-v2): wrap list page to avoid transition error

---
 .../nc-gui-v2/pages/projects/index/list.vue   | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index c91a629b3c..2dcb96680b 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -22,26 +22,28 @@ const openProject = async (project: ProjectType) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
-    <div>{{ $t('general.title') }}</div>
-    <div>Updated At</div>
-    <div></div>
-  </div>
+  <div>
+    <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
+      <div>{{ $t('general.title') }}</div>
+      <div>Updated At</div>
+      <div></div>
+    </div>
 
-  <div class="col-span-3 w-full h-[1px] bg-gray-500/50" />
-
-  <template v-for="project of projects" :key="project.id">
-    <div
-      class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100"
-      @click="openProject(project)"
-    >
-      <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
-      <div>{{ project.updated_at }}</div>
-      <div class="flex justify-center">
-        <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop="emit('delete-project', project)" />
-        <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
+    <div class="col-span-3 w-full h-[1px] bg-gray-500/50" />
+
+    <template v-for="project of projects" :key="project.id">
+      <div
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100"
+        @click="openProject(project)"
+      >
+        <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
+        <div>{{ project.updated_at }}</div>
+        <div class="flex justify-center">
+          <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop="emit('delete-project', project)" />
+          <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
+        </div>
       </div>
-    </div>
-    <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />
-  </template>
+      <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />
+    </template>
+  </div>
 </template>