fix(gui-v2): use maximum available width in LTAR cells

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -80,7 +80,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     </div>
     <div
       v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')"
-      class="flex-1 flex justify-end gap-1 min-h-[30px] items-center"
+      class="flex justify-end gap-1 min-h-[30px] items-center"
     >
       <component
         :is="addIcon"

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -95,7 +95,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
           </span>
         </template>
       </div>
-      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex-1 flex justify-end gap-1 min-h-[30px] items-center">
+      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -94,7 +94,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
         </template>
       </div>
 
-      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex-1 flex justify-end gap-1 min-h-[30px] items-center">
+      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -44,7 +44,7 @@ export default {
 
 <template>
   <div
-    class="group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
+    class="chip group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
     @click="expandedFormDlg = true"
   >
@@ -74,6 +74,7 @@ export default {
   .name {
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 }
 </style>