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

Fix: Mobile responsiveness for Podcast Presenter Avatar section

Browse Source 
- Make header stack responsive with column layout on mobile
- Add responsive breakpoints for tab sizes and padding
- Fix image preview max widths for mobile screens
- Add responsive font sizes for info boxes
- Adjust container padding for smaller screens
- Fix icon sizes for mobile devices
This commit is contained in:
ajaysi
2026-04-06 16:56:13 +05:30
parent 45d2b0b693
commit 12960a22ea
1 changed files with 67 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,30 +61,33 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
sx={{ sx={{
flex: 1, flex: 1,
minWidth: 0, minWidth: 0,
p: 2.5, p: { xs: 1.5, sm: 2.5 },
borderRadius: 2, borderRadius: 2,
background: "#ffffff", background: "#ffffff",
border: "1px solid rgba(15, 23, 42, 0.08)", border: "1px solid rgba(15, 23, 42, 0.08)",
boxShadow: "0 1px 2px rgba(15, 23, 42, 0.04)", boxShadow: "0 1px 2px rgba(15, 23, 42, 0.04)",
}} }}
> >
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2 }}> <Stack direction={{ xs: "column", sm: "row" }} spacing={{ xs: 1, sm: 1.5 }} alignItems={{ xs: "flex-start", sm: "center" }} sx={{ mb: 2 }}>
<Box <Stack direction="row" spacing={1.5} alignItems="center">
sx={{ <Box
width: 36, sx={{
height: 36, width: 36,
borderRadius: 1.5, height: 36,
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)", borderRadius: 1.5,
display: "flex", background: "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)",
alignItems: "center", display: "flex",
justifyContent: "center", alignItems: "center",
}} justifyContent: "center",
> flexShrink: 0,
<PersonIcon fontSize="small" sx={{ color: "#667eea" }} /> }}
</Box> >
<Typography variant="subtitle2" sx={{ color: "#0f172a", fontWeight: 600, fontSize: "0.9375rem" }}> <PersonIcon fontSize="small" sx={{ color: "#667eea" }} />
Podcast Presenter Avatar </Box>
</Typography> <Typography variant="subtitle2" sx={{ color: "#0f172a", fontWeight: 600, fontSize: "0.9375rem" }}>
Podcast Presenter Avatar
</Typography>
</Stack>
<Tooltip <Tooltip
title={ title={
<Box> <Box>
@@ -102,7 +105,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
arrow arrow
placement="top" placement="top"
> >
<InfoIcon fontSize="small" sx={{ color: "#94a3b8", cursor: "help" }} /> <InfoIcon fontSize="small" sx={{ color: "#94a3b8", cursor: "help", ml: { xs: 0, sm: 0 } }} />
</Tooltip> </Tooltip>
</Stack> </Stack>
@@ -115,21 +118,22 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
variant="scrollable" variant="scrollable"
scrollButtons="auto" scrollButtons="auto"
sx={{ sx={{
mb: 3, mb: { xs: 2, sm: 3 },
minHeight: 48, minHeight: { xs: 40, sm: 48 },
"& .MuiTabs-indicator": { "& .MuiTabs-indicator": {
display: "none", display: "none",
}, },
"& .MuiTabs-flexContainer": { "& .MuiTabs-flexContainer": {
gap: 1.5, gap: { xs: 1, sm: 1.5 },
}, },
"& .MuiTab-root": { "& .MuiTab-root": {
textTransform: "none", textTransform: "none",
minHeight: 44, minHeight: { xs: 36, sm: 44 },
fontWeight: 600, fontWeight: 600,
fontSize: "0.875rem", fontSize: { xs: "0.75rem", sm: "0.875rem" },
borderRadius: "12px", borderRadius: { xs: "8px", sm: "12px" },
px: 2.5, px: { xs: 1.5, sm: 2.5 },
minWidth: { xs: "auto", sm: 0 },
color: "#64748b", color: "#64748b",
border: "1.5px solid #e2e8f0", border: "1.5px solid #e2e8f0",
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)", transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
@@ -156,11 +160,11 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
{avatarTab === 0 && ( {avatarTab === 0 && (
<Stack spacing={2}> <Stack spacing={2}>
<Box sx={{ minHeight: 200, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", bgcolor: "#f8fafc", borderRadius: 2, p: 2, position: "relative" }}> <Box sx={{ minHeight: { xs: 160, sm: 200 }, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", bgcolor: "#f8fafc", borderRadius: 2, p: { xs: 1.5, sm: 2 }, position: "relative" }}>
{loadingBrandAvatar ? ( {loadingBrandAvatar ? (
<CircularProgress size={32} /> <CircularProgress size={32} />
) : avatarPreview && avatarPreview === brandAvatarFromDb ? ( ) : avatarPreview && avatarPreview === brandAvatarFromDb ? (
<Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: 280 }}> <Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: { xs: 220, sm: 280 } }}>
<Box sx={{ position: "relative", width: "100%" }}> <Box sx={{ position: "relative", width: "100%" }}>
<Box <Box
component="img" component="img"
@@ -169,7 +173,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
sx={{ sx={{
width: "100%", width: "100%",
height: "auto", height: "auto",
maxHeight: 200, maxHeight: { xs: 160, sm: 200 },
objectFit: "contain", objectFit: "contain",
borderRadius: 2, borderRadius: 2,
border: "2px solid #667eea", border: "2px solid #667eea",
@@ -204,7 +208,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Stack> </Stack>
</Stack> </Stack>
) : brandAvatarFromDb ? ( ) : brandAvatarFromDb ? (
<Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: 280 }}> <Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: { xs: 220, sm: 280 } }}>
<Box <Box
component="img" component="img"
src={brandAvatarBlobUrl || ""} src={brandAvatarBlobUrl || ""}
@@ -212,7 +216,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
sx={{ sx={{
width: "100%", width: "100%",
height: "auto", height: "auto",
maxHeight: 200, maxHeight: { xs: 160, sm: 200 },
objectFit: "contain", objectFit: "contain",
borderRadius: 2, borderRadius: 2,
border: "1.5px solid #e2e8f0", border: "1.5px solid #e2e8f0",
@@ -236,8 +240,8 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Stack> </Stack>
) : ( ) : (
<Stack spacing={2} alignItems="center"> <Stack spacing={2} alignItems="center">
<PersonIcon sx={{ fontSize: 48, color: "#cbd5e1" }} /> <PersonIcon sx={{ fontSize: { xs: 36, sm: 48 }, color: "#cbd5e1" }} />
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ textAlign: "center", px: 2 }}>
No brand avatar found. No brand avatar found.
</Typography> </Typography>
<Button size="small" startIcon={<RefreshIcon />} onClick={() => void handleUseBrandAvatar()}> <Button size="small" startIcon={<RefreshIcon />} onClick={() => void handleUseBrandAvatar()}>
@@ -248,17 +252,17 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
p: 1.5, p: { xs: 1, sm: 1.5 },
borderRadius: 1.5, borderRadius: 1.5,
background: alpha("#f0f4ff", 0.6), background: alpha("#f0f4ff", 0.6),
border: "1px solid rgba(99, 102, 241, 0.2)", border: "1px solid rgba(99, 102, 241, 0.2)",
}} }}
> >
<Typography variant="body2" sx={{ color: "#0f172a", fontSize: "0.875rem", fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}> <Typography variant="body2" sx={{ color: "#0f172a", fontSize: { xs: "0.75rem", sm: "0.875rem" }, fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}>
<AutoAwesomeIcon fontSize="small" sx={{ color: "#667eea" }} /> <AutoAwesomeIcon fontSize="small" sx={{ color: "#667eea" }} />
Brand Avatar Brand Avatar
</Typography> </Typography>
<Typography variant="body2" sx={{ color: "#475569", fontSize: "0.8125rem", lineHeight: 1.6 }}> <Typography variant="body2" sx={{ color: "#475569", fontSize: { xs: "0.75rem", sm: "0.8125rem" }, lineHeight: 1.6 }}>
Select your pre-configured brand avatar to maintain consistency. If not selected, a new AI presenter will be generated. Select your pre-configured brand avatar to maintain consistency. If not selected, a new AI presenter will be generated.
</Typography> </Typography>
</Box> </Box>
@@ -267,7 +271,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
{avatarTab === 1 && ( {avatarTab === 1 && (
<Stack spacing={2}> <Stack spacing={2}>
<Box sx={{ minHeight: 300, position: "relative" }}> <Box sx={{ minHeight: { xs: 240, sm: 300 }, position: "relative" }}>
{avatarPreview && !avatarFile && ( {avatarPreview && !avatarFile && (
<IconButton <IconButton
size="small" size="small"
@@ -297,17 +301,17 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
p: 1.5, p: { xs: 1, sm: 1.5 },
borderRadius: 1.5, borderRadius: 1.5,
background: alpha("#f8fafc", 0.8), background: alpha("#f8fafc", 0.8),
border: "1px solid rgba(15, 23, 42, 0.1)", border: "1px solid rgba(15, 23, 42, 0.1)",
}} }}
> >
<Typography variant="body2" sx={{ color: "#0f172a", fontSize: "0.875rem", fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}> <Typography variant="body2" sx={{ color: "#0f172a", fontSize: { xs: "0.75rem", sm: "0.875rem" }, fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}>
<CollectionsIcon fontSize="small" sx={{ color: "#64748b" }} /> <CollectionsIcon fontSize="small" sx={{ color: "#64748b" }} />
Asset Library Asset Library
</Typography> </Typography>
<Typography variant="body2" sx={{ color: "#475569", fontSize: "0.8125rem", lineHeight: 1.6 }}> <Typography variant="body2" sx={{ color: "#475569", fontSize: { xs: "0.75rem", sm: "0.8125rem" }, lineHeight: 1.6 }}>
Select from your previously uploaded images. Filter by favorites or search to find the perfect presenter. Select from your previously uploaded images. Filter by favorites or search to find the perfect presenter.
</Typography> </Typography>
</Box> </Box>
@@ -318,8 +322,8 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
<Stack spacing={2}> <Stack spacing={2}>
<Box> <Box>
{avatarFile && avatarPreview ? ( {avatarFile && avatarPreview ? (
<Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: 2 }}> <Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: { xs: 1.5, sm: 2 } }}>
<Box sx={{ position: "relative", display: "inline-block", width: "100%", maxWidth: 280 }}> <Box sx={{ position: "relative", display: "inline-block", width: "100%", maxWidth: { xs: 220, sm: 280 } }}>
<Box <Box
component="img" component="img"
src={avatarPreviewBlobUrl || (avatarPreview.startsWith("data:") ? avatarPreview : "")} src={avatarPreviewBlobUrl || (avatarPreview.startsWith("data:") ? avatarPreview : "")}
@@ -327,7 +331,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
sx={{ sx={{
width: "100%", width: "100%",
height: "auto", height: "auto",
maxHeight: 200, maxHeight: { xs: 160, sm: 200 },
objectFit: "contain", objectFit: "contain",
borderRadius: 2, borderRadius: 2,
border: "2px solid #e2e8f0", border: "2px solid #e2e8f0",
@@ -361,7 +365,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
arrow arrow
placement="top" placement="top"
> >
<Box> <Box sx={{ width: "100%", maxWidth: { xs: 220, sm: 280 } }}>
<Button <Button
onClick={handleMakePresentable} onClick={handleMakePresentable}
disabled={makingPresentable} disabled={makingPresentable}
@@ -370,7 +374,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
sx={{ sx={{
width: "100%", width: "100%",
textTransform: "none", textTransform: "none",
fontSize: "0.875rem", fontSize: { xs: "0.75rem", sm: "0.875rem" },
fontWeight: 600, fontWeight: 600,
borderRadius: 2.5, borderRadius: 2.5,
color: "#f8fbff", color: "#f8fbff",
@@ -407,7 +411,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
width: "100%", width: "100%",
minHeight: 200, minHeight: { xs: 160, sm: 200 },
border: "2px dashed #cbd5e1", border: "2px dashed #cbd5e1",
borderRadius: 2.5, borderRadius: 2.5,
bgcolor: "#f8fafc", bgcolor: "#f8fafc",
@@ -421,7 +425,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
}, },
}} }}
> >
<PhotoCameraIcon sx={{ color: "#94a3b8", fontSize: 36, mb: 1.5 }} /> <PhotoCameraIcon sx={{ color: "#94a3b8", fontSize: { xs: 28, sm: 36 }, mb: 1.5 }} />
<Typography variant="body2" sx={{ color: "#64748b", fontWeight: 600, mb: 0.5 }}> <Typography variant="body2" sx={{ color: "#64748b", fontWeight: 600, mb: 0.5 }}>
Take a Selfie Take a Selfie
</Typography> </Typography>
@@ -433,29 +437,29 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
p: 1.5, p: { xs: 1, sm: 1.5 },
borderRadius: 1.5, borderRadius: 1.5,
background: alpha("#f8fafc", 0.8), background: alpha("#f8fafc", 0.8),
border: "1px solid rgba(15, 23, 42, 0.1)", border: "1px solid rgba(15, 23, 42, 0.1)",
}} }}
> >
<Typography variant="body2" sx={{ color: "#0f172a", fontSize: "0.875rem", fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}> <Typography variant="body2" sx={{ color: "#0f172a", fontSize: { xs: "0.75rem", sm: "0.875rem" }, fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}>
<PhotoCameraIcon fontSize="small" sx={{ color: "#64748b" }} /> <PhotoCameraIcon fontSize="small" sx={{ color: "#64748b" }} />
Take a Selfie Take a Selfie
</Typography> </Typography>
<Typography variant="body2" sx={{ color: "#475569", fontSize: "0.8125rem", lineHeight: 1.6 }}> <Typography variant="body2" sx={{ color: "#475569", fontSize: { xs: "0.75rem", sm: "0.8125rem" }, lineHeight: 1.6 }}>
Capture a photo using your device camera and use <strong>"Make Presentable"</strong> to enhance it into a professional presenter using AI. Capture a photo using your device camera and use <strong>"Make Presentable"</strong> to enhance it into a professional presenter using AI.
</Typography> </Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
p: 1.5, p: { xs: 1, sm: 1.5 },
borderRadius: 1.5, borderRadius: 1.5,
background: alpha("#f0f4ff", 0.5), background: alpha("#f0f4ff", 0.5),
border: "1px solid rgba(99, 102, 241, 0.15)", border: "1px solid rgba(99, 102, 241, 0.15)",
}} }}
> >
<Typography variant="caption" sx={{ color: "#6366f1", fontSize: "0.8125rem", fontWeight: 500, display: "flex", alignItems: "center", gap: 0.5 }}> <Typography variant="caption" sx={{ color: "#6366f1", fontSize: { xs: "0.7rem", sm: "0.8125rem" }, fontWeight: 500, display: "flex", alignItems: "center", gap: 0.5 }}>
<InfoIcon fontSize="inherit" /> <InfoIcon fontSize="inherit" />
Camera access required for selfie capture Camera access required for selfie capture
</Typography> </Typography>
@@ -467,15 +471,15 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
<Stack spacing={2}> <Stack spacing={2}>
<Box> <Box>
{avatarFile && avatarPreview ? ( {avatarFile && avatarPreview ? (
<Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: 2 }}> <Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: { xs: 1.5, sm: 2 } }}>
<Box sx={{ position: "relative", display: "inline-block" }}> <Box sx={{ position: "relative", display: "inline-block" }}>
<Box <Box
component="img" component="img"
src={avatarPreviewBlobUrl || (avatarPreview.startsWith("data:") ? avatarPreview : "")} src={avatarPreviewBlobUrl || (avatarPreview.startsWith("data:") ? avatarPreview : "")}
alt="Avatar preview" alt="Avatar preview"
sx={{ sx={{
width: 160, width: { xs: 120, sm: 160 },
height: 160, height: { xs: 120, sm: 160 },
objectFit: "cover", objectFit: "cover",
borderRadius: 2.5, borderRadius: 2.5,
border: "2px solid #e2e8f0", border: "2px solid #e2e8f0",
@@ -509,7 +513,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
arrow arrow
placement="top" placement="top"
> >
<Box> <Box sx={{ width: "100%", maxWidth: { xs: 200, sm: 280 } }}>
<SecondaryButton <SecondaryButton
onClick={handleMakePresentable} onClick={handleMakePresentable}
disabled={makingPresentable} disabled={makingPresentable}
@@ -532,7 +536,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
width: "100%", width: "100%",
minHeight: 200, minHeight: { xs: 160, sm: 200 },
border: "2px dashed #cbd5e1", border: "2px dashed #cbd5e1",
borderRadius: 2.5, borderRadius: 2.5,
bgcolor: "#f8fafc", bgcolor: "#f8fafc",
@@ -552,7 +556,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
onChange={handleAvatarChange} onChange={handleAvatarChange}
style={{ display: "none" }} style={{ display: "none" }}
/> />
<CloudUploadIcon sx={{ color: "#94a3b8", fontSize: 36, mb: 1.5 }} /> <CloudUploadIcon sx={{ color: "#94a3b8", fontSize: { xs: 28, sm: 36 }, mb: 1.5 }} />
<Typography variant="body2" sx={{ color: "#64748b", fontWeight: 600, mb: 0.5 }}> <Typography variant="body2" sx={{ color: "#64748b", fontWeight: 600, mb: 0.5 }}>
Upload Your Photo Upload Your Photo
</Typography> </Typography>
@@ -564,29 +568,29 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
p: 1.5, p: { xs: 1, sm: 1.5 },
borderRadius: 1.5, borderRadius: 1.5,
background: alpha("#f8fafc", 0.8), background: alpha("#f8fafc", 0.8),
border: "1px solid rgba(15, 23, 42, 0.1)", border: "1px solid rgba(15, 23, 42, 0.1)",
}} }}
> >
<Typography variant="body2" sx={{ color: "#0f172a", fontSize: "0.875rem", fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}> <Typography variant="body2" sx={{ color: "#0f172a", fontSize: { xs: "0.75rem", sm: "0.875rem" }, fontWeight: 600, mb: 0.5, display: "flex", alignItems: "center", gap: 0.5 }}>
<CloudUploadIcon fontSize="small" sx={{ color: "#64748b" }} /> <CloudUploadIcon fontSize="small" sx={{ color: "#64748b" }} />
Upload Your Photo Upload Your Photo
</Typography> </Typography>
<Typography variant="body2" sx={{ color: "#475569", fontSize: "0.8125rem", lineHeight: 1.6 }}> <Typography variant="body2" sx={{ color: "#475569", fontSize: { xs: "0.75rem", sm: "0.8125rem" }, lineHeight: 1.6 }}>
Upload a new photo and use <strong>"Make Presentable"</strong> to enhance it into a professional presenter using AI. Upload a new photo and use <strong>"Make Presentable"</strong> to enhance it into a professional presenter using AI.
</Typography> </Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
p: 1.5, p: { xs: 1, sm: 1.5 },
borderRadius: 1.5, borderRadius: 1.5,
background: alpha("#f0f4ff", 0.5), background: alpha("#f0f4ff", 0.5),
border: "1px solid rgba(99, 102, 241, 0.15)", border: "1px solid rgba(99, 102, 241, 0.15)",
}} }}
> >
<Typography variant="caption" sx={{ color: "#6366f1", fontSize: "0.8125rem", fontWeight: 500, display: "flex", alignItems: "center", gap: 0.5 }}> <Typography variant="caption" sx={{ color: "#6366f1", fontSize: { xs: "0.7rem", sm: "0.8125rem" }, fontWeight: 500, display: "flex", alignItems: "center", gap: 0.5 }}>
<InfoIcon fontSize="inherit" /> <InfoIcon fontSize="inherit" />
Supported formats: JPG, PNG, WebP (max 5MB) Supported formats: JPG, PNG, WebP (max 5MB)
</Typography> </Typography>