fix: bulk actions — modal touch targets, deleteFromPanel reset, remove dupe spacer

- Modal close button: 28px → 44px touch target
- deleteFromPanel checkbox: 20px → 24px + 44px label row
- Confirm/cancel buttons: add min-h-[44px]
- Reset deleteFromPanel to true when modal reopens
- Remove duplicate bottom spacer (h-20)
This commit is contained in:
Fringg
2026-04-24 16:16:31 +03:00
parent b01ffe3309
commit 161f630fd8

View File

@@ -779,6 +779,13 @@ function ActionModal({
} }
}, [promoGroups, promoGroupId]); }, [promoGroups, promoGroupId]);
// Reset deleteFromPanel to default when modal opens
useEffect(() => {
if (modal.open && modal.action === 'delete_user') {
setDeleteFromPanel(true);
}
}, [modal.open, modal.action]);
// Escape key handler — only when not loading // Escape key handler — only when not loading
useEffect(() => { useEffect(() => {
if (!modal.open) return; if (!modal.open) return;
@@ -997,11 +1004,11 @@ function ActionModal({
{t('admin.bulkActions.deleteUser.hint')} {t('admin.bulkActions.deleteUser.hint')}
</p> </p>
</div> </div>
<label className="inline-flex cursor-pointer items-center gap-2"> <label className="inline-flex min-h-[44px] cursor-pointer items-center gap-2">
<button <button
onClick={() => setDeleteFromPanel((prev) => !prev)} onClick={() => setDeleteFromPanel((prev) => !prev)}
className={cn( className={cn(
'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150', 'flex h-6 w-6 items-center justify-center rounded-md border-2 transition-all duration-150',
deleteFromPanel deleteFromPanel
? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]' ? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'
: 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60', : 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60',
@@ -1052,7 +1059,7 @@ function ActionModal({
{!modal.loading && ( {!modal.loading && (
<button <button
onClick={onClose} onClick={onClose}
className="rounded-lg p-1 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200" className="min-h-[44px] min-w-[44px] rounded-lg p-2.5 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
aria-label={t('common.close')} aria-label={t('common.close')}
> >
<XCloseIcon /> <XCloseIcon />
@@ -1145,14 +1152,14 @@ function ActionModal({
<button <button
onClick={onClose} onClick={onClose}
disabled={modal.loading} disabled={modal.loading}
className="flex-1 rounded-xl border border-dark-700 bg-dark-800 px-4 py-2.5 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700 disabled:opacity-50" className="min-h-[44px] flex-1 rounded-xl border border-dark-700 bg-dark-800 px-4 py-2.5 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700 disabled:opacity-50"
> >
{t('admin.bulkActions.cancel')} {t('admin.bulkActions.cancel')}
</button> </button>
<button <button
onClick={handleSubmit} onClick={handleSubmit}
disabled={modal.loading} disabled={modal.loading}
className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600 disabled:opacity-50" className="flex min-h-[44px] flex-1 items-center justify-center gap-2 rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
> >
{t('admin.bulkActions.confirm')} {t('admin.bulkActions.confirm')}
</button> </button>
@@ -2414,11 +2421,6 @@ export default function AdminBulkActions() {
onClose={handleCloseModal} onClose={handleCloseModal}
onExecute={handleExecuteAction} onExecute={handleExecuteAction}
/> />
{/* Bottom spacer when action bar is visible */}
{(selectedUserIds.length > 0 || selectedSubscriptionIds.length > 0) && (
<div className="h-20" />
)}
</div> </div>
); );
} }