<style>
    .qrcode .mx-auto{
        text-align: center;
    }
    .qrcode .mx-auto svg{
        margin: auto;
    }
    .qrcode a{
        margin-top: 20px;
    }
</style>
<div class="flex flex-col items-center justify-center w-full qrcode">
    {{-- Ensure the SVG acts as a block element and uses auto margins --}}
    <div class="mx-auto w-max">
        {!! $qrCodeSvg !!}
        <x-filament::button
            :href="'data:image/svg+xml;base64,' . base64_encode($qrCodeSvg)"
            tag="a"
            download="QR_{{ $serial }}.svg"
            color="primary"
        >
            Download QR
        </x-filament::button>
    </div>
</div>
