Skip to content

Misleading documentation or bug - custom toast width #630

Open
@tecoad

Description

@tecoad

I noticed this Headless / TailwindCSS example from the docs, uses this class for the parent div:

<div className="flex rounded-lg bg-white shadow-lg ring-1 ring-black/5 w-full md:max-w-[364px] items-center p-4">

However, it seems counter intuitive, because the parent div doesnt sets itself as 100% in this case:

sonner/src/styles.css

Lines 85 to 97 in 7967502

[data-sonner-toast] {
--y: translateY(100%);
--lift-amount: calc(var(--lift) * var(--gap));
z-index: var(--z-index);
position: absolute;
opacity: 0;
transform: var(--y);
touch-action: none;
transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
box-sizing: border-box;
outline: none;
overflow-wrap: anywhere;
}

So in order of full-width to work in the custom component we have to:

<Toaster
position="bottom-center"
toastOptions={{
	className: 'w-full',
}}
/>

Is this undocumented? Any specific behind it @emilkowalski ? Shouldn't width 100% be added to data-sonner-toast?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions