How to Make HoloViz Panel Toast Notifications Wider and Readable: Use .notyf__message, .notyf__toast, .notyf__ripple

Fix HoloViz Panel notifications that cut text: wrap messages and widen toasts via the right CSS selectors (.notyf__message, .notyf__toast). Details inside.

When building apps with Holoviz Panel, toast-style notifications are convenient for quick feedback, but long messages quickly become unreadable. The default toast width is tight and text often refuses to wrap, so even a short sentence gets clipped. There is no obvious parameter in the Notifications reference to adjust width, and generic component sizing like width=600 does not apply because notifications live under pn.state rather than as regular layout items.

Reproducing the issue

The problem typically shows up when trying to widen or wrap the notification via the wrong CSS selector. The following minimal example enables notifications and attempts to override styles, but targets a non-existent class, so nothing changes.

import panel as pl
pl.extension(
    notifications=True,
    raw_css=[
        """
/* increase notifications width and force wrapping */
.bk-notification {
  max-width: 720px !important;   /* desired width */
  width: 720px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
"""
    ]
)
pl.state.notifications.success("...or not...")

What is actually happening

Panel’s notification toasts aren’t regular layout components, so width and height helpers from the sizing guide don’t apply. Styling them requires targeting the correct CSS classes used by the toast elements. Using .bk-notification won’t work because the elements that render the toast and its message are exposed under .notyf__toast and .notyf__message. Another nuance is that the built-in animation and background effects can clash with a wider layout. Overriding width alone can result in awkward arcs and partially transparent areas. In practice, setting styles with !important is necessary so that overrides beat the default theme.

Fixing wrapping first

The most direct path is to let the text wrap on the message node itself. Apply the CSS after enabling the extension so the classes exist, and use the message selector. This keeps the width as-is but prevents truncation.

import panel as pl
pl.extension(notifications=True)
pl.config.raw_css.append("""
/* Toast text */
.notyf__message {
  white-space: normal !important;       /* allows line break */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}
""")
pl.state.notifications.success("A longer message will now wrap across multiple lines without getting cut off.")

Making notifications wider

If you also need a wider toast, target the container element. Increasing its width alone can look odd because of the animated background effect. One pragmatic workaround is to set a solid background while widening the toast.

import panel as pl
pl.extension(notifications=True)
pl.config.raw_css.append("""
.notyf__toast {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
  min-width: 800px !important;
  background-color: #bbb !important; /* gray */
}
""")
pl.state.notifications.success("This wider toast shows a long message without truncation and stays readable.")

This makes long messages readable at larger widths. If you want per-type colors, you can extend the same idea for different notification variants, but even a single neutral background already solves the contrast issue.

Keeping the animation while widening

The arc effect comes from the ripple layer. If you want to keep the animation and still expand the toast, tune the ripple node instead of forcing a solid background on the toast. Enlarging the ripple and changing its shape removes the awkward half-white/half-colored look on wide toasts.

import panel as pl
pl.extension(notifications=True)
pl.config.raw_css.append("""
.notyf__message {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}
.notyf__toast {
  min-width: 800px !important;
}
.notyf__ripple {
  width: 150% !important;
  height: 200% !important;
  border-radius: 0% !important;
}
""")
pl.state.notifications.success("Wide toast, readable text, and animation intact.")

This approach preserves the animated feel while ensuring the final state is visually consistent on wider notifications.

Why this matters

Notifications are often the only feedback users get during background operations, validation steps, or quick success/failure signals. If they truncate or become unreadable, the UX suffers and your diagnostics get lost. Knowing which selectors to override and where to place CSS in a Panel app avoids brittle hacks and prevents surprises when themes or layouts change.

Takeaways

There is no dedicated width parameter for Panel notifications, and regular component sizing does not apply because toasts are not standard layout elements. To control width and wrapping, style the correct nodes: use .notyf__message for text wrapping and .notyf__toast for container sizing. If widening introduces odd visuals, either add a solid background to the toast or adjust the .notyf__ripple to scale the animation. In all cases, adding !important ensures your rules override the defaults.

For production apps, start by enabling wrapping on the message, then widen the toast only if needed. If you prefer the animated look, tune the ripple instead of forcing a background. This keeps your notifications clear, consistent, and readable, no matter how long the message.