salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): make alert dialog scrollable for long errors

Browse Source
This commit is contained in:
Shantur Rathore
2026-02-18 00:27:26 +00:00
parent c8ff858565
commit 4eaa711f01
1 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/ui/src/components/alert-dialog.tsx
View File

@@ -115,28 +115,36 @@ const AlertDialog: Component = () => {
> >
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay class="modal-overlay" /> <Dialog.Overlay class="modal-overlay" />
<div class="fixed inset-0 z-50 flex items-center justify-center p-4"> <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content class="modal-surface w-full max-w-sm p-6 border border-base shadow-2xl" tabIndex={-1}> <Dialog.Content
<div class="flex items-start gap-3"> class="modal-surface w-full max-w-xl md:max-w-2xl p-6 border border-base shadow-2xl max-h-[85vh] overflow-hidden flex flex-col"
<div tabIndex={-1}
class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold" >
style={{ <div class="flex items-start gap-3 min-h-0">
"background-color": accent.badgeBg, <div
"border-color": accent.badgeBorder, class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
color: accent.badgeText, style={{
}} "background-color": accent.badgeBg,
aria-hidden "border-color": accent.badgeBorder,
> color: accent.badgeText,
{accent.symbol} }}
</div> aria-hidden
<div class="flex-1 min-w-0"> >
<Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title> {accent.symbol}
<Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line break-words"> </div>
{payload.message} <div class="flex-1 min-w-0 min-h-0">
{payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>} <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
</Dialog.Description> <Dialog.Description class="text-sm text-secondary mt-1">
</div> <div
</div> class="max-h-[60vh] overflow-auto pr-2 whitespace-pre-wrap break-words"
style={{ "overflow-wrap": "anywhere" }}
>
{payload.message}
{payload.detail && <div class="mt-3">{payload.detail}</div>}
</div>
</Dialog.Description>
</div>
</div>
<Show when={isPrompt}> <Show when={isPrompt}>
<div class="mt-4"> <div class="mt-4">
@@ -185,14 +193,14 @@ const AlertDialog: Component = () => {
{confirmLabel} {confirmLabel}
</button> </button>
</div> </div>
</Dialog.Content> </Dialog.Content>
</div> </div>
</Dialog.Portal> </Dialog.Portal>
</Dialog> </Dialog>
) )
}} }}
</Show> </Show>
) )
} }
export default AlertDialog export default AlertDialog