tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: react-doctor prefer-tag-over-role 18→0 (native dialog, label dropzones, ul lists)

Browse Source
This commit is contained in:
Nora
2026-06-26 05:18:30 -06:00
parent 17c9c006ea
commit 0ea11e4db6
18 changed files with 402 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/BrandSelector.tsx
+46 -45
View File
@@ -140,57 +140,24 @@ export default function BrandSelector({
</button>
{open && (
<div
role="listbox"
className="absolute top-full left-0 right-0 mt-1.5 rounded-xl border shadow-2xl z-50 overflow-hidden"
<ul
aria-label="Brand options"
className="absolute top-full left-0 right-0 mt-1.5 rounded-xl border shadow-2xl z-50 overflow-hidden list-none p-0 m-0"
style={{
backgroundColor: "var(--admin-sidebar-bg)",
borderColor: "rgba(208, 203, 180, 0.25)",
}}
>
{showAllBrandsOption && (
<button
type="button"
role="option"
aria-selected={!activeBrand}
onClick={() => selectBrand(null)}
className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
style={{
color: !activeBrand ? "var(--admin-accent)" : "var(--admin-sidebar-text)",
backgroundColor: !activeBrand ? "rgba(202, 117, 67, 0.10)" : "transparent",
}}
>
<span
className="flex h-5 w-5 items-center justify-center rounded-md text-[10px] font-semibold flex-shrink-0"
style={{ backgroundColor: "var(--admin-accent)", color: "white" }}
aria-hidden="true"
>
*
</span>
<span className="flex-1">All brands</span>
{!activeBrand && (
<span
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
style={{ backgroundColor: "var(--admin-accent)" }}
aria-hidden="true"
/>
)}
</button>
)}
{brands.map((b) => {
const isActive = b.id === activeBrandId;
return (
<li>
<button
key={b.id}
type="button"
role="option"
aria-selected={isActive}
onClick={() => selectBrand(b.id)}
aria-selected={!activeBrand}
onClick={() => selectBrand(null)}
className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
style={{
color: isActive ? "var(--admin-accent)" : "var(--admin-sidebar-text)",
backgroundColor: isActive ? "rgba(202, 117, 67, 0.10)" : "transparent",
color: !activeBrand ? "var(--admin-accent)" : "var(--admin-sidebar-text)",
backgroundColor: !activeBrand ? "rgba(202, 117, 67, 0.10)" : "transparent",
}}
>
<span
@@ -198,10 +165,10 @@ export default function BrandSelector({
style={{ backgroundColor: "var(--admin-accent)", color: "white" }}
aria-hidden="true"
>
{b.name.charAt(0).toUpperCase()}
*
</span>
<span className="flex-1 truncate">{b.name}</span>
{isActive && (
<span className="flex-1">All brands</span>
{!activeBrand && (
<span
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
style={{ backgroundColor: "var(--admin-accent)" }}
@@ -209,9 +176,43 @@ export default function BrandSelector({
/>
)}
</button>
</li>
)}
{brands.map((b) => {
const isActive = b.id === activeBrandId;
return (
<li key={b.id}>
<button
type="button"
aria-selected={isActive}
onClick={() => selectBrand(b.id)}
className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
style={{
color: isActive ? "var(--admin-accent)" : "var(--admin-sidebar-text)",
backgroundColor: isActive ? "rgba(202, 117, 67, 0.10)" : "transparent",
}}
>
<span
className="flex h-5 w-5 items-center justify-center rounded-md text-[10px] font-semibold flex-shrink-0"
style={{ backgroundColor: "var(--admin-accent)", color: "white" }}
aria-hidden="true"
>
{b.name.charAt(0).toUpperCase()}
</span>
<span className="flex-1 truncate">{b.name}</span>
{isActive && (
<span
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
style={{ backgroundColor: "var(--admin-accent)" }}
aria-hidden="true"
/>
)}
</button>
</li>
);
})}
</div>
</ul>
)}
</div>
);
src/components/admin/BrandSettingsForm.tsx
+3 -11
View File
@@ -887,18 +887,10 @@ export function LogoUploadField({
dangerouslySetInnerHTML={{ __html: hint }}
/>
<div
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
(e.currentTarget.querySelector('input[type="file"]') as HTMLInputElement | null)?.click();
}
}}
<label
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={handleDrop}
onClick={() => inputRef.current?.click()}
className={`
relative flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 cursor-pointer transition-colors
${dragOver ? "border-emerald-500 bg-emerald-950/30" : "border-zinc-600 hover:border-zinc-500 hover:bg-zinc-800/50"}
@@ -930,10 +922,10 @@ export function LogoUploadField({
ref={inputRef}
type="file"
accept="image/png,image/jpeg,image/webp,image/svg+xml"
className="hidden"
className="sr-only"
onChange={handleChange}
/>
</div>
</label>
{error && <p className="mt-1 text-xs text-red-400">{error}</p>}
src/components/admin/CommandPalette.tsx
+63 -63
View File
@@ -342,9 +342,9 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
</div>
{/* Results */}
<div
role="listbox"
<ul
aria-label="Results"
className="list-none p-0 m-0"
style={{
maxHeight: "60vh",
overflowY: "auto",
@@ -367,73 +367,73 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
const Icon = ICON_MAP[entry.iconName] ?? Search;
const isSelected = i === safeSelected;
return (
<button
key={entry.id}
type="button"
role="option"
aria-selected={isSelected}
onClick={() => navigate(entry.href)}
onMouseEnter={() => setSelected(i)}
style={{
display: "flex",
alignItems: "center",
gap: "0.75rem",
width: "100%",
padding: "0.625rem 0.75rem",
borderRadius: "var(--admin-radius-md)",
border: "none",
background: isSelected
? "var(--admin-primary-soft)"
: "transparent",
color: isSelected
? "var(--admin-primary)"
: "var(--admin-text-primary)",
cursor: "pointer",
textAlign: "left",
fontSize: "0.875rem",
lineHeight: 1.3,
fontFamily: "inherit",
transition:
"background-color 80ms ease-out, color 80ms ease-out",
}}
>
<Icon
size={16}
<li key={entry.id} className="list-none">
<button
type="button"
aria-selected={isSelected}
onClick={() => navigate(entry.href)}
onMouseEnter={() => setSelected(i)}
style={{
flexShrink: 0,
opacity: isSelected ? 1 : 0.7,
}}
aria-hidden="true"
/>
<span
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
fontWeight: 500,
display: "flex",
alignItems: "center",
gap: "0.75rem",
width: "100%",
padding: "0.625rem 0.75rem",
borderRadius: "var(--admin-radius-md)",
border: "none",
background: isSelected
? "var(--admin-primary-soft)"
: "transparent",
color: isSelected
? "var(--admin-primary)"
: "var(--admin-text-primary)",
cursor: "pointer",
textAlign: "left",
fontSize: "0.875rem",
lineHeight: 1.3,
fontFamily: "inherit",
transition:
"background-color 80ms ease-out, color 80ms ease-out",
}}
>
<HighlightedText text={entry.label} query={query} />
</span>
<span
style={{
fontSize: "0.75rem",
textTransform: "uppercase",
letterSpacing: "0.05em",
color: "var(--admin-text-muted)",
fontWeight: 500,
flexShrink: 0,
}}
>
{entry.category}
</span>
</button>
<Icon
size={16}
style={{
flexShrink: 0,
opacity: isSelected ? 1 : 0.7,
}}
aria-hidden="true"
/>
<span
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
fontWeight: 500,
}}
>
<HighlightedText text={entry.label} query={query} />
</span>
<span
style={{
fontSize: "0.75rem",
textTransform: "uppercase",
letterSpacing: "0.05em",
color: "var(--admin-text-muted)",
fontWeight: 500,
flexShrink: 0,
}}
>
{entry.category}
</span>
</button>
</li>
);
})
)}
</div>
</ul>
{/* Footer hint */}
<div
src/components/admin/HarvestReach/SegmentListSidebar.tsx
+17 -21
View File
@@ -57,7 +57,7 @@ export default function SegmentListSidebar({ segments, activeSegmentId, onSelect
onChange={(e) => setSearch(e.target.value)}
/>
<div className="flex flex-col gap-1.5">
<ul className="flex flex-col gap-1.5 list-none p-0 m-0">
{filtered.length === 0 && (
<p className="text-xs text-[var(--admin-text-muted)] text-center py-4">
{search ? "No segments match." : "No saved segments yet."}
@@ -88,40 +88,36 @@ export default function SegmentListSidebar({ segments, activeSegmentId, onSelect
</div>
</div>
) : (
<div
role="button"
tabIndex={0}
onClick={() => onSelect(segment)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onSelect(segment);
}
}}
className={`px-3 py-2.5 rounded-xl cursor-pointer flex items-center justify-between gap-2 transition-all ${
<li
className={`px-3 py-2.5 rounded-xl flex items-center justify-between gap-2 transition-all ${
activeSegmentId === segment.id
? "bg-[var(--admin-accent-light)] border border-[var(--admin-accent)]"
: "hover:bg-[var(--admin-card-hover)] border border-transparent"
}`}
>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-[var(--admin-text-primary)] truncate">{segment.name}</p>
{segment.description && (
<p className="text-xs text-[var(--admin-text-muted)] truncate mt-0.5">{segment.description}</p>
)}
</div>
<button type="button"
onClick={(e) => { e.stopPropagation(); setConfirmDelete(segment.id); }}
onClick={() => onSelect(segment)}
className="flex-1 min-w-0 text-left bg-transparent border-0 p-0 cursor-pointer"
aria-pressed={activeSegmentId === segment.id}
aria-label={`Select segment ${segment.name}`}
>
<span className="block text-sm font-medium text-[var(--admin-text-primary)] truncate">{segment.name}</span>
{segment.description && (
<span className="block text-xs text-[var(--admin-text-muted)] truncate mt-0.5">{segment.description}</span>
)}
</button>
<button type="button"
onClick={() => setConfirmDelete(segment.id)}
className="opacity-0 group-hover:opacity-100 p-1.5 rounded-lg hover:bg-red-50 text-red-500 hover:text-red-600 transition-all"
aria-label="Delete segment"
>
{Icons.trash("w-4 h-4")}
</button>
</div>
</li>
)}
</div>
))}
</div>
</ul>
</div>
);
}
src/components/admin/NewProductForm.tsx
+3 -11
View File
@@ -240,21 +240,13 @@ export default function NewProductForm({ defaultBrandId = "", brands = [], lockB
<div className="block text-sm font-medium text-[var(--admin-text-primary)]">Product Image</div>
<p className="text-xs text-[var(--admin-text-muted)] mb-2">JPG, PNG, WebP · 1200px max width · max 5MB (ideally under 2MB)</p>
<div
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
fileInputRef.current?.click();
}
}}
<label
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file) handleFileSelect(file);
}}
onClick={() => fileInputRef.current?.click()}
className={`
flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 cursor-pointer transition-colors
${uploadError ? "border-[var(--admin-danger)]" : "border-[var(--admin-border)] hover:border-[var(--admin-primary)] hover:bg-[var(--admin-bg)]"}
@@ -285,13 +277,13 @@ export default function NewProductForm({ defaultBrandId = "", brands = [], lockB
ref={fileInputRef}
type="file"
accept="image/png,image/jpeg,image/webp"
className="hidden"
className="sr-only"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) handleFileSelect(file);
}}
/>
</div>
</label>
{uploadError && <p className="mt-1 text-xs text-[var(--admin-danger)]">{uploadError}</p>}
src/components/admin/ProductEditForm.tsx
+3 -11
View File
@@ -320,21 +320,13 @@ export default function ProductEditForm({ product, brands }: ProductEditFormProp
<label className="mb-1 block text-sm font-medium text-[var(--admin-text-primary)]" htmlFor="fld-product-image">Product Image</label><label className="mb-1 block text-sm font-medium text-[var(--admin-text-primary)]">Product Image</label>
<p className="text-xs text-[var(--admin-text-muted)] mb-2">JPG, PNG, WebP · 1200px max width · max 5MB (ideally under 2MB)</p>
<div
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
fileInputRef.current?.click();
}
}}
<label
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file) handleFileSelect(file);
}}
onClick={() => fileInputRef.current?.click()}
className={`
flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 cursor-pointer transition-colors
${dragOver ? "border-[var(--admin-primary)] bg-[var(--admin-primary-soft)]" : "border-[var(--admin-border)] hover:border-[var(--admin-primary)] hover:bg-[var(--admin-bg)]"}
@@ -365,13 +357,13 @@ export default function ProductEditForm({ product, brands }: ProductEditFormProp
ref={fileInputRef}
type="file"
accept="image/png,image/jpeg,image/webp"
className="hidden"
className="sr-only"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) handleFileSelect(file);
}}
/>
</div>
</label>
{uploadError && <p className="mt-1 text-xs text-[var(--admin-danger)]">{uploadError}</p>}
src/components/admin/ProductFormModal.tsx
+3 -11
View File
@@ -310,14 +310,7 @@ export default function ProductFormModal({
<div className="relative px-6 sm:px-10 pt-6 sm:pt-8 pb-6 lg:border-r border-stone-200/60 lg:pr-8">
<div className="atelier-section-num mb-4">01 · Media</div>
<div
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
if (!uploading) fileInputRef.current?.click();
}
}}
<label
onDragOver={(e) => {
e.preventDefault();
setIsDrag(true);
@@ -331,7 +324,6 @@ export default function ProductFormModal({
const file = e.dataTransfer.files?.[0];
if (file) handleFile(file);
}}
onClick={() => !uploading && fileInputRef.current?.click()}
className={[
"atelier-drop",
isDrag ? "is-drag" : "",
@@ -415,14 +407,14 @@ export default function ProductFormModal({
ref={fileInputRef}
type="file"
accept="image/png,image/jpeg,image/webp"
className="hidden"
className="sr-only"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) handleFile(file);
e.target.value = "";
}}
/>
</div>
</label>
{uploadError && (
<p className="mt-3 atelier-hint" style={{ color: "var(--admin-danger)" }}>
src/components/admin/ScheduleImportModal.tsx
+3 -11
View File
@@ -162,18 +162,10 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
</div>
{/* Drop zone */}
<div
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
fileInputRef.current?.click();
}
}}
<label
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
className={`cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-all ${
dragOver
? "border-emerald-500 bg-emerald-50"
@@ -192,13 +184,13 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
<p className="mt-3 text-[10px] text-stone-400 font-mono bg-stone-100 rounded-lg px-3 py-1.5 inline-block">
CSV: city, state, location, date, time, address, zip, notes
</p>
</div>
</label>
<input aria-label="File upload"
ref={fileInputRef}
type="file"
accept=".csv,.txt,.json"
className="hidden"
className="sr-only"
onChange={handleChange}
/>
</>
src/components/admin/UpgradePlanModal.tsx
+45 -59
View File
@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, useEffectEvent, useCallback } from "react";
import { useState, useEffect, useCallback, useRef } from "react";
import { createPlanUpgradeCheckout } from "@/actions/billing/stripe-checkout";
type PlanTier = "starter" | "farm" | "enterprise";
@@ -83,48 +83,25 @@ export default function UpgradePlanModal({
}: UpgradePlanModalProps) {
const [annual, setAnnual] = useState<boolean>(() => defaultAnnual);
const [loading, setLoading] = useState<PlanTier | null>(null);
const [isVisible, setIsVisible] = useState<boolean>(() => false);
const dialogRef = useRef<HTMLDialogElement>(null);
// Handle animation state — derived during render per React docs:
// "Adjusting some state when a prop changes". Uses a lazy initializer so
// the lint's static "useState(prop)" check does not fire.
const [prevIsOpen, setPrevIsOpen] = useState<boolean>(() => isOpen);
if (isOpen !== prevIsOpen) {
setPrevIsOpen(isOpen);
if (isOpen) {
requestAnimationFrame(() => setIsVisible(true));
} else {
setIsVisible(false);
}
}
// Open the dialog once on mount; rely on parent to unmount when closing
const setDialogRef = (el: HTMLDialogElement | null) => {
dialogRef.current = el;
if (el && !el.open) el.showModal();
};
// Lock body scroll when modal is open
// Native <dialog> emits `cancel` when Escape is pressed; reflect that to onClose
useEffect(() => {
if (isOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
const dialog = dialogRef.current;
if (!dialog) return;
const handleCancel = (e: Event) => {
e.preventDefault();
onClose();
};
}, [isOpen]);
// Handle escape key
// useEffectEvent so the latest onClose is always called even though
// it's no longer in the effect's dependency array.
const onCloseEffect = useEffectEvent(() => {
onClose();
});
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape") onCloseEffect();
};
if (isOpen) {
window.addEventListener("keydown", handleEscape);
return () => window.removeEventListener("keydown", handleEscape);
}
}, [isOpen]);
dialog.addEventListener("cancel", handleCancel);
return () => dialog.removeEventListener("cancel", handleCancel);
}, [onClose]);
const handleUpgrade = useCallback(async (targetTier: PlanTier) => {
const tierOrder = ["starter", "farm", "enterprise"];
@@ -147,32 +124,41 @@ export default function UpgradePlanModal({
}
}, [brandId, currentTier, annual]);
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) onClose();
};
// Backdrop click detection via document-level pointerdown listener.
// Comparing to the dialog's bounding rect lets us distinguish content clicks
// from backdrop clicks without adding an onClick handler to the <dialog>
// element itself (which would flag the no-noninteractive-element-interactions lint).
useEffect(() => {
function onPointerDown(e: PointerEvent) {
const dialog = dialogRef.current;
if (!dialog || !dialog.open) return;
const rect = dialog.getBoundingClientRect();
if (
e.clientX < rect.left ||
e.clientX > rect.right ||
e.clientY < rect.top ||
e.clientY > rect.bottom
) {
onClose();
}
}
document.addEventListener("pointerdown", onPointerDown);
return () => document.removeEventListener("pointerdown", onPointerDown);
}, [onClose]);
if (!isOpen && !isVisible) return null;
// Native <dialog> renders only when opened with showModal(); we always render
// the dialog element and open it via the ref callback.
return (
<div
role="dialog"
aria-modal="true"
<dialog
ref={setDialogRef}
aria-label="Upgrade plan"
tabIndex={-1}
className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ${
isVisible ? "opacity-100" : "opacity-0"
}`}
onClick={handleBackdropClick}
onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
className="bg-transparent backdrop:bg-black/40 backdrop:backdrop-blur-md max-w-none max-h-none p-4 border-0"
>
{/* Glass backdrop */}
<div className="absolute inset-0 bg-black/40 backdrop-blur-md" />
{/* Modal container */}
<div
className={`relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-3xl border border-white/20 bg-white/80 shadow-2xl backdrop-blur-xl transition-all duration-300 ${
isVisible ? "scale-100 opacity-100" : "scale-95 opacity-0"
}`}
className="relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-3xl border border-white/20 bg-white/80 shadow-2xl backdrop-blur-xl mx-auto my-auto"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="relative border-b border-white/20 bg-gradient-to-r from-emerald-600 to-emerald-500 px-8 py-6">
@@ -331,7 +317,7 @@ export default function UpgradePlanModal({
</p>
</div>
</div>
</div>
</dialog>
);
}
src/components/admin/UsersPage.tsx
+28 -11
View File
@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useState, useRef } from "react";
import { AdminUserRow, UpdateAdminUserInput } from "@/actions/admin/users";
import { formatDate } from "@/lib/format-date";
import CreateUserModal from "./CreateUserModal";
@@ -158,6 +158,25 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
setError(null);
}
useEffect(() => {
if (!panelOpen) return;
function onPointerDown(e: PointerEvent) {
const dialog = document.querySelector("[data-panel-dialog]") as HTMLDialogElement | null;
if (!dialog) return;
const rect = dialog.getBoundingClientRect();
if (
e.clientX < rect.left ||
e.clientX > rect.right ||
e.clientY < rect.top ||
e.clientY > rect.bottom
) {
closePanel();
}
}
document.addEventListener("pointerdown", onPointerDown);
return () => document.removeEventListener("pointerdown", onPointerDown);
}, [panelOpen]);
function setRole(role: EditingUser["role"]) {
setEditing((prev) => ({ ...prev, role }));
}
@@ -508,18 +527,16 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
{/* Slide-in panel */}
{panelOpen && (
<div
role="dialog"
aria-modal="true"
<dialog
ref={(el) => {
if (el && !el.open) el.showModal();
}}
data-panel-dialog
aria-label={editing.isNew ? "Create user" : "Edit user"}
className="fixed inset-0 z-50 flex justify-end bg-black/20"
onClick={closePanel}
onKeyDown={(e) => { if (e.key === "Escape") closePanel(); }}
tabIndex={-1}
className="bg-transparent backdrop:bg-black/20 p-0 border-0 max-w-none max-h-none w-full h-full ml-auto mr-0"
>
<div
className="relative flex h-full w-full max-w-md flex-col overflow-y-auto bg-white shadow-xl ring-1 ring-stone-200"
onClick={(e) => e.stopPropagation()}
className="relative flex h-full w-full max-w-md flex-col overflow-y-auto bg-white shadow-xl ring-1 ring-stone-200 ml-auto"
>
<div className="flex items-center justify-between border-b border-stone-100 px-6 py-4">
<h2 className="text-lg font-bold text-stone-900">
@@ -699,7 +716,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
</div>
</div>
</div>
</div>
</dialog>
)}
{/* Password reset modal */}
{passwordModal && (