Implement state management for a popup modal to display selected story details

[Papia-tech]

Added state management for a popup modal to display selected story details, including reactions and media. Updated the UI to handle story selection and display translations appropriately.

🛠️ Pull Request Template

🏷️ PR Type

Select the type of PR (check one):

• 🐞 Bug Fix
• ✨ Feature
• 🛠️ Improvement / Refactor
• 📚 Documentation

🔗 Related Issue

• Closes Fix Truncated Story Headlines & Add Story Details Popup #126

✨ Description of Changes

• State Management: Added selectedStoryForPopup to safely handle modal visibility and targeted content.

• UI Expansion: Built a Tailwind-styled modal backdrop with whitespace-pre-wrap to preserve story formatting.

• Event Streamlining: Configured click propagation safely so translation selectors and action buttons function independently of the modal trigger.

• Frontend

  • Storiex.tsx updated

🧪 Testing Instructions

• Open the dashboard and click any card to verify the smooth popup transition.
• Test the language dropdown inside the modal to confirm state persistence.
• Note: I do not have direct live Firebase access to test writing data right now. The code perfectly mirrors the exact query syntax of the previous version, but please run a quick database sync check on your end before merging!

👀 Impact Assessment

Analyze the impact of this PR:

• User-facing changes (UI / UX)
• Performance considerations

🖼️ Screenshots / GIFs (if applicable)

Screen.Recording.2026-05-24.093826.mp4

⚡ Checklist

• Code follows project’s coding style and guidelines
• Changes are tested locally
• Automated tests added/updated
• Documentation updated (if applicable)
• User-facing changes are documented
• Related issue linked
• No new warnings/errors introduced
• All reviewers guidance addressed

⚠️ Breaking Changes

None

[netlify]

✅ Deploy Preview for safevoiceforwomen ready!

Name	Link
🔨 Latest commit	42b6b3b
🔍 Latest deploy log	https://app.netlify.com/projects/safevoiceforwomen/deploys/6a1aeeac6fd8280008d1e996
😎 Deploy Preview	https://deploy-preview-146--safevoiceforwomen.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Papia-tech]

@Piyushydv08 I've updated the file to address the issue. I've implemented the detailed story popup modal.
Since I don't have direct Firebase access to test the live database connection locally, could you please verify that everything syncs correctly on your end before merging? Let me know if any adjustments are needed!