fix(gui-v2): overflow of main container

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/assets/style-v2.css

@@ -1,8 +1,10 @@
 html,
 body,
-#__nuxt {
+#__nuxt,
-    margin: 0;
+.v-application__wrap {
-    height: 100%;
+    margin: 0 !important;
+    height: 100vh;
+    width: 100vw;
 }
 
 html, body {

packages/nc-gui-v2/pages/projects/index.vue

@@ -104,7 +104,7 @@ const activePage = $ref(navDrawerOptions[0].title)
       </v-navigation-drawer>
     </template>
 
-    <v-container class="flex-1 h-full">
+    <v-container class="flex-1 mb-12">
       <div class="flex">
         <div class="flex-1 prose-xl p-2">
           {{ activePage }}
@@ -130,3 +130,16 @@ const activePage = $ref(navDrawerOptions[0].title)
     </v-container>
   </NuxtLayout>
 </template>
+
+<style scoped>
+.v-main {
+  @apply w-full;
+  overflow: hidden;
+  flex: unset !important;
+}
+
+:deep(.v-main__wrap) {
+  @apply flex-0 w-full relative scrollbar-thin-primary;
+  overflow-x: hidden;
+}
+</style>

packages/nc-gui-v2/pages/projects/index/index.vue

@@ -32,42 +32,13 @@ const formatTitle = (title: string) =>
 </script>
 
 <template>
-  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 3xl:grid-cols-8 gap-4">
+  <div class="grid grid-cols-2 md:grid-cols-4 3xl:grid-cols-6 gap-6 md:gap-12">
-    <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
-      <div
-        class="nc-project-thumbnail shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg"
-        :style="{ backgroundColor: getColorByIndex(i) }"
-        @click="openProject(project)"
-      >
-        {{ formatTitle(project.title) }}
-
-        <MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop />
-
-        <v-menu>
-          <template #activator="{ props }">
-            <MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
-          </template>
-
-          <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300">
-            <div class="grid grid-cols-6 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click.stop>
-              <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
-              <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
-            </div>
-          </v-list>
-        </v-menu>
-      </div>
-
-      <div class="prose-lg font-semibold">
-        {{ project.title || 'Untitled' }}
-      </div>
-    </div>
-
     <div class="col-span-2 md:col-span-1">
       <div class="group flex flex-col items-center gap-2">
         <v-menu>
           <template #activator="{ props }">
             <div
-              class="cursor-pointer shadow-md nc-project-thumbnail opacity-50 hover:(opacity-100 shadow-lg) bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300"
+              class="cursor-pointer w-full md:w-1/2 min-w-[150px] shadow-md nc-project-thumbnail opacity-50 hover:(opacity-100 shadow-lg) bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300"
               @click="props.onClick"
             >
               <MdiPlus />
@@ -95,19 +66,41 @@ const formatTitle = (title: string) =>
         </v-menu>
       </div>
     </div>
+
+    <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
+      <div
+        class="nc-project-thumbnail w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg"
+        :style="{ backgroundColor: getColorByIndex(i) }"
+        @click="openProject(project)"
+      >
+        {{ formatTitle(project.title) }}
+
+        <MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop />
+
+        <v-menu>
+          <template #activator="{ props }">
+            <MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
+          </template>
+
+          <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300">
+            <div class="grid grid-cols-6 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click.stop>
+              <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
+              <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
+            </div>
+          </v-list>
+        </v-menu>
+      </div>
+
+      <div class="prose-lg font-semibold">
+        {{ project.title || 'Untitled' }}
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .nc-project-thumbnail {
-  height: 100px;
+  @apply font-bold text-white text-[75px] h-[150px] w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg;
-  width: 100px;
-  font-size: 50px;
-  color: white;
-  font-weight: bold;
-  border-radius: 4px;
-  margin-inside: auto;
-  position: relative;
 }
 
 .nc-project-option-menu-icon,