From a9174f669350952a5dd247ca86bcf7556e4ece05 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 14 Feb 2024 06:04:49 +0000
Subject: [PATCH 1/3] fix(nc-gui): In expanded form toggle options to icons
 when we do not have enough space

---
 .../smartsheet/expanded-form/Comments.vue          |  8 ++++----
 .../components/smartsheet/expanded-form/index.vue  | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 9988db87e8..ee3ec09c20 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -158,8 +158,8 @@ const onClickAudit = () => {
           @click="tab = 'comments'"
         >
           <div class="tab-title nc-tab">
-            <MdiMessageOutline class="h-4 w-4" />
-            Comments
+            <MdiMessageOutline class="h-4 w-4 flex-none" />
+            <span class="hidden lg:inline">Comments</span>
           </div>
         </div>
         <NcTooltip v-if="appInfo.ee" class="tab flex-1">
@@ -173,7 +173,7 @@ const onClickAudit = () => {
           >
             <div class="tab-title nc-tab select-none">
               <MdiFileDocumentOutline class="h-4 w-4" />
-              Audits
+              <span class="hidden lg:inline">Audits</span>
             </div>
           </div>
         </NcTooltip>
@@ -188,7 +188,7 @@ const onClickAudit = () => {
         >
           <div class="tab-title nc-tab">
             <MdiFileDocumentOutline class="h-4 w-4" />
-            Audits
+            <span class="hidden lg:inline">Audits</span>
           </div>
         </div>
       </div>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 4abd9e2230..e373bffceb 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -560,7 +560,7 @@ export default {
             <NcButton
               v-if="!isNew && rowId"
               type="secondary"
-              class="!xs:hidden text-gray-700"
+              class="!hidden lg:!block text-gray-700"
               :disabled="isLoading"
               @click="copyRecordUrl()"
             >
@@ -582,6 +582,18 @@ export default {
                       {{ $t('general.reload') }}
                     </div>
                   </NcMenuItem>
+                  <NcMenuItem
+                    v-if="!isNew && rowId"
+                    type="secondary"
+                    class="lg:!hidden text-gray-700"
+                    :disabled="isLoading"
+                    @click="copyRecordUrl()"
+                  >
+                    <div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center">
+                      <component :is="iconMap.link" class="cursor-pointer" />
+                      {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
+                    </div>
+                  </NcMenuItem>
                   <NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
                     <div
                       v-e="['c:row-expand:duplicate']"

From c39f88d838d53352d1538250227b5fb28152542c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 14 Feb 2024 06:04:50 +0000
Subject: [PATCH 2/3] fix(nc-gui): expanded form responsive issue

---
 .../smartsheet/expanded-form/Comments.vue     |  4 +--
 .../smartsheet/expanded-form/index.vue        | 30 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index ee3ec09c20..941b93c43c 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -211,13 +211,13 @@ const onClickAudit = () => {
         </div>
         <div v-else ref="commentsWrapperEl" 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="bg-white rounded-xl group border-1 gap-2 border-gray-200 overflow-hidden">
               <div class="flex flex-col p-4 gap-3">
                 <div class="flex justify-between">
                   <div class="flex items-center gap-2">
                     <GeneralUserIcon size="base" :name="log.display_name" :email="log.user" />
 
-                    <div class="flex flex-col">
+                    <div class="flex flex-col <lg:max-w-22">
                       <NcTooltip class="truncate max-w-42" show-on-truncate-only>
                         <template #title>
                           {{ log.display_name?.trim() || log.user || 'Shared source' }}
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index e373bffceb..e9eb80d851 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -520,7 +520,7 @@ export default {
     <div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6">
       <div class="flex h-9.5 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 w-100">
+          <div class="flex gap-3 w-100 <lg:max-w-64">
             <div class="flex gap-2">
               <NcButton
                 v-if="props.showNextPrevIcons"
@@ -560,7 +560,7 @@ export default {
             <NcButton
               v-if="!isNew && rowId"
               type="secondary"
-              class="!hidden lg:!block text-gray-700"
+              class="!<lg:hidden text-gray-700"
               :disabled="isLoading"
               @click="copyRecordUrl()"
             >
@@ -585,13 +585,13 @@ export default {
                   <NcMenuItem
                     v-if="!isNew && rowId"
                     type="secondary"
-                    class="lg:!hidden text-gray-700"
+                    class="!lg:hidden text-gray-700"
                     :disabled="isLoading"
                     @click="copyRecordUrl()"
                   >
                     <div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center">
                       <component :is="iconMap.link" class="cursor-pointer" />
-                      {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
+                      {{ $t('labels.copyRecordURL') }}
                     </div>
                   </NcMenuItem>
                   <NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
@@ -676,13 +676,13 @@ export default {
               v-for="(col, i) of fields"
               v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
               :key="col.title"
-              class="nc-expanded-form-row mt-2 py-2 xs:w-full"
+              class="nc-expanded-form-row mt-2 py-2 <lg:w-full"
               :class="`nc-expand-col-${col.title}`"
               :col-id="col.id"
               :data-testid="`nc-expand-col-${col.title}`"
             >
-              <div class="flex items-start flex-row sm:(gap-x-6) xs:(flex-col w-full) nc-expanded-cell min-h-10">
-                <div class="w-48 xs:(w-full) mt-0.25 !h-[35px]">
+              <div class="flex items-start flex-row sm:(gap-x-6) <lg:(flex-col w-full) nc-expanded-cell min-h-10">
+                <div class="w-48 <lg:(w-full) mt-0.25 !h-[35px]">
                   <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(col)"
                     class="nc-expanded-cell-header h-full"
@@ -708,7 +708,7 @@ export default {
                   <SmartsheetDivDataCell
                     v-if="col.title"
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                    class="bg-white w-80 xs:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
+                    class="bg-white w-80 <lg:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     :class="{
                       '!bg-gray-50 !select-text nc-system-field': isReadOnlyVirtualCell(col),
                     }"
@@ -737,12 +737,12 @@ export default {
                 </template>
               </div>
             </div>
-            <div v-if="hiddenFields.length > 0" class="flex w-full sm:px-12 xs:(px-1 mt-2) items-center py-3">
+            <div v-if="hiddenFields.length > 0" class="flex w-full lg:px-12 <lg:(px-1 mt-2) items-center py-3">
               <div class="flex-grow h-px mr-1 bg-gray-100"></div>
               <NcButton
                 type="secondary"
                 :size="isMobileMode ? 'medium' : 'small'"
-                class="flex-shrink-1 !text-sm"
+                class="flex-shrink !text-sm overflow-hidden"
                 @click="toggleHiddenFields"
               >
                 {{ showHiddenFields ? `Hide ${hiddenFields.length} hidden` : `Show ${hiddenFields.length} hidden` }}
@@ -756,12 +756,12 @@ export default {
                 v-for="(col, i) of hiddenFields"
                 v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
                 :key="col.title"
-                class="sm:(mt-2) py-2 xs:w-full"
+                class="sm:(mt-2) py-2 <lg:w-full"
                 :class="`nc-expand-col-${col.title}`"
                 :data-testid="`nc-expand-col-${col.title}`"
               >
-                <div class="sm:gap-x-6 flex sm:flex-row xs:(flex-col) items-start min-h-10">
-                  <div class="sm:w-48 xs:w-full scale-110 !h-[35px]">
+                <div class="sm:gap-x-6 flex sm:flex-row <lg:(flex-col w-full) items-start min-h-10">
+                  <div class="sm:w-48 <lg:w-full scale-110 !h-[35px]">
                     <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" />
 
                     <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
@@ -783,7 +783,7 @@ export default {
                     <LazySmartsheetDivDataCell
                       v-if="col.title"
                       :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                      class="bg-white rounded-lg w-80 border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
+                      class="bg-white rounded-lg w-80 <lg:w-full border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     >
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(col)"
@@ -874,7 +874,7 @@ export default {
         </div>
         <div
           v-if="showRightSections"
-          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="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-50 overflow-hidden h-full xs:hidden"
           :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
         >
           <SmartsheetExpandedFormComments :loading="isLoading" />

From b5fe0cad673d6a50f81ad6f6dc4beb9789b2bd1c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 14 Feb 2024 06:04:50 +0000
Subject: [PATCH 3/3] fix(nc-gui): small changes

---
 .../nc-gui/components/smartsheet/expanded-form/Comments.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 941b93c43c..69a95e043f 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -159,7 +159,7 @@ const onClickAudit = () => {
         >
           <div class="tab-title nc-tab">
             <MdiMessageOutline class="h-4 w-4 flex-none" />
-            <span class="hidden lg:inline">Comments</span>
+            <span class="<lg:hidden">Comments</span>
           </div>
         </div>
         <NcTooltip v-if="appInfo.ee" class="tab flex-1">
@@ -173,7 +173,7 @@ const onClickAudit = () => {
           >
             <div class="tab-title nc-tab select-none">
               <MdiFileDocumentOutline class="h-4 w-4" />
-              <span class="hidden lg:inline">Audits</span>
+              <span class="<lg:hidden">Audits</span>
             </div>
           </div>
         </NcTooltip>
@@ -188,7 +188,7 @@ const onClickAudit = () => {
         >
           <div class="tab-title nc-tab">
             <MdiFileDocumentOutline class="h-4 w-4" />
-            <span class="hidden lg:inline">Audits</span>
+            <span class="<lg:hidden">Audits</span>
           </div>
         </div>
       </div>