digital-card/resources/views/modals/show-all-guestbook.blade.php

<dialog id="allguestbook" class="modal">
    <div class="modal-box w-11/12 max-w-5xl">
        <h3 class="text-lg font-bold pb-2">Semua Ucapan</h3>
        <div id="scrollableContent" class="max-h-96 overflow-auto">
            @foreach ($allguestbooks as $allguestbook)
                <p class="font-semibold">{{$allguestbook->name}}</p>
                <p>{{$allguestbook->speech}}</p>
                <hr class="border-t-1 border-gray-300 my-5 w-full self-center">
            @endforeach
        </div>
        <div class="modal-action">
            <form method="dialog">
                <button class="btn">Tutup</button>
            </form>
        </div>
    </div>
</dialog>

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var dialog = document.getElementById('allguestbook');
        if (dialog) {
            dialog.addEventListener('show', function () {
                var scrollableContent = document.getElementById('scrollableContent');
                scrollableContent.scrollTop = scrollableContent.scrollHeight;
            });
        }
    });
</script>
@endpush