From 2e9bf58e79916b00cf67d7ef066d3e3250d43676 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 12:39:33 +0000
Subject: [PATCH] fix: replace mobile bottom-sheet usage with modals

AdaptiveDialog now always renders a Radix Dialog (modal) regardless of
screen size, removing the vaul Drawer/bottom-sheet path entirely.
snapPoints prop is kept in the interface for backwards compatibility
but has no effect.

https://claude.ai/code/session_013W4Gzgv5HdUtV71io2xdBi
---
 src/components/ui/adaptive-dialog.tsx | 84 +--------------------------
 1 file changed, 1 insertion(+), 83 deletions(-)

diff --git a/src/components/ui/adaptive-dialog.tsx b/src/components/ui/adaptive-dialog.tsx
index 9d5b644..9e0c084 100644
--- a/src/components/ui/adaptive-dialog.tsx
+++ b/src/components/ui/adaptive-dialog.tsx
@@ -7,33 +7,12 @@ import {
 	DialogDescription,
 	DialogFooter,
 } from "@/components/ui/dialog"
-import {
-	Drawer,
-	DrawerContent,
-	DrawerHeader,
-	DrawerTitle,
-	DrawerDescription,
-	DrawerFooter,
-} from "@/components/ui/drawer"
-
-function useIsMobile() {
-	const [isMobile, setIsMobile] = React.useState(
-		() => typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches
-	)
-	React.useEffect(() => {
-		const mq = window.matchMedia("(max-width: 767px)")
-		const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
-		mq.addEventListener("change", handler)
-		return () => mq.removeEventListener("change", handler)
-	}, [])
-	return isMobile
-}
 
 interface AdaptiveDialogProps {
 	open: boolean
 	onOpenChange: (open: boolean) => void
 	children: React.ReactNode
-	/** vaul snap points, mobile only */
+	/** unused — kept for API compatibility */
 	snapPoints?: (number | string)[]
 }
 
@@ -41,32 +20,7 @@ export const AdaptiveDialog = ({
 	open,
 	onOpenChange,
 	children,
-	snapPoints,
 }: AdaptiveDialogProps) => {
-	const isMobile = useIsMobile()
-	const [activeSnapPoint, setActiveSnapPoint] = React.useState<number | string | null>(
-		snapPoints?.[0] ?? null
-	)
-
-	React.useEffect(() => {
-		if (open) {
-			setActiveSnapPoint(snapPoints?.[0] ?? null)
-		}
-	}, [open]) // snapPoints are static per dialog instance
-
-	if (isMobile) {
-		return (
-			<Drawer
-				open={open}
-				onOpenChange={onOpenChange}
-				snapPoints={snapPoints}
-				activeSnapPoint={activeSnapPoint}
-				setActiveSnapPoint={setActiveSnapPoint}
-			>
-				{children}
-			</Drawer>
-		)
-	}
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
 			{children}
@@ -83,14 +37,6 @@ export const AdaptiveDialogContent = ({
 	children,
 	className,
 }: AdaptiveDialogContentProps) => {
-	const isMobile = useIsMobile()
-	if (isMobile) {
-		return (
-			<DrawerContent className={className}>
-				{children}
-			</DrawerContent>
-		)
-	}
 	return (
 		<DialogContent className={className}>
 			{children}
@@ -105,10 +51,6 @@ export const AdaptiveDialogHeader = ({
 	children: React.ReactNode
 	className?: string
 }) => {
-	const isMobile = useIsMobile()
-	if (isMobile) {
-		return <DrawerHeader className={className}>{children}</DrawerHeader>
-	}
 	return <DialogHeader className={className}>{children}</DialogHeader>
 }
 
@@ -116,14 +58,6 @@ export const AdaptiveDialogTitle = React.forwardRef<
 	HTMLHeadingElement,
 	React.HTMLAttributes<HTMLHeadingElement>
 >(({ children, className, ...props }, ref) => {
-	const isMobile = useIsMobile()
-	if (isMobile) {
-		return (
-			<DrawerTitle ref={ref} className={className} {...props}>
-				{children}
-			</DrawerTitle>
-		)
-	}
 	return (
 		<DialogTitle ref={ref} className={className} {...props}>
 			{children}
@@ -136,14 +70,6 @@ export const AdaptiveDialogDescription = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ children, className, ...props }, ref) => {
-	const isMobile = useIsMobile()
-	if (isMobile) {
-		return (
-			<DrawerDescription ref={ref} className={className} {...props}>
-				{children}
-			</DrawerDescription>
-		)
-	}
 	return (
 		<DialogDescription ref={ref} className={className} {...props}>
 			{children}
@@ -159,13 +85,5 @@ export const AdaptiveDialogFooter = ({
 	children: React.ReactNode
 	className?: string
 }) => {
-	const isMobile = useIsMobile()
-	if (isMobile) {
-		return (
-			<DrawerFooter className={className}>
-				{children}
-			</DrawerFooter>
-		)
-	}
 	return <DialogFooter className={className}>{children}</DialogFooter>
 }