bug custom ui command palette nuxt ui
Problem Description:
- Overflow Issue: The command palette is overflowing the Tiptap editor, even though i applied overflow-y-auto to the element. When i try to scroll, it doesn't behave as expected within the tooltip.
- UI CSS Setup: The CSS classes that i shared are aimed at styling the command palette and managing overflow, but the issue persists.
2 Replies
const ui = {
wrapper: 'rounded-md border border-muted flex flex-col flex-1 min-h-0 bg-gray-100 dark:bg-gray-900',
container: 'relative flex-1 max-h-[200px] overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
input: {
wrapper: 'relative flex items-center',
base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none',
padding: 'px-4',
height: 'h-12',
size: 'sm:text-sm',
icon: {
base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
loading: 'animate-spin',
size: 'h-5 w-5',
padding: 'ps-11',
},
closeButton: {
base: 'absolute end-4',
padding: 'pe-10',
},
},
group: {
wrapper: 'p-2',
label: 'px-2.5 my-2 text-xs font-semibold text-gray-900 dark:text-white',
container: 'text-sm text-gray-700 dark:text-gray-200 max-h-[100px] overflow-y-auto',
command: {
base: 'flex justify-between select-none items-center rounded-md px-2.5 py-1.5 gap-2 relative',
active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
inactive: '',
label: 'flex items-center gap-1.5 min-w-0',
prefix: 'text-gray-400 dark:text-gray-500',
suffix: 'text-gray-400 dark:text-gray-500',
container: 'flex items-center gap-1.5 min-w-0',
disabled: 'opacity-50',
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
},
active: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
inactive: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
},
}
const ui = {
wrapper: 'rounded-md border border-muted flex flex-col flex-1 min-h-0 bg-gray-100 dark:bg-gray-900',
container: 'relative flex-1 max-h-[200px] overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
input: {
wrapper: 'relative flex items-center',
base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none',
padding: 'px-4',
height: 'h-12',
size: 'sm:text-sm',
icon: {
base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
loading: 'animate-spin',
size: 'h-5 w-5',
padding: 'ps-11',
},
closeButton: {
base: 'absolute end-4',
padding: 'pe-10',
},
},
group: {
wrapper: 'p-2',
label: 'px-2.5 my-2 text-xs font-semibold text-gray-900 dark:text-white',
container: 'text-sm text-gray-700 dark:text-gray-200 max-h-[100px] overflow-y-auto',
command: {
base: 'flex justify-between select-none items-center rounded-md px-2.5 py-1.5 gap-2 relative',
active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
inactive: '',
label: 'flex items-center gap-1.5 min-w-0',
prefix: 'text-gray-400 dark:text-gray-500',
suffix: 'text-gray-400 dark:text-gray-500',
container: 'flex items-center gap-1.5 min-w-0',
disabled: 'opacity-50',
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
},
active: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
inactive: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
},
}
petit video du bug