[#7260] print nested presentable multiple relation fields

ui/src/components/records/RecordInfo.svelte

@@ -14,13 +14,13 @@
     }
 </script>
 
-<div class="record-info">
+<div class="record-info-excerpt">
     <RecordInfoContent {record} />
 
     <a
         href="#/collections?collection={record.collectionId}&recordId={record.id}"
         target="_blank"
-        class="inline-flex link-hint"
+        class="external-record-link link-hint"
         rel="noopener noreferrer"
         use:tooltip={{
             text:
@@ -39,16 +39,3 @@
         <i class="ri-external-link-line txt-sm"></i>
     </a>
 </div>
-
-<style lang="scss">
-    .record-info {
-        display: inline-flex;
-        vertical-align: top;
-        align-items: center;
-        justify-content: center;
-        max-width: 100%;
-        min-width: 0;
-        gap: 5px;
-        padding-left: 1px; // for visual alignment with the new tab icon
-    }
-</style>

ui/src/components/records/RecordInfoContent.svelte

@@ -53,7 +53,14 @@
     {#if i > 0},{/if}
 
     {#if field.type == "relation" && record.expand?.[field.name]}
-        <RecordInfoContent bind:record={record.expand[field.name]} />
+        {@const isMultiple = Array.isArray(record.expand?.[field.name])}
+        {@const expands = CommonHelper.toArray(record.expand?.[field.name])}
+        {#if isMultiple}[{/if}
+        {#each expands as expandRecord, j}
+            {#if j > 0}&nbsp;&nbsp;•&nbsp;{/if}
+            <RecordInfoContent record={expandRecord} />
+        {/each}
+        {#if isMultiple}]{/if}
     {:else if field.type == "geoPoint"}
         <GeoPointValue value={record[field.name]} />
     {:else}

ui/src/scss/_base.scss

@@ -959,6 +959,46 @@ a.thumb:not(.thumb-active) {
     }
 }
 
+.record-info-excerpt {
+    display: inline-block;
+    vertical-align: middle;
+    align-content: center;
+    max-width: 100%;
+    min-width: 0;
+    line-height: 18px;
+    padding-left: 1px; // for visual alignment with the new tab icon
+    text-align: left;
+    white-space: normal;
+    word-break: break-all;
+   .btn,
+   .thumb,
+   .link-hint {
+        margin: 0 2px;
+        vertical-align: middle;
+        &:first-child {
+            margin-left: 0;
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .txt {
+        display: inline-block;
+    }
+    .external-record-link {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 3px;
+        line-height: 1;
+        i {
+            vertical-align: middle;
+            &:before {
+                margin: 0;
+            }
+        }
+    }
+}
+
 // sidebar menu
 .sidebar-menu {
     --sidebarListItemMargin: 10px;