fix: widen modal to 90vw/max-4xl, add break-words to prevent horizontal scroll

This commit is contained in:
lorentz 2026-03-23 11:15:52 -04:00
parent 5dfd68affd
commit df50c3868d

View file

@ -179,7 +179,7 @@ export function TicketDetailModal({ ticketNumber, open, onOpenChange }: TicketDe
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
<DialogContent className="max-w-4xl w-[90vw] max-h-[85vh] overflow-y-auto overflow-x-hidden">
<DialogHeader className="pb-0">
<DialogTitle className="flex items-center gap-2 text-base">
<TicketIcon className="h-4 w-4 shrink-0" />
@ -250,7 +250,7 @@ export function TicketDetailModal({ ticketNumber, open, onOpenChange }: TicketDe
{ticket.description && (
<div>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">Description</p>
<div className="p-3 bg-muted rounded-lg whitespace-pre-wrap text-sm">
<div className="p-3 bg-muted rounded-lg whitespace-pre-wrap break-words text-sm">
{ticket.description}
</div>
</div>
@ -260,7 +260,7 @@ export function TicketDetailModal({ ticketNumber, open, onOpenChange }: TicketDe
{ticket.resolution && (
<div>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">Resolution</p>
<div className="p-3 bg-muted rounded-lg whitespace-pre-wrap text-sm">
<div className="p-3 bg-muted rounded-lg whitespace-pre-wrap break-words text-sm">
{ticket.resolution}
</div>
</div>
@ -349,7 +349,7 @@ export function TicketDetailModal({ ticketNumber, open, onOpenChange }: TicketDe
</div>
</div>
{e.summaryNotes && (
<p className="text-xs text-muted-foreground whitespace-pre-wrap">{e.summaryNotes}</p>
<p className="text-xs text-muted-foreground whitespace-pre-wrap break-words">{e.summaryNotes}</p>
)}
</div>
</div>
@ -377,7 +377,7 @@ export function TicketDetailModal({ ticketNumber, open, onOpenChange }: TicketDe
</div>
{n.title && <p className="text-xs font-medium text-muted-foreground mb-0.5">{n.title}</p>}
{n.description && (
<p className="text-xs whitespace-pre-wrap">{n.description}</p>
<p className="text-xs whitespace-pre-wrap break-words">{n.description}</p>
)}
</div>
</div>