fix: improve podcast title and description text wrapping

[Sha-lini3]

PR Description

This PR improves the handling of long podcast titles and descriptions on the PodcastRecorder and PodcastPlayer screens.

Changes Made

• Added proper text wrapping for long podcast titles.
• Added proper text wrapping for long podcast descriptions.
• Prevented text clipping and overflow using responsive layout adjustments.
• Improved spacing and alignment for larger content blocks.
• Added accessibility support through font scaling.
• Improved responsiveness for different screen sizes.

Type of Change

• Bug fix (change which fixes an issue)

Select your work-area

• Frontend

Related Issue

Fixes the issue regarding long podcast titles and descriptions causing overflow, clipping, and alignment problems on PodcastRecorder and PodcastPlayer screens.

Fixes

closes #1087

Checklist

• I have updated my branch and synced it with the project's 'develop' branch before making this PR.
• I have optimized the file changes.
• I have made a PR to the project's develop branch.

Undertaking

• My code follows the style guidelines of this project.

• I have performed a self-review of my code.

• I have commented my code, particularly in hard-to-understand areas.

• I have checked for plagiarism and assure its authenticity.

• I have read and followed the code of conduct for this repository. I understand that violation of this undertaking may have legal consequences.

• I Agree

[github-actions]

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

[SB2318]

/review

[github-actions]

🤖 Gemini AI Code Review

Summary

This Pull Request aims to resolve text wrapping issues for long podcast titles and descriptions on the PodcastRecorder and PodcastPlayer screens. The changes introduce flexWrap, flexShrink, and allowFontScaling properties to relevant Text components, along with some layout adjustments to improve responsiveness and prevent text clipping.

Overall, the PR addresses the stated problem effectively by applying appropriate CSS properties for text wrapping and responsiveness. However, there are a few areas that require attention, including a logical inconsistency and some minor stylistic improvements.

🟡 Medium Severity

• Issue: Redundant Conditional Logic in formatPlaybackSpeed
  The formatPlaybackSpeed function in PodcastPlayer.tsx uses a ternary operator that always returns the same value, regardless of the condition.

  const formatPlaybackSpeed = (playbackSpeed: number) =>
    Number.isInteger(playbackSpeed)
      ? `${playbackSpeed}x`
      : `${playbackSpeed}x`;

  This makes the Number.isInteger(playbackSpeed) check redundant and suggests either a copy-paste error or an incomplete implementation where different formatting was originally intended for integer vs. non-integer speeds.

• Impact: This is dead code and a logical inconsistency. While it doesn't currently cause a functional bug, it makes the code less clear, potentially misleading future developers, and could hide a missed requirement for different formatting.

• Fix:
  If the intention is always to append 'x', simplify the function:

  const formatPlaybackSpeed = (playbackSpeed: number) => `${playbackSpeed}x`;

  If different formatting is desired (e.g., for non-integer speeds to show more precision or a different suffix), implement that logic:

  // Example: If you wanted to show integers as "1x" and floats as "1.50x"
  const formatPlaybackSpeed = (playbackSpeed: number) =>
    Number.isInteger(playbackSpeed)
      ? `${playbackSpeed}x`
      : `${playbackSpeed.toFixed(1)}x`; // Or whatever specific formatting is needed

• Issue: Fixed width on PodcastRecorder Title Container
  In PodcastRecorder.tsx, the YStack containing the podcast title now has both width="90%" and maxWidth="90%".

  <YStack
    ai="center"
    mt="$6"
    px="$4"
    py="$3"
    bg="#1E293B"
    borderRadius={12}
    width="90%" // Added
    maxWidth="90%">

• Impact: While maxWidth="90%" is generally good for responsive design (preventing content from becoming too wide on large screens), adding width="90%" forces the container to always take 90% of its parent's width. This might be overly restrictive in some responsive scenarios, especially if the parent container itself has dynamic width or padding. It might lead to unnecessary empty space on smaller screens if the content could fit in less than 90%, or conversely, still cause issues if the remaining 10% is insufficient for padding/margins on very small screens.

• Fix: Consider if width="90%" is strictly necessary. Often, maxWidth="90%" combined with alignSelf="center" (if the parent isn't ai="center") or flex: 1 with maxWidth is more flexible. If the intent is to ensure it never exceeds 90% and always takes up to 90% (but not less), then the current approach is fine, but it's worth a conscious decision.

  // Option 1: Rely on maxWidth for flexibility
  <YStack
    ai="center"
    mt="$6"
    px="$4"
    py="$3"
    bg="#1E293B"
    borderRadius={12}
    maxWidth="90%">
    {/* ... content ... */}
  </YStack>
  
  // Option 2: If 90% is a hard requirement for width, keep it but understand the implications.

🟢 Low Severity / Nits

• Issue: Inconsistent Empty Lines
  There are a few instances of inconsistent empty lines, for example, an extra empty line before handlePostSubmit in PodcastPlayer.tsx and some removed empty lines elsewhere.

• Impact: Minor readability issue.

• Fix: Standardize empty line usage for better code consistency. For example, remove the empty line before handlePostSubmit.

• Issue: fontFamily={"monospace" as any} Type Assertion
  In PodcastRecorder.tsx, the fontFamily prop uses a type assertion as any.

  fontFamily={'monospace' as any}>

• Impact: Using as any bypasses TypeScript's type checking, which can hide potential type mismatches or indicate that the type definitions for fontFamily are incomplete.

• Fix: If monospace is a valid font family, ensure it's correctly typed in your project's theme or component library definitions. If it's a custom font, it should be loaded and referenced properly without as any.

What's Good ✅

1. Effective Text Wrapping and Responsiveness: The use of flexWrap="wrap", flexShrink={1}, and width="100%" (in PodcastPlayer) directly addresses the core problem of text overflow and clipping, making the UI more robust across different content lengths and screen sizes.
2. Accessibility Improvement: Including allowFontScaling on the Text components is a great step towards improving accessibility, ensuring users with larger font size preferences can still read the content without issues.
3. Clean-up of Unused Lines: The removal of unnecessary empty lines contributes to a cleaner and more readable codebase.

Verdict

Request Changes

The most critical issue is the redundant conditional logic in formatPlaybackSpeed in PodcastPlayer.tsx, which should be corrected to reflect the true intent or simplified. Additionally, the width="90%" on the PodcastRecorder title container should be reviewed for its responsiveness implications.

[SB2318]

@Sha-lini3 can you please cover the bot points?

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
33770449	Triggered	Google Cloud Express API Key	5e513c3	frontend/.env.example	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[Sha-lini3]

Hi @SB2318 ,
I have addressed the review comments:

• Simplified the redundant playback speed formatting logic.
• Removed the fixed width constraint and retained responsive maxWidth handling.
• Cleaned up spacing.

Regarding the GitGuardian warning, this PR only modifies:

• frontend/src/screens/PodcastPlayer.tsx
• frontend/src/screens/PodcastRecorder.tsx

No credentials, tokens, or configuration files were added as part of this contribution.

Could you please review and let me know if there is any additional change required from my side

Thank you.

[github-actions]

Automated Review Feedback

No major issues were identified during this review.

The implementation appears consistent with the repository standards and the modified files were reviewed successfully.

Maintainer Note:

Maintainer @SB2318 will review this pull request after the initial automated review cycle is complete.

[github-actions]

Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨