arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 18:00:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Drawer): improve max-width on mobile

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-27 12:21:29 +02:00
parent 5f77aac368
commit fac52fa933
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/drawer.ts
View File

@@ -39,7 +39,7 @@ export default {
}, { }, {
direction: ['right', 'left'], direction: ['right', 'left'],
class: { class: {
content: 'inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden', content: 'inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden',
handle: 'h-12 w-1.5 mt-auto mb-auto' handle: 'h-12 w-1.5 mt-auto mb-auto'
} }
}] }]

4
test/components/__snapshots__/Drawer.spec.ts.snap
View File

@@ -159,7 +159,7 @@ exports[`Drawer > renders with left direction correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div> <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden"> <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden">
<div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mr-4 h-12 w-1.5 mt-auto mb-auto"></div> <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto"> <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class=""> <div class="">
@@ -181,7 +181,7 @@ exports[`Drawer > renders with right direction correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div> <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden"> <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden">
<div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 ml-4 h-12 w-1.5 mt-auto mb-auto"></div> <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto"> <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class=""> <div class="">