fix: Links modal for mobile

packages/nc-gui/components/virtual-cell/components/Header.vue

@@ -52,15 +52,17 @@ const relationMeta = computed(() => {
 </script>
 
 <template>
-  <div class="flex justify-between relative pb-2 items-center">
+  <div class="flex sm:justify-between relative pb-2 items-center">
-    <div v-if="!isMobileMode" class="flex text-base font-bold justify-start items-center w-36">
+    <div v-if="!isMobileMode" class="flex text-base font-bold justify-start items-center min-w-36">
       {{ showHeader ? 'Linked Records' : '' }}
     </div>
-    <div class="flex flex-row flex-grow items-center justify-center gap-2 xs:h-full">
+    <div class="flex flex-row sm:w-[calc(100%-16rem)] xs:w-full items-center justify-center gap-2 xs:(h-full)">
-      <div class="flex justify-end w-[calc(50%-4rem)] xs:(w-[calc(50%-1rem)] h-full)">
+      <div class="flex sm:justify-end w-[calc(50%-1.5rem)] xs:(w-[calc(50%-1.5rem)] h-full)">
-        <div class="flex flex-shrink-0 xs:(flex-grow h-full) rounded-md gap-1 text-brand-500 items-center bg-gray-100 px-2 py-1">
+        <div class="flex w-full flex-shrink-0 xs:(h-full) rounded-md gap-1 text-brand-500 items-center bg-gray-100 px-2 py-1">
           <FileIcon class="w-4 h-4 min-w-4" />
-          {{ displayValue }}
+          <span class="truncate">
+            {{ displayValue }}
+          </span>
         </div>
       </div>
       <NcTooltip class="flex-shrink-0">
@@ -75,7 +77,7 @@ const relationMeta = computed(() => {
           }"
         />
       </NcTooltip>
-      <div class="flex justify-start xs:w-[calc(50%-1rem)] w-[calc(50%-4rem)] xs:justify-start">
+      <div class="flex justify-start xs:w-[calc(50%-1.5rem)] w-[calc(50%-1.5rem)] xs:justify-start">
         <div
           class="flex rounded-md flex-shrink-0 gap-1 items-center px-2 py-1 w-full overflow-hidden"
           :class="{

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -175,7 +175,7 @@ onKeyStroke('Escape', () => {
       :related-table-title="relatedTableMeta?.title"
       :display-value="row.row[displayValueProp]"
     />
-    <div class="my-3 bg-gray-50 border-gray-50 border-b-2"></div>
+    <div class="!xs:hidden my-3 bg-gray-50 border-gray-50 border-b-2"></div>
     <div class="flex mt-2 mb-2 items-center gap-2">
       <div
         class="flex items-center border-1 p-1 rounded-md w-full border-gray-200"