From d06ab77e60878d69d816bf4615aeae884bc50e9c Mon Sep 17 00:00:00 2001
From: ajaysi <ajay.calsoft@gmail.com>
Date: Tue, 31 Mar 2026 20:13:24 +0530
Subject: [PATCH] Improve podcast avatar display and info banner

- Avatar images now use full available width (max 280px, responsive)
- Auto-collapse info banner after 8 seconds
- Add 'Show tips' link to expand collapsed info
- Fix image sizing to use contain instead of cover for better visibility
---
 .../CreateStep/AvatarSelector.tsx             | 35 +++++-----
 .../PodcastMaker/CreateStep/CreateActions.tsx | 69 +++++++++++++------
 2 files changed, 67 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx b/frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx
index 7ffb6d5d..89dcb6d7 100644
--- a/frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx
+++ b/frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx
@@ -160,17 +160,18 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
                 {loadingBrandAvatar ? (
                   <CircularProgress size={32} />
                 ) : avatarPreview && avatarPreview === brandAvatarFromDb ? (
-                  <Stack spacing={2} alignItems="center">
-                    <Box sx={{ position: "relative" }}>
+                  <Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: 280 }}>
+                    <Box sx={{ position: "relative", width: "100%" }}>
                       <Box
                         component="img"
                         src={avatarPreviewBlobUrl || ""}
                         alt="Selected Brand Avatar"
                         sx={{
-                          width: 160,
-                          height: 160,
-                          objectFit: "cover",
-                          borderRadius: 2.5,
+                          width: "100%",
+                          height: "auto",
+                          maxHeight: 200,
+                          objectFit: "contain",
+                          borderRadius: 2,
                           border: "2px solid #667eea",
                           boxShadow: "0 4px 12px rgba(102, 126, 234, 0.25)",
                         }}
@@ -203,16 +204,17 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
                     </Stack>
                   </Stack>
                 ) : brandAvatarFromDb ? (
-                  <Stack spacing={2} alignItems="center">
+                  <Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: 280 }}>
                     <Box
                       component="img"
                       src={brandAvatarBlobUrl || ""}
                       alt="Available Brand Avatar"
                       sx={{
-                        width: 160,
-                        height: 160,
-                        objectFit: "cover",
-                        borderRadius: 2.5,
+                        width: "100%",
+                        height: "auto",
+                        maxHeight: 200,
+                        objectFit: "contain",
+                        borderRadius: 2,
                         border: "1.5px solid #e2e8f0",
                         opacity: 0.8,
                         filter: "grayscale(0.3)",
@@ -317,16 +319,17 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
               <Box>
                 {avatarFile && avatarPreview ? (
                   <Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: 2 }}>
-                    <Box sx={{ position: "relative", display: "inline-block" }}>
+                    <Box sx={{ position: "relative", display: "inline-block", width: "100%", maxWidth: 280 }}>
                       <Box
                         component="img"
                         src={avatarPreviewBlobUrl || (avatarPreview.startsWith("data:") ? avatarPreview : "")}
                         alt="Selfie preview"
                         sx={{
-                          width: 160,
-                          height: 160,
-                          objectFit: "cover",
-                          borderRadius: 2.5,
+                          width: "100%",
+                          height: "auto",
+                          maxHeight: 200,
+                          objectFit: "contain",
+                          borderRadius: 2,
                           border: "2px solid #e2e8f0",
                           boxShadow: "0 2px 8px rgba(15, 23, 42, 0.08)",
                         }}
diff --git a/frontend/src/components/PodcastMaker/CreateStep/CreateActions.tsx b/frontend/src/components/PodcastMaker/CreateStep/CreateActions.tsx
index b8a3ca77..0a3a40c6 100644
--- a/frontend/src/components/PodcastMaker/CreateStep/CreateActions.tsx
+++ b/frontend/src/components/PodcastMaker/CreateStep/CreateActions.tsx
@@ -1,9 +1,11 @@
-import React from "react";
-import { Stack, Alert, Typography, alpha } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import { Stack, Alert, Typography, alpha, IconButton, Collapse } from "@mui/material";
 import {
   Info as InfoIcon,
   Refresh as RefreshIcon,
   AutoAwesome as AutoAwesomeIcon,
+  ExpandMore as ExpandMoreIcon,
+  ExpandLess as ExpandLessIcon,
 } from "@mui/icons-material";
 import { PrimaryButton, SecondaryButton } from "../ui";
 
@@ -20,26 +22,51 @@ export const CreateActions: React.FC<CreateActionsProps> = ({
   canSubmit,
   isSubmitting,
 }) => {
+  const [showInfo, setShowInfo] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowInfo(false);
+    }, 8000);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
-    <Stack spacing={3.5}>
-      {/* Info Banner */}
-      <Alert 
-        severity="info" 
-        icon={<InfoIcon sx={{ color: "#6366f1", fontSize: "1.125rem" }} />}
-        sx={{ 
-          background: alpha("#f0f4ff", 0.6),
-          border: "1px solid rgba(99, 102, 241, 0.15)",
-          borderRadius: 2,
-          boxShadow: "0 1px 3px rgba(99, 102, 241, 0.08)",
-          "& .MuiAlert-message": {
-            width: "100%",
-          },
-        }}
-      >
-        <Typography variant="body2" sx={{ fontSize: "0.875rem", color: "#475569", lineHeight: 1.6, fontWeight: 400 }}>
-          Podcast avatar Image is required, brand avatar is Default, you can choose existing images from asset library Or Upload your Picture. If not, AI Avatar will be generated automatically.
-        </Typography>
-      </Alert>
+    <Stack spacing={2}>
+      {/* Collapsible Info Banner */}
+      <Collapse in={showInfo}>
+        <Alert 
+          severity="info" 
+          icon={<InfoIcon sx={{ color: "#6366f1", fontSize: "1.125rem" }} />}
+          onClose={() => setShowInfo(false)}
+          sx={{ 
+            background: alpha("#f0f4ff", 0.6),
+            border: "1px solid rgba(99, 102, 241, 0.15)",
+            borderRadius: 2,
+            boxShadow: "0 1px 3px rgba(99, 102, 241, 0.08)",
+            "& .MuiAlert-message": {
+              width: "100%",
+            },
+          }}
+        >
+          <Typography variant="body2" sx={{ fontSize: "0.875rem", color: "#475569", lineHeight: 1.6, fontWeight: 400 }}>
+            Podcast avatar Image is required. Brand avatar is default. You can choose from asset library or upload your picture. If not, AI Avatar will be generated automatically.
+          </Typography>
+        </Alert>
+      </Collapse>
+
+      {!showInfo && (
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <InfoIcon sx={{ fontSize: 16, color: "#6366f1" }} />
+          <Typography 
+            variant="caption" 
+            sx={{ color: "#6366f1", cursor: "pointer", "&:hover": { textDecoration: "underline" } }}
+            onClick={() => setShowInfo(true)}
+          >
+            Show tips
+          </Typography>
+        </Stack>
+      )}
 
       <Stack direction="row" justifyContent="flex-end" spacing={1}>
         <SecondaryButton onClick={reset} startIcon={<RefreshIcon />}>