updated record-info-excerpt styles

ui/src/components/records/RecordInfo.svelte

@@ -20,7 +20,7 @@
     <a
         href="#/collections?collection={record.collectionId}&recordId={record.id}"
         target="_blank"
-        class="external-record-link link-hint"
+        class="record-link link-hint"
         rel="noopener noreferrer"
         use:tooltip={{
             text:

ui/src/components/records/RecordInfoContent.svelte

@@ -50,22 +50,23 @@
 {/each}
 
 {#each nonFileDisplayFields as field, i}
-    {#if i > 0},{/if}
-
+    {#if i > 0}
+        <span class="delimiter">•</span>
+    {/if}
     {#if field.type == "relation" && record.expand?.[field.name]}
         {@const isMultiple = Array.isArray(record.expand?.[field.name])}
         {@const expands = CommonHelper.toArray(record.expand?.[field.name])}
-        {#if isMultiple}[{/if}
+        {#if isMultiple}<span class="expand-start">{"["}</span>{/if}
         {#each expands as expandRecord, j}
-            {#if j > 0}&nbsp;&nbsp;•&nbsp;{/if}
+            {#if j > 0}<span class="delimiter">|</span>{/if}
             <RecordInfoContent record={expandRecord} />
         {/each}
-        {#if isMultiple}]{/if}
+        {#if isMultiple}<span class="expand-end">{"]"}</span>{/if}
     {:else if field.type == "geoPoint"}
         <GeoPointValue value={record[field.name]} />
     {:else}
-        {CommonHelper.truncate(CommonHelper.displayValue(record, [field.name]), 70)}
+        <span class="txt">{CommonHelper.truncate(CommonHelper.displayValue(record, [field.name]), 70)}</span>
     {/if}
 {:else}
-    {CommonHelper.truncate(CommonHelper.displayValue(record, []), 70)}
+    <span class="txt">{CommonHelper.truncate(CommonHelper.displayValue(record, []), 70)}</span>
 {/each}

ui/src/components/records/fields/GeoPointValue.svelte

@@ -2,8 +2,4 @@
     export let value = {};
 </script>
 
-<div class="txt">
-    {value?.lon}
-    <span class="txt-disabled txt-xs">|</span>
-    {value.lat}
-</div>
+<div class="txt">{value?.lon}, {value?.lat}</div>

ui/src/scss/_base.scss

@@ -960,9 +960,10 @@ a.thumb:not(.thumb-active) {
 }
 
 .record-info-excerpt {
-    display: inline-block;
-    vertical-align: middle;
-    align-content: center;
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 5px;;
     max-width: 100%;
     min-width: 0;
     line-height: 18px;
@@ -970,32 +971,23 @@ a.thumb:not(.thumb-active) {
     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;
-        }
+    .delimiter {
+        font-size: 0.8em;
+        color: var(--txtDisabledColor);
     }
-    .txt {
-        display: inline-block;
+    .expand-start,
+    .expand-end {
+        font-weight: bold;
+        color: var(--txtDisabledColor);
     }
-    .external-record-link {
-        display: inline-block;
-        vertical-align: middle;
-        margin-left: 3px;
-        line-height: 1;
-        i {
-            vertical-align: middle;
-            &:before {
-                margin: 0;
-            }
-        }
+    .expand-start {
+        margin-right: -2px;
+    }
+    .expand-end {
+        margin-left: -2px;
+    }
+    .record-link {
+        margin-left: 2px;
     }
 }