docs(date-picker): improve examples responsive

This commit is contained in:
Benjamin Canac
2024-02-28 11:13:13 +01:00
parent cdf6ff7152
commit 7dd9ee528e
2 changed files with 9 additions and 3 deletions

View File

@@ -27,8 +27,8 @@ function selectRange (duration: Duration) {
</UButton>
<template #panel="{ close }">
<div class="flex items-center divide-x divide-gray-200 dark:divide-gray-800">
<div class="flex flex-col py-4">
<div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
<div class="hidden sm:flex flex-col py-4">
<UButton
v-for="(range, index) in ranges"
:key="index"
@@ -37,6 +37,7 @@ function selectRange (duration: Duration) {
variant="ghost"
class="rounded-none px-6"
:class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
truncate
@click="selectRange(range.duration)"
/>
</div>