fix: Fixed expanded form UI issues

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -153,7 +153,7 @@ const processedAudit = (log: string) => {
           </div>
           <div class="font-medium text-center my-6 text-gray-500">{{ $t('activity.startCommenting') }}</div>
         </div>
-        <div v-else class="flex flex-col h-full p-2 space-y-2 nc-scrollbar-md">
+        <div v-else class="flex flex-col h-full py-2 pl-2 pr-1 space-y-2 nc-scrollbar-md">
           <div v-for="log of comments" :key="log.id">
             <div class="bg-white rounded-xl group border-1 gap-2 border-gray-200">
               <div class="flex flex-col p-4 gap-3">
@@ -198,14 +198,12 @@ const processedAudit = (log: string) => {
             </div>
           </div>
         </div>
-        <div v-if="hasEditPermission" class="h-16.5 p-2 rounded-b-xl bg-gray-50 gap-2 flex">
-          <div class="flex flex-row items-end">
-            <GeneralUserIcon size="base" />
-          </div>
-          <div class="flex flex-row bg-white py-2.75 px-1.5 items-center rounded-lg border-1 border-gray-200">
+        <div v-if="hasEditPermission" class="p-2 bg-gray-50 gap-2 flex">
+          <div class="h-14 flex flex-row w-full bg-white py-2.75 px-1.5 items-center rounded-xl border-1 border-gray-200">
+            <GeneralUserIcon size="base" class="!w-10" />
             <a-input
               v-model:value="comment"
-              class="!rounded-lg border-1 bg-white !px-2 !py-2 !border-gray-200 nc-comment-box !outline-none"
+              class="!rounded-lg border-1 bg-white !px-2.5 !py-2 !border-gray-200 nc-comment-box !outline-none"
               placeholder="Start typing..."
               :bordered="false"
               @keyup.enter.prevent="saveComment"
@@ -217,7 +215,7 @@ const processedAudit = (log: string) => {
           </div>
         </div>
       </div>
-      <div v-else ref="commentsWrapperEl" class="flex flex-col h-full pl-1.5 pr-1 pt-1 nc-scrollbar-md space-y-2">
+      <div v-else ref="commentsWrapperEl" class="flex flex-col h-full pl-2 pr-1 pt-2 nc-scrollbar-md space-y-2">
         <template v-if="audits.length === 0">
           <div class="flex flex-col text-center justify-center h-full">
             <div class="text-center text-3xl text-gray-600">

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -367,20 +367,32 @@ export default {
     :width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'"
     :body-style="{ padding: 0 }"
     :closable="false"
-    size="large"
+    size="small"
     class="nc-drawer-expanded-form"
     :class="{ active: isExpanded }"
   >
-    <div class="h-[75vh] xs:(h-[95vh] max-h-full) max-h-215 flex flex-col p-6">
+    <div class="h-[85vh] xs:(h-[95vh] max-h-full) max-h-215 flex flex-col p-6">
       <div class="flex h-8 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">
         <template v-if="!isMobileMode">
           <div class="flex gap-3">
             <div class="flex gap-2">
-              <NcButton v-if="props.showNextPrevIcons" type="secondary" class="nc-prev-arrow !w-10" @click="$emit('prev')">
-                <MdiChevronUp class="text-md text-gray-700" />
+              <NcButton
+                v-if="props.showNextPrevIcons"
+                :disabled="props.firstRow"
+                type="secondary"
+                class="nc-prev-arrow !w-10"
+                @click="$emit('prev')"
+              >
+                <MdiChevronUp class="text-md" />
               </NcButton>
-              <NcButton v-if="!props.lastRow" type="secondary" class="nc-next-arrow !w-10" @click="onNext">
-                <MdiChevronDown class="text-md text-gray-700" />
+              <NcButton
+                v-if="props.showNextPrevIcons"
+                :disabled="props.lastRow"
+                type="secondary"
+                class="nc-next-arrow !w-10"
+                @click="onNext"
+              >
+                <MdiChevronDown class="text-md" />
               </NcButton>
             </div>
             <div v-if="displayValue" class="flex items-center truncate max-w-32 font-bold text-gray-800 text-xl">
@@ -455,8 +467,8 @@ export default {
           </div>
         </template>
       </div>
-      <div ref="wrapper" class="flex flex-grow flex-row h-[calc(100%-3rem)] w-full gap-4">
-        <div class="flex w-full flex-col border-1 rounded-xl overflow-hidden border-gray-200 xs:(border-0 rounded-none)">
+      <div ref="wrapper" class="flex flex-grow flex-row h-[calc(100%-4rem)] w-full gap-4">
+        <div class="flex w-2/3 xs:w-full flex-col border-1 rounded-xl overflow-hidden border-gray-200 xs:(border-0 rounded-none)">
           <div
             class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md !pb-2 items-center w-full bg-white p-4 xs:p-0"
           >
@@ -543,7 +555,7 @@ export default {
           </div>
           <div
             v-if="isUIAllowed('dataEdit')"
-            class="w-full h-14 border-t-1 border-gray-200 bg-white flex items-center justify-end p-2 xs:(p-0 mt-4 border-t-0 gap-x-4 justify-between)"
+            class="w-full h-16 border-t-1 border-gray-200 bg-white flex items-center justify-end p-3 xs:(p-0 mt-4 border-t-0 gap-x-4 justify-between)"
           >
             <NcDropdown v-if="!isNew && isMobileMode">
               <NcButton type="secondary" class="nc-expand-form-more-actions w-10">
@@ -598,7 +610,7 @@ export default {
         </div>
         <div
           v-if="!isNew && commentsDrawer && isUIAllowed('commentList')"
-          class="nc-comments-drawer border-1 relative border-gray-200 w-[380px] bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden"
+          class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden"
           :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
         >
           <LazySmartsheetExpandedFormComments />