move from hovercard to popover for mobile

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.436.0",
@@ -21,13 +21,13 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.1",
+    "@eslint/js": "^9.10.0",
     "@types/bun": "^1.1.8",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
     "eslint-plugin-react-refresh": "^0.4.11",
     "globals": "^15.9.0",

src/components/Home.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { Copy, Link, AlertCircle, HelpCircle, GithubIcon } from 'lucide-react';
 import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card"
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
 import { createEncryptionPair } from '@/lib/utils';
 
 const Home = () => {
@@ -53,16 +53,16 @@ const Home = () => {
   return (
     <>
       <div className='absolute top-6 right-6'>
-        <HoverCard>
-          <HoverCardTrigger>
+        <Popover>
+          <PopoverTrigger>
             <HelpCircle className='text-gray-400 hover:text-white w-8 h-8' />
-          </HoverCardTrigger>
-          <HoverCardContent className='bg-white text-gray-800 p-4 shadow-lg rounded-md mx-6'>
+          </PopoverTrigger>
+          <PopoverContent className='bg-white text-gray-800 p-4 shadow-lg rounded-md mx-6'>
             <p className='text-sm'>
               This site allows you to create one-time links <b className='text-purple-900'>securely</b>. All data is end-to-end encrypted, the key <b className='text-red-800'>never</b> leaves your device. If the link is viewed once, it is <b className='text-orange-900'>permanently deleted</b> from the server.
             </p>
-          </HoverCardContent>
-        </HoverCard>
+          </PopoverContent>
+        </Popover>
       </div>
       <div className="bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md border border-gray-700">
         <h1 className="text-2xl font-bold text-gray-100 mb-4 text-center">Create One-Time Link</h1>