lucent-laravel/front/js/svelte/content/elements/Reference.svelte

<script>
    import PreviewCardSmall from "../../records/PreviewCardSmall.svelte";

    export let queryRecord;
    export let field;
    $: recordEdges = queryRecord?._children[field.name];

</script>

<div class="references">
    {#each recordEdges as recordEdge}
        <span class="mr-3">
            <PreviewCardSmall record={recordEdge}/>
        </span>
    {/each}
</div>

<style>
    div.references {
        /* max-width: 148px; */
        max-height: 48px;
        /* text-overflow: ellipsis; */
        overflow-x: hidden;
        overflow-y: hidden;
    }
</style>