From e336422f0918685194bf109e8813bef621917475 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 14:39:58 +0530
Subject: [PATCH] refactor(gui): avoid next and prev intersection with expanded
 form content

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss             |  6 ++++
 .../smartsheet/expanded-form/index.vue        | 35 +++++++++----------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 50f089d65e..82c97d0136 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -318,3 +318,9 @@ a {
   white-space: pre;
   user-select: auto;
 }
+
+
+
+.nc-drawer-expanded-form .ant-drawer-content-wrapper {
+  transition: width 0.3s !important;
+}
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 1ae57d4858..959ef56445 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -163,7 +163,7 @@ export default {
   <a-drawer
     v-model:visible="isExpanded"
     :footer="null"
-    width="min(90vw,800px)"
+    :width="commentsDrawer ? 'min(90vw,900px)' : 'min(90vw,700px)'"
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
     class="nc-drawer-expanded-form"
@@ -171,24 +171,23 @@ export default {
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
 
-    <div class="!bg-gray-100 rounded flex-1 relative">
-      <template v-if="props.showNextPrevIcons">
-        <a-tooltip placement="bottom">
-          <template #title>
-            {{ $t('labels.nextRow') }}
-          </template>
-          <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
-        </a-tooltip>
-        <a-tooltip placement="bottom">
-          <template #title>
-            {{ $t('labels.prevRow') }}
-          </template>
-          <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
-        </a-tooltip>
-      </template>
-
+    <div class="!bg-gray-100 rounded flex-1">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
-        <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
+        <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container relative">
+          <template v-if="props.showNextPrevIcons">
+            <a-tooltip placement="bottom">
+              <template #title>
+                {{ $t('labels.nextRow') }}
+              </template>
+              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
+            </a-tooltip>
+            <a-tooltip placement="bottom">
+              <template #title>
+                {{ $t('labels.prevRow') }}
+              </template>
+              <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
+            </a-tooltip>
+          </template>
           <div class="w-[500px] mx-auto">
             <div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]">
               <a-spin size="large" />