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

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

@@ -116,8 +116,11 @@ 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"
tabIndex={-1}
>
<div class="flex items-start gap-3 min-h-0">
<div <div
class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
style={{ style={{
@@ -129,11 +132,16 @@ const AlertDialog: Component = () => {
> >
{accent.symbol} {accent.symbol}
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0 min-h-0">
<Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title> <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
<Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line break-words"> <Dialog.Description class="text-sm text-secondary mt-1">
<div
class="max-h-[60vh] overflow-auto pr-2 whitespace-pre-wrap break-words"
style={{ "overflow-wrap": "anywhere" }}
>
{payload.message} {payload.message}
{payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>} {payload.detail && <div class="mt-3">{payload.detail}</div>}
</div>
</Dialog.Description> </Dialog.Description>
</div> </div>
</div> </div>
@@ -193,6 +201,6 @@ const AlertDialog: Component = () => {
}} }}
</Show> </Show>
) )
} }
export default AlertDialog export default AlertDialog