references

front/js/svelte/records/elements/File.svelte

@@ -74,7 +74,10 @@
 {#if references.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>
         {#each references as reference (reference.id)}
-            <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+            <!--This div helps the sorting thing-->
+            <div>
+                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+            </div>
         {/each}
     </Sortable>
 {/if}

front/js/svelte/records/elements/Reference.svelte

@@ -1,11 +1,11 @@
 <script>
     import {getContext} from "svelte";
     import {insertEdges} from "./reference";
-    import PreviewCard from "../PreviewCard.svelte";
     import {getErrorMessage} from "./errorMessage";
     import {sortByField} from "../../edges/sortEdges";
     import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte";
     import Sortable from "../../libs/Sortable.svelte";
+    import PreviewReference from "../previews/PreviewReference.svelte";
 
     const channel = getContext("channel");
     export let record;
@@ -61,8 +61,8 @@
 {#if references.length > 0}
     <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
         {#each references as reference (reference.id)}
-            <div class="col mb-3">
-                <PreviewCard
+            <div>
+                <PreviewReference
                     classes="h-100"
                     record={reference}
                     hasDelete={true}

front/js/svelte/records/elements/ReferenceInlineButtons.svelte

@@ -60,7 +60,7 @@
     <button
             type="button"
             class:is-first={!recordId}
-            class=" btn btn-lg btn-link text-decoration-none inline-card-button"
+            class="button"
             on:click|preventDefault={(e) => (showOptions = !showOptions)}
     >
         <Icon width={24} height={24} icon="circle-plus"/>
@@ -95,21 +95,19 @@
         </div>
     {/if}
 {:else}
-    <div class="pb-2 text-start">
-        <div class="mb-2">
+    <div style="display:flex;align-items: center;gap: 4px">
             <button
-                    class="btn btn-sm btn-primary"
+                    class="button"
                     on:click={(e) => createInlineReference(e, schemas[0].name)}
             >New
             </button>
             <button
-                    class="btn btn-sm btn-outline-primary"
+                    class="button"
                     on:click={(e) => openBrowseModal(e, schemas[0].name)}
             >
                 <Icon icon="magnifying-glass"/>
             </button
             >
-        </div>
     </div>
 {/if}