Improve modal dialog UX and sizing
- Remove redundant success alert after presentation deletion - Keep only confirmation modal before deletion - Fix modal size classes CSS specificity - Set reasonable min/max widths for modal sizes (small: 320-420px) - Ensure responsive behavior on mobile devices 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
018bfc8d9e
commit
c0c080c6ac
@ -61,11 +61,6 @@ export const PresentationsList: React.FC = () => {
|
|||||||
setDeleting(presentationId);
|
setDeleting(presentationId);
|
||||||
await deletePresentation(presentationId);
|
await deletePresentation(presentationId);
|
||||||
setPresentations(prev => prev.filter(p => p.metadata.id !== presentationId));
|
setPresentations(prev => prev.filter(p => p.metadata.id !== presentationId));
|
||||||
setAlertDialog({
|
|
||||||
isOpen: true,
|
|
||||||
message: 'Presentation deleted successfully',
|
|
||||||
type: 'success'
|
|
||||||
});
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
loggers.presentation.error('Failed to delete presentation', err instanceof Error ? err : new Error(String(err)));
|
loggers.presentation.error('Failed to delete presentation', err instanceof Error ? err : new Error(String(err)));
|
||||||
setAlertDialog({
|
setAlertDialog({
|
||||||
|
@ -39,19 +39,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal Sizes */
|
/* Modal Sizes - Applied to modal-content with size modifier */
|
||||||
.modal-small {
|
.modal-content.modal-small {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
min-width: 320px;
|
||||||
|
max-width: 420px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-medium {
|
.modal-content.modal-medium {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 400px;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-large {
|
.modal-content.modal-large {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 500px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -110,6 +113,14 @@
|
|||||||
max-height: 95vh;
|
max-height: 95vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Override min-widths on mobile for better fit */
|
||||||
|
.modal-content.modal-small,
|
||||||
|
.modal-content.modal-medium,
|
||||||
|
.modal-content.modal-large {
|
||||||
|
min-width: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
padding: 1rem 1rem 0 1rem;
|
padding: 1rem 1rem 0 1rem;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user