fix: unify prompt card actions across screen widths and align breakpoints

[rahulkr182]

What does this change?

Fixes #98
Fixes #45

• Unified Actions Everywhere:
  • Adds Copy Prompt and Like to both the mobile drawer and desktop dropdown menus on src/components/prompts/PromptCard.tsx.
  • Ensures every action (Copy Prompt, Like, Save, Share, Copy Link, Edit Prompt, View Profile, Delete/Report, AI Tool info) is available at every screen width and via the three-dot menu without requiring hover.
• Aligned Breakpoints:
  • Exports MOBILE_BREAKPOINT = 768 from src/hooks/use-mobile.tsx.
  • Switches card chrome breakpoint in src/components/prompts/PromptCard.tsx from lg (1024px) to md (768px), eliminating the mismatch between card controls and modal dialogs (SharePromptDialog, ReportPromptDialog) in the 768px-1024px tablet range.
• Touch Screen Support & iPad Pro Fix (bug: current not possible for copying prompt (IPad Pro) #45):
  • Adds [@media(hover:none)]:!opacity-100 and md:focus-visible:opacity-100 to the card image copy prompt button, ensuring it remains visible and accessible on touch screens (such as iPad Pro at 1024px).
• Findable AI Tool Name on Touch:
  • Makes src/components/prompts/AiToolBadge.tsx interactive on tap/click (type="button") to toggle between the abbreviated label and full tool name without requiring hover/tooltip.
  • Adds aria-label={AI tool: ${tool}}.
  • Displays the full tool name inside both the mobile Drawer and desktop Dropdown menus.
• Automated Tests:
  • Adds src/hooks/use-mobile.test.tsx verifying MOBILE_BREAKPOINT and useIsMobile.
  • Adds src/components/prompts/AiToolBadge.test.tsx verifying label toggling and accessibility.
  • Updates src/components/prompts/PromptCard.test.tsx verifying complete action suites in both menus and touch override styling.

Why?

Previously, PromptCard offered different actions depending on width:

• The mobile drawer lacked Like and Copy Prompt.
• The desktop dropdown lacked Like.
• The copy button was hidden behind hover on desktop (lg:), which meant touch devices at 1024px (iPad Pro) couldn't copy prompts or like posts (bug: current not possible for copying prompt (IPad Pro) #45).
• Card chrome switched at 1024px while dialogs switched at 768px (useIsMobile), creating an inconsistent intermediate state between 768px and 1024px.
• AiToolBadge relied solely on browser title attributes, rendering full tool names inaccessible on touch screens.

How was it tested?

• Added automated tests in src/hooks/use-mobile.test.tsx.
• Added automated tests in src/components/prompts/AiToolBadge.test.tsx.
• Added automated tests in src/components/prompts/PromptCard.test.tsx.
• Ran all CI validation commands locally:
  • npm run lint (0 errors)
  • npm run typecheck (0 errors)
  • npm test (all 17 test files and 89 tests passed)
  • npm run build (production build succeeded)
  • npm run db:schema:check (up to date)

Checklist

• npm run lint passes
• npm run typecheck passes
• npm test passes
• npm run build passes
• Any new root-relative asset (/foo.png) is in public/, not src/assets/
• No credentials, keys, or .env files are included
• I've read the CLA in CONTRIBUTING.md