kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve podcast avatar display and info banner

Browse Source 
- 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
This commit is contained in:
ajaysi
2026-03-31 20:13:24 +05:30
parent f737b24b49
commit d06ab77e60
2 changed files with 67 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx
View File

@@ -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)",
}}