feat(ui): drive mobile layouts from useIsMobile

src/components/ai-toolbar.tsx

@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/popover";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { extractAllImagesFromClipboard } from "@/lib/clipboard-image";
 import {
 	detectOs,
@@ -114,6 +115,7 @@ export const AIToolbar = ({
 	summaryUpdated,
 	events,
 }: AIToolbarProps) => {
+	const isMobile = useIsMobile();
 	const examplePrompts = [
 		"Lunch with Maya next Thursday at 12:30pm at Toma, remind me 30 minutes before.",
 		"Project sync tomorrow from 9am to 10am on Google Meet with a weekly repeat.",
@@ -281,7 +283,13 @@ export const AIToolbar = ({
 					</div>
 				</div>
 			) : isAuthenticated ? (
-				<div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+				<div
+					className={
+						isMobile
+							? "grid gap-3"
+							: "grid gap-3 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
+					}
+				>
 					<div className="space-y-3">
 						<div className="rounded-[10px] bg-card shadow focus-within:ring-[3px] focus-within:ring-ring/20">
 							<Textarea
@@ -347,42 +355,47 @@ export const AIToolbar = ({
 
 						<div className="flex flex-wrap items-center justify-between gap-2">
 							<div className="flex items-center gap-1.5">
-								<HoverCard
-									openDelay={300}
-									closeDelay={100}
-									open={isPopoverOpen ? false : undefined}
-								>
-									<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-										<HoverCardTrigger asChild>
-											<PopoverTrigger asChild>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="hidden h-8 w-8 text-muted-foreground/70 hover:text-foreground md:inline-flex"
-													aria-label="Keyboard shortcuts"
-												>
-													<Info className="h-3.5 w-3.5" />
-												</Button>
-											</PopoverTrigger>
-										</HoverCardTrigger>
-										<PopoverContent
+								{!isMobile ? (
+									<HoverCard
+										openDelay={300}
+										closeDelay={100}
+										open={isPopoverOpen ? false : undefined}
+									>
+										<Popover
+											open={isPopoverOpen}
+											onOpenChange={setIsPopoverOpen}
+										>
+											<HoverCardTrigger asChild>
+												<PopoverTrigger asChild>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="h-8 w-8 text-muted-foreground/70 hover:text-foreground"
+														aria-label="Keyboard shortcuts"
+													>
+														<Info className="h-3.5 w-3.5" />
+													</Button>
+												</PopoverTrigger>
+											</HoverCardTrigger>
+											<PopoverContent
+												align="start"
+												side="top"
+												sideOffset={6}
+												className="w-52 p-3"
+											>
+												<ShortcutsList os={os} />
+											</PopoverContent>
+										</Popover>
+										<HoverCardContent
 											align="start"
 											side="top"
 											sideOffset={6}
 											className="w-52 p-3"
 										>
 											<ShortcutsList os={os} />
-										</PopoverContent>
-									</Popover>
-									<HoverCardContent
-										align="start"
-										side="top"
-										sideOffset={6}
-										className="w-52 p-3"
-									>
-										<ShortcutsList os={os} />
-									</HoverCardContent>
-								</HoverCard>
+										</HoverCardContent>
+									</HoverCard>
+								) : null}
 
 								{events.length > 0 && (
 									<Button
@@ -453,7 +466,9 @@ export const AIToolbar = ({
 									animate={{ opacity: 1, y: 0 }}
 									exit={{ opacity: 0, y: 4 }}
 									transition={{ duration: 0.15 }}
-									className="mt-3 grid gap-2 sm:grid-cols-2"
+									className={
+										isMobile ? "mt-3 grid gap-2" : "mt-3 grid gap-2 grid-cols-2"
+									}
 								>
 									{imagePreviews.map((preview, index) => (
 										<motion.div