Merge pull request #3260 from nocodb/fix/gui-v2-webhook-layout

fix(gui-v2): webhook layout

packages/nc-gui-v2/components/webhook/Drawer.vue

@@ -28,17 +28,19 @@ async function editHook(hook: Record<string, any>) {
     :closable="false"
     placement="right"
     width="700px"
-    :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '50px' }"
+    :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '0px 0px', overflow: 'hidden' }"
     @keydown.esc="vModel = false"
   >
-    <div>
-      <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
-      <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
-    </div>
-    <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
-      <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
-        🚀 We are Hiring! 🚀
-      </a-button>
-    </div>
+    <a-layout class="">
+      <a-layout-content class="px-10 py-5 scrollbar-thin-primary">
+        <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
+        <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+      </a-layout-content>
+      <a-layout-footer class="!bg-white flex">
+        <a-button v-t="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
+          🚀 We are Hiring! 🚀
+        </a-button>
+      </a-layout-footer>
+    </a-layout>
   </a-drawer>
 </template>

packages/nc-gui-v2/components/webhook/Editor.vue

@@ -383,14 +383,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="mb-4">
-    <div class="float-left mt-2">
-      <div class="flex items-center">
+  <div class="flex">
+    <div class="flex-1">
+      <div class="flex items-center mt-2">
         <MdiArrowLeftBold class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
         <span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
       </div>
     </div>
-    <div class="float-right mb-5">
+    <div>
       <a-button class="mr-3" size="large" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTap class="mr-2" />

packages/nc-gui-v2/components/webhook/List.vue

@@ -49,20 +49,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-5/6">
-    <div class="mb-4">
+  <div class="">
+    <div class="mb-2">
       <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
       <a-button class="float-right" type="primary" size="large" @click="emit('add')">
         {{ $t('activity.addWebhook') }}
       </a-button>
     </div>
     <a-divider />
-    <div v-if="hooks.length">
-      <a-list
-        item-layout="horizontal"
-        :data-source="hooks"
-        class="cursor-pointer max-h-[75vh] overflow-y-auto scrollbar-thin-primary"
-      >
+    <div v-if="hooks.length" class="">
+      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer scrollbar-thin-primary">
         <template #renderItem="{ item, index }">
           <a-list-item class="p-2" @click="emit('edit', item)">
             <a-list-item-meta>
@@ -93,8 +89,10 @@ onMounted(() => {
         </template>
       </a-list>
     </div>
-    <div v-else class="p-4 bg-gray-100 text-gray-600">
-      Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+    <div v-else class="min-h-[75vh]">
+      <div class="p-4 bg-gray-100 text-gray-600">
+        Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+      </div>
     </div>
   </div>
 </template>