Filament•2mo ago

Responsive Design Breakpoint Issue in Custom Component

I'm struggling with a responsive design issue for a custom component. The breakpoint prefix for responsiveness doesn't seem to work properly. Also, while the h-96 class works fine, switching to h-80 doesn't have any effect. Below is the component code:

@props(['request'])

<div class="p-4 grow">
    <h2 class="font-medium text-gray-700 dark:text-gray-200">Item List</h2>
    <div class="space-y-4 md:max-h-96 md:overflow-y-auto pt-2">    // this line "md:"
        @foreach ($request->items as $item)
            <x-conversation.request-modal.item-detail :item="$item" />
        @endforeach
    </div>
</div>

@props(['request'])

<div class="p-4 grow">
    <h2 class="font-medium text-gray-700 dark:text-gray-200">Item List</h2>
    <div class="space-y-4 md:max-h-96 md:overflow-y-auto pt-2">    // this line "md:"
        @foreach ($request->items as $item)
            <x-conversation.request-modal.item-detail :item="$item" />
        @endforeach
    </div>
</div>