esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: let toast width auto-size

Browse source
This commit is contained in:
esdrasrenan 2025-10-05 00:06:20 -03:00
parent cc7fa83622
commit cad42f8b8c
1 changed files with 19 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

45
web/src/components/ui/sonner.tsx
View file

@ -6,17 +6,24 @@ import { Toaster as Sonner, ToasterProps } from "sonner"
const Toaster = ({ ...props }: ToasterProps) => { const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme() const { theme = "system" } = useTheme()
const baseClass =
"inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg"
const baseStyle = {
background: "#000",
color: "#fff",
border: "1px solid #000",
width: "fit-content" as const,
minWidth: 0,
maxWidth: "min(24rem, calc(100vw - 2rem))",
}
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]} theme={theme as ToasterProps["theme"]}
className="toaster group" className="toaster group"
toastOptions={{ toastOptions={{
className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg", className: baseClass,
style: { style: baseStyle,
background: "#000",
color: "#fff",
border: "1px solid #000",
},
classNames: { classNames: {
icon: "size-[14px] text-white [&>svg]:size-[14px] [&>svg]:text-white", icon: "size-[14px] text-white [&>svg]:size-[14px] [&>svg]:text-white",
}, },
@ -27,32 +34,18 @@ const Toaster = ({ ...props }: ToasterProps) => {
primary: "#ffffff", primary: "#ffffff",
secondary: "#000000", secondary: "#000000",
}, },
success: { success: { className: baseClass, style: baseStyle },
className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg", error: { className: baseClass, style: baseStyle },
style: { background: "#000", color: "#fff", border: "1px solid #000" }, info: { className: baseClass, style: baseStyle },
}, warning: { className: baseClass, style: baseStyle },
error: { loading: { className: baseClass, style: baseStyle },
className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
style: { background: "#000", color: "#fff", border: "1px solid #000" },
},
info: {
className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
style: { background: "#000", color: "#fff", border: "1px solid #000" },
},
warning: {
className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
style: { background: "#000", color: "#fff", border: "1px solid #000" },
},
loading: {
className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
style: { background: "#000", color: "#fff", border: "1px solid #000" },
},
}} }}
style={ style={
{ {
"--normal-bg": "var(--popover)", "--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)", "--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)", "--normal-border": "var(--border)",
"--width": "fit-content",
} as React.CSSProperties } as React.CSSProperties
} }
{...props} {...props}