607 implement clickable links and design aligned text padding on news page

[bhi049]

📄 Pull Request Overview

Closes #607

Updates the Single News Page to automatically convert plain text URLs into clickable links and adjusts mobile spacing to match the Figma layout.

🔧 Changes Made

1. Linkify Directus body text (Single News Page)

• Added linkify() usage for post.bodyText in NewsElementPage.tsx
• Rendered linkified content via dangerouslySetInnerHTML

2. Open links in a new tab

• Updated shared linkify.ts to include:
  • target="_blank"
  • rel="noopener noreferrer"

3. Mobile layout adjustments (padding + meta stacking)

• Adjusted mobile padding for:
  • title
  • subtitle
  • body text
  • share button
• Updated .metaContainer on mobile to stack items vertically (flex-direction: column) and align left, matching the Figma mobile layout.

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

Provide any additional context or information that reviewers may need to know:

• Screenshots:

• Dependencies: None
• Known Issues: None

[Rutjake]

Great work! The links from Directus are now functional and clickable. The padding adjustments also look good.