feat(nc-gui): responsive project list page

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

@@ -9,9 +9,9 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 <template>
   <NuxtLayout>
     <div
-      class="min-h-[calc(100vh_-_var(--header-height))] bg-primary bg-opacity-5 flex flex-wrap justify-between xl:flex-nowrap gap-6 py-6 px-4 pt-65px md:(px-12)"
+      class="min-h-[calc(100vh_-_var(--header-height))] bg-primary bg-opacity-5 flex flex-wrap justify-between xl:flex-nowrap gap-6 py-6 px-4 md:(px-12 pt-65px)"
     >
-      <div class="flex-1 justify-end hidden xl:(flex)">
+      <div class="hidden xl:(flex)">
         <div>
           <LazyGeneralSponsors />
         </div>
@@ -21,14 +21,14 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
         <NuxtPage />
       </div>
 
-      <div class="flex flex-1 justify-between gap-6 lg:block">
+      <div class="flex-1 flex gap-6 flex-col justify-center items-center md:(flex-row justify-between items-start)">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div key="social-card">
+            <div>
               <LazyGeneralSocialCard />
             </div>
 
-            <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
+            <div key="sponsors" class="inline-block xl:hidden">
               <LazyGeneralSponsors />
             </div>
           </TransitionGroup>

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
 import tinycolor from 'tinycolor2'
+import { breakpointsTailwind } from '@vueuse/core'
 import {
   Empty,
   Modal,
@@ -14,6 +15,7 @@ import {
   ref,
   themeV2Colors,
   useApi,
+  useBreakpoints,
   useGlobal,
   useNuxtApp,
   useUIPermission,
@@ -29,6 +31,8 @@ const { api, isLoading } = useApi()
 
 const { isUIAllowed } = useUIPermission()
 
+const { md } = useBreakpoints(breakpointsTailwind)
+
 const filterQuery = ref('')
 
 const projects = ref<ProjectType[]>()
@@ -131,12 +135,19 @@ onBeforeMount(loadProjects)
 <template>
   <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
-      <!-- My Projects -->
       <span class="text-4xl nc-project-page-title">{{ $t('title.myProject') }}</span>
+    </h1>
+
+    <div class="flex flex-wrap gap-2 mb-6">
+      <a-input-search
+        v-model:value="filterQuery"
+        class="max-w-[250px] nc-project-page-search rounded"
+        :placeholder="$t('activity.searchProject')"
+      />
 
       <a-tooltip title="Reload projects">
-        <span
+        <div
-          class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
+          class="transition-all duration-200 h-full flex-0 flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
           :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
         >
           <MdiRefresh
@@ -145,21 +156,13 @@ onBeforeMount(loadProjects)
             :class="isLoading ? '!text-primary' : ''"
             @click="loadProjects"
           />
-        </span>
+        </div>
       </a-tooltip>
-    </h1>
-
-    <div class="flex mb-6">
-      <a-input-search
-        v-model:value="filterQuery"
-        class="max-w-[250px] nc-project-page-search rounded"
-        :placeholder="$t('activity.searchProject')"
-      />
 
       <div class="flex-1" />
 
       <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']" overlay-class-name="nc-dropdown-create-project">
-        <button class="nc-new-project-menu">
+        <button class="nc-new-project-menu mt-4 md:mt-0">
           <span class="flex items-center w-full">
             {{ $t('title.newProj') }}
             <MdiMenuDown class="menu-icon" />
@@ -201,7 +204,12 @@ onBeforeMount(loadProjects)
         <a-skeleton />
       </div>
 
-      <a-table v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table v-else
+        :custom-row="customRow"
+        :data-source="filteredProjects"
+        :pagination="{ position: ['bottomCenter'] }"
+        :table-layout="md ? 'auto' : 'fixed'"
+      >
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>