some styling in tables

front/js/svelte/content/elements/Reference.svelte

@@ -18,7 +18,7 @@
 
 <div class="references">
     {#each recordEdges as recordEdge}
-        <span class="mr-3">
+        <span class="reference">
             <PreviewCardSmall {schemas} {graph} record={recordEdge}/>
         </span>
     {/each}

front/js/svelte/records/PreviewCardSmall.svelte

@@ -13,11 +13,8 @@
 {#if record?.data}
     <a
         href="{channel.lucentUrl}/records/{record.id}"
-        class="text-decoration-none rounded py-1 px-2 d-inline-block"
         {title}
-        style="border:2px solid {!schema.color
-            ? '#999'
-            : schema.color}!important;white-space: nowrap;"
+        class="reference"
     >
         {title}
     </a>

front/sass/_table.scss

@@ -113,6 +113,18 @@
   .field-ui-number {
     text-align: right;
   }
+
+  .references{
+    display: flex;
+    gap: 4px;
+
+    .reference{
+      font-size: 13px;
+      border-radius: 12px;
+      background: var(--p30);
+      padding: 1px 5px;
+    }
+  }
 }
 
 .file-table-row {