feat: apply responsive fixes for tutorials and goals and add E2E test

[happyboy24]

This PR addresses identified layout issues on small-viewport devices
(320px–450px) within the tutorial reading flow and the savings goals grid.
Long text strings in the SavingsGoalCard were previously causing layout
breakage, and containers in both TutorialChapterPage and SavingsGoalsPage
lacked explicit overflow handling, leading to potential horizontal scroll on
mobile devices.

Changes

• components/Dashboard/SavingsGoalCard.tsx: Added truncate and w-full
  utilities to the card title and description to gracefully handle long text
  without disrupting the grid layout.
• app/dashboard/goals/page.tsx: Applied overflow-x-hidden to the main content
  container to prevent horizontal scrolling.
• app/tutorial/[tutorialId]/chapter/[chapterId]/page.tsx: Applied
  overflow-x-hidden to the tutorial page wrapper to ensure consistent
  responsive behavior.
• tests/e2e/responsive-tutorial.spec.ts: Added a new Playwright test suite to
  verify the tutorial reading flow at 320px, 375px, and 768px viewports,
  ensuring no horizontal overflow.

Verification

• Manually inspected the layout structure against defined Tailwind
  breakpoints in tailwind.config.js.
• Automated regression testing added via
  tests/e2e/responsive-tutorial.spec.ts.
• Changes follow existing responsive conventions (using touch-target
  utilities and Tailwind responsive modifiers).

Related Issues

• Audit of responsive breakpoints (UX-010)

closes #483