Feat/4545 improve news module

[othman-shamla]

PR Checklist

• - Unit and/or e2e tests for the changes that have been added (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Refactoring (no functional changes)
• Documentation
• Other:

What is the new behavior?

1. Standardized Content Width (Images & Embeds)

• Behavior Change: Both images and embedded content (iframes/YouTube) are now constrained to the text container's width.
• Implementation:
  • Updated styles in NewsPage.tsx for both img and iframe elements to set maxWidth: '100%' and marginLeft: 0.
  • This resolves the specific edge case mentioned in the issue where YouTube embeds could break the layout or look inconsistent.
  • Ensures a clean, single-column layout that translates better to mobile devices and email newsletters.

2. Full-Screen Image Viewer (Lightbox)

• Scope: This applies to both the Header (Hero) Image and all Content Images.
• Interaction:
  • Images now display a zoom-in cursor on hover.
  • Clicking an image opens it in a full-screen gallery view (using PhotoSwipe).
  • Users can navigate through all images in the article (header + content) as a single gallery.

Does this PR introduce a DB Schema Change or Migration?

• Yes
• No

Git Issues

Closes #4545

[cypress]

onearmy-community-platform    Run #8437

Run Properties:   Failed #8437  •  50085c111a: Extract lightbox logic to usePhotoSwipeLightbox hook, and use it in newsPage and...

Project	onearmy-community-platform
Branch Review	pull/4579
Run status	Failed #8437
Run duration	24m 58s
Commit	50085c111a: Extract lightbox logic to usePhotoSwipeLightbox hook, and use it in newsPage and...
Committer	othman-shamla
View all properties for this run ↗︎

---

Test results
Failures	1
Flaky	2
Pending	0
Skipped	0
Passing	93
View all changes introduced in this branch ↗︎

---

Tests for review

  src/integration/research/read.spec.ts • 1 failed test • ci-chrome

View Output Video

Test		Artifacts
... > [Visible to everyone]		Test Replay Screenshots Video

  profile.spec.ts • 1 flaky test • ci-chrome

View Output Video

Test		Artifacts
[Profile] > [By User] > [User directed to own profile]		Test Replay Screenshots Video

  settings.spec.ts • 1 flaky test • ci-chrome

View Output Video

Test		Artifacts
[Settings] > Can create member		Test Replay Screenshots Video

[mariojsnunes]

don't use a firebase link. We migrated away from firebase.

[othman-shamla]

By the way, I got that link from other test data. I used it as a temporary solution for the logo because I couldn't find a way to upload images to Supabase staging yet. The test will still pass even if I change the link to a #, as the image doesn't actually need to render for this test.

[mariojsnunes]

yeah we still need to clean those :)

[dalibormrska]

Heyy and thanks! Tested it out, works as expected. :))

I have one request about the zoom-in cursor on hover. In other parts of the platform (like the research, library or questions), if there is an image that is clickable to open the preview we don't use the cursor zoom-in but the classical pointer instead.

So, I would also make the cursor pointer here in the news for the sake of consistency. :))

[benfurber]

Are these actually needed? What happens if the maxWidth and marginLeft are just removed?

[benfurber]

Hi @othman-shamla, thanks so much for this!

I'm afriad I'd missed previously the lightbox request(!) that us maintainers should have provided more architectural guidance on.

I'll belatedly do that now if that's OK so it does extend the issue but I don't want to merge in the current approach. Again, totally the mistake of us maintainers not noticing.

The main thing is that it should be a consistent approach for all images on the platform. So the new image light box should be a seperate component to do the 'useEffect', etc. and isn't on src/pages/News/NewsPage.tsx. It should probably share the lightbox code that ImageGallery uses.

[dalibormrska]

Apart from the zoom-in cursor comment I had above, everything seems fine, works well. :)) Thanks!

[mariojsnunes]

Thanks @othman-shamla, this was neat contribution!

@all-contributors add @othman-shamla for code

[allcontributors]

@mariojsnunes

I've put up a pull request to add @othman-shamla! 🎉

[onearmy-bot]

🎉 This PR is included in version 2.105.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀