fix: improve podcast title and description text wrapping

frontend/src/screens/PodcastPlayer.tsx

@@ -48,11 +48,7 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
       : require('../../assets/sounds/funny-cartoon-sound-397415.mp3'),
   );
 
-  const formatPlaybackSpeed = (playbackSpeed: number) =>
-    Number.isInteger(playbackSpeed)
-      ? `${playbackSpeed}x`
-      : `${playbackSpeed}x`;
-
+  const formatPlaybackSpeed = (playbackSpeed: number) => `${playbackSpeed}x`;
   const formatSecTime = (seconds: number) => {
     const hours = Math.floor(seconds / 3600);
     const mins = Math.floor((seconds % 3600) / 60);
@@ -79,7 +75,7 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
     if (!player) return;
     // If the track has fully finished, restart from the beginning.
     // Otherwise resume from the current paused position.
-    if (duration > 0 && !isNaN(duration) && position >= duration - 0.5){
+    if (duration > 0 && !isNaN(duration) && position >= duration - 0.5) {
       await player.seekTo(0);
       setPosition(0);
     }
@@ -91,7 +87,6 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
   const handlePause = async () => {
     console.log('Pause called');
     if (!player) return;
-
     player.pause();
     setUiState('paused');
     setIsPlaying(false);
@@ -156,7 +151,6 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
     }
   };
 
-
   const handlePostSubmit = async () => {
     if (!isConnected) {
       Alert.alert('Please check your internet and try again!');
@@ -194,7 +188,6 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
       console.log('Image', uploadedUrl);
 
       if (uploadedUrl && audioUrl) {
-
         uploadPodcast(
           {
             title: title,
@@ -295,7 +288,6 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
     }
   }, [error, handleUpload, imageError]);
 
-
   // if(uploadPodcastPending){
   //   return <Loader/>
   // }
@@ -308,7 +300,7 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
         paddingTop="$8"
         justifyContent="space-between">
         {/* Header Section */}
-        <YStack mb="$4">
+        <YStack mb="$4" width="100%" paddingHorizontal="$1">
           <Text
             color="#94A3B8"
             fontSize={13}
@@ -317,10 +309,24 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
             letterSpacing={1}>
             NOW PLAYING
           </Text>
-          <Text color="#F1F5F9" fontSize={28} fontWeight="800" lineHeight={34}>
+          <Text
+            color="#F1F5F9"
+            fontSize={28}
+            fontWeight="800"
+            lineHeight={34}
+            flexShrink={1}
+            flexWrap="wrap"
+            allowFontScaling>
             {title}
           </Text>
-          <Text color="#94A3B8" fontSize={16} marginTop="$3" lineHeight={24}>
+          <Text
+            color="#94A3B8"
+            fontSize={16}
+            marginTop="$3"
+            lineHeight={24}
+            flexShrink={1}
+            flexWrap="wrap"
+            allowFontScaling>
             {description}
           </Text>
         </YStack>
@@ -356,7 +362,10 @@ const PodcastPlayer = ({navigation, route}: PodcastPlayerScreenProps) => {
         {/* Waveform Visualization */}
         {/* height={80} gives 16px of breathing room around the waveform's internal MAX_HEIGHT+16 (64px) container */}
         <YStack alignItems="center" height={80} my="$2">
-          <AudioWaveform isPlaying={player.currentStatus.playing} accentColor={theme.blue10?.val ?? '#3B82F6'} />
+          <AudioWaveform
+            isPlaying={player.currentStatus.playing}
+            accentColor={theme.blue10?.val ?? '#3B82F6'}
+          />
         </YStack>
 
         {/* Progress Slider Section */}
@@ -519,4 +528,3 @@ const styles = StyleSheet.create({
     color: '#777',
   },
 });
-

frontend/src/screens/PodcastRecorder.tsx

@@ -66,7 +66,6 @@ const PodcastRecorder = ({navigation, route}: PodcastRecorderScreenProps) => {
       const status = await AudioModule.requestRecordingPermissionsAsync();
       if (!status.granted) {
         Alert.alert('Permission to access microphone was denied');
-
       }
 
       const storageGranted = await requestStoragePermissions();
@@ -242,7 +241,11 @@ const PodcastRecorder = ({navigation, route}: PodcastRecorderScreenProps) => {
       <YStack flex={1} bg="#0F172A" ai="center" jc="center" px="$4" space="$4">
         {/* Header Section */}
         <YStack ai="center" space="$2" mb="$4">
-          <Text color="#F1F5F9" fontSize={32} fontWeight="800" letterSpacing={1}>
+          <Text
+            color="#F1F5F9"
+            fontSize={32}
+            fontWeight="800"
+            letterSpacing={1}>
             Podcast Studio
           </Text>
           <Text color="#94A3B8" fontSize={15} fontWeight="500">
@@ -275,17 +278,27 @@ const PodcastRecorder = ({navigation, route}: PodcastRecorderScreenProps) => {
         </YStack>
 
         {/* Timer Display */}
-        <YStack alignItems="center" bg="#1E293B" px="$6" py="$4" borderRadius={16} mb="$2">
+        <YStack
+          alignItems="center"
+          bg="#1E293B"
+          px="$6"
+          py="$4"
+          borderRadius={16}
+          mb="$2">
           <Text
             fontSize={50}
             color="#60A5FA"
             fontWeight="800"
             letterSpacing={4}
-            fontFamily={"monospace" as any}>
+            fontFamily={'monospace' as any}>
             {recordTime}
           </Text>
           <Text color="#94A3B8" fontSize={13} fontWeight="600" mt="$1">
-            {uiState === 'recording' ? 'RECORDING IN PROGRESS' : uiState === 'review' ? 'RECORDING COMPLETE' : 'READY TO RECORD'}
+            {uiState === 'recording'
+              ? 'RECORDING IN PROGRESS'
+              : uiState === 'review'
+                ? 'RECORDING COMPLETE'
+                : 'READY TO RECORD'}
           </Text>
         </YStack>
 
@@ -393,11 +406,25 @@ const PodcastRecorder = ({navigation, route}: PodcastRecorderScreenProps) => {
         </XStack>
 
         {/* Article Title Display */}
-        <YStack ai="center" mt="$6" px="$4" py="$3" bg="#1E293B" borderRadius={12} maxWidth="90%">
+        <YStack
+          ai="center"
+          mt="$6"
+          px="$4"
+          py="$3"
+          bg="#1E293B"
+          borderRadius={12}
+          maxWidth="90%">
           <Text color="#64748B" fontSize={12} fontWeight="600" mb="$1">
             PODCAST TITLE
           </Text>
-          <Text color="#E2E8F0" fontSize={17} fontWeight="700" textAlign="center">
+          <Text
+            color="#E2E8F0"
+            fontSize={17}
+            fontWeight="700"
+            textAlign="center"
+            flexWrap="wrap"
+            flexShrink={1}
+            allowFontScaling>
             {title}
           </Text>
         </YStack>