mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-03 16:41:27 +01:00
updated to only have mobile/desktop view
This commit is contained in:
nvrl committed
1 parent
9f1e4d4ec5
commit
0c16e39273
6 files changed
+115
-111
No files matched your search
@@ -90,7 +90,7 @@ const GlobalSearch = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const isMobile = useMediaQuery('(max-width:900px)');
|
||||
const isMobile = useMediaQuery('(max-width:1150px)');
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
@@ -220,7 +220,7 @@ const App: React.FC = () => {
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [catOpen, setCatOpen] = useState(false);
|
||||
const [adminMode, setAdminMode] = useState(localStorage.getItem('admin-mode') === 'true');
|
||||
const isMobile = useMediaQuery('(max-width:900px)');
|
||||
const isMobile = useMediaQuery('(max-width:1150px)');
|
||||
|
||||
const toggleAdminMode = () => {
|
||||
const newVal = !adminMode;
|
||||
|
||||
@@ -222,7 +222,7 @@ const CommunityFeed: React.FC<CommunityFeedProps> = ({ adminMode }) => {
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{/* Main Feed Column */}
|
||||
<Grid size={{ xs: 12, md: 8 }}>
|
||||
<Grid size={{ xs: 12, lg: 8 }}>
|
||||
{ratings.length === 0 ? (
|
||||
<Box sx={{
|
||||
p: 6,
|
||||
@@ -255,7 +255,7 @@ const CommunityFeed: React.FC<CommunityFeedProps> = ({ adminMode }) => {
|
||||
borderColor: (theme) => alpha(theme.palette.primary.main, 0.2)
|
||||
}
|
||||
}}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<CardContent sx={{ p: { xs: 2, sm: 3 } }}>
|
||||
{/* User Info */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
@@ -372,7 +372,7 @@ const CommunityFeed: React.FC<CommunityFeedProps> = ({ adminMode }) => {
|
||||
</Grid>
|
||||
|
||||
{/* Sidebar Column */}
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<Grid size={{ xs: 12, lg: 4 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
|
||||
{/* Notifications Widget */}
|
||||
|
||||
@@ -47,7 +47,7 @@ const Dashboard: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
|
||||
useTitle(t('nav.dashboard'));
|
||||
const [data, setData] = useState<DashboardData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -216,7 +216,7 @@ const Dashboard: React.FC = () => {
|
||||
border: '1px solid',
|
||||
borderColor: 'divider'
|
||||
}}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: { xs: 2, sm: 4 } }}>
|
||||
<Grid container spacing={3} alignItems="center">
|
||||
<Grid size={{ xs: 12, sm: 'auto' }}>
|
||||
<Avatar src={data.user.avatar || undefined} sx={{ width: 100, height: 100, border: '4px solid', borderColor: 'primary.main' }}>
|
||||
@@ -257,55 +257,57 @@ const Dashboard: React.FC = () => {
|
||||
{activeTab === 0 && (
|
||||
<Box>
|
||||
{/* Filter Controls for Reviews */}
|
||||
<Grid container spacing={2} sx={{ mb: 4, alignItems: 'center' }}>
|
||||
<Grid size={{ xs: 12, md: 4, lg: 5 }}>
|
||||
<TextField
|
||||
fullWidth size="small" placeholder={t('dashboard.searchRated')}
|
||||
value={ratedSearch} onChange={e => setRatedSearch(e.target.value)}
|
||||
slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 1,
|
||||
'& .MuiOutlinedInput-root': { borderRadius: 1, height: 44 }
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
|
||||
<Stack direction="row" spacing={1} sx={{ overflowX: 'auto', py: 0.5, px: 0.5, '&::-webkit-scrollbar': { display: 'none' } }}>
|
||||
{ratedCategories.map(cat => (
|
||||
<Chip
|
||||
key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.my_ratings.find(r => r.category_name === cat)?.category_slug}`, { defaultValue: cat })}
|
||||
onClick={() => setRatedCategory(cat)}
|
||||
color={ratedCategory === cat ? 'primary' : 'default'}
|
||||
variant={ratedCategory === cat ? 'filled' : 'outlined'}
|
||||
sx={{ fontWeight: 'bold', height: 36, px: 0.5, borderRadius: 1, fontSize: '0.85rem' }}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Grid container spacing={{ xs: 2, lg: 1.5 }} alignItems="center">
|
||||
<Grid size={{ xs: 12, lg: 4, xl: 5 }}>
|
||||
<TextField
|
||||
fullWidth size="small" placeholder={t('dashboard.searchRated')}
|
||||
value={ratedSearch} onChange={e => setRatedSearch(e.target.value)}
|
||||
slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 1,
|
||||
'& .MuiOutlinedInput-root': { borderRadius: 1, height: { xs: 48, lg: 40 } }
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, lg: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
|
||||
<Box sx={{ display: 'flex', gap: 1, overflowX: 'auto', py: 0.5, px: 0.2, '&::-webkit-scrollbar': { display: 'none' } }}>
|
||||
{ratedCategories.map(cat => (
|
||||
<Chip
|
||||
key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.my_ratings.find(r => r.category_name === cat)?.category_slug}`, { defaultValue: cat })}
|
||||
onClick={() => setRatedCategory(cat)}
|
||||
color={ratedCategory === cat ? 'primary' : 'default'}
|
||||
variant={ratedCategory === cat ? 'filled' : 'outlined'}
|
||||
sx={{ fontWeight: 'bold', height: { xs: 36, lg: 32 }, borderRadius: 1, fontSize: '0.8rem', flexShrink: 0 }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 'auto' }}>
|
||||
<Stack direction="row" spacing={0.5} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: 44, width: { xs: '100%', md: 'auto' } }}>
|
||||
<Button
|
||||
fullWidth={isMobile}
|
||||
size="small" variant={ratedSort === 'date' ? 'contained' : 'text'}
|
||||
onClick={() => setRatedSort('date')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, fontSize: '0.85rem' }}
|
||||
>
|
||||
{t('dashboard.date')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth={isMobile}
|
||||
size="small" variant={ratedSort === 'rating' ? 'contained' : 'text'}
|
||||
onClick={() => setRatedSort('rating')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, fontSize: '0.85rem' }}
|
||||
>
|
||||
{t('dashboard.rating')}
|
||||
</Button>
|
||||
</Stack>
|
||||
<Grid size={{ xs: 12, lg: 'auto' }}>
|
||||
<Box sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: { xs: 48, lg: 40 }, display: 'flex', gap: 0.5 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small" variant={ratedSort === 'date' ? 'contained' : 'text'}
|
||||
onClick={() => setRatedSort('date')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, fontSize: '0.8rem' }}
|
||||
>
|
||||
{t('dashboard.date')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small" variant={ratedSort === 'rating' ? 'contained' : 'text'}
|
||||
onClick={() => setRatedSort('rating')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, fontSize: '0.8rem' }}
|
||||
>
|
||||
{t('dashboard.rating')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Stack spacing={3}>
|
||||
{filteredAndSortedRated.length === 0 ? (
|
||||
@@ -323,7 +325,7 @@ const Dashboard: React.FC = () => {
|
||||
transition: 'border-color 0.2s',
|
||||
'&:hover': { borderColor: 'primary.main' }
|
||||
}}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<CardContent sx={{ p: { xs: 2, sm: 3 } }}>
|
||||
{editingRatingId === rating.id ? (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>{t('dashboard.editingReview', { flavor: rating.flavor_name })}</Typography>
|
||||
@@ -431,55 +433,57 @@ const Dashboard: React.FC = () => {
|
||||
{activeTab === 1 && (
|
||||
<Box>
|
||||
{/* Filter Controls for Explore */}
|
||||
<Grid container spacing={2} sx={{ mb: 4, alignItems: 'center' }}>
|
||||
<Grid size={{ xs: 12, md: 4, lg: 5 }}>
|
||||
<TextField
|
||||
fullWidth size="small" placeholder={t('dashboard.searchMissing')}
|
||||
value={exploreSearch} onChange={e => setExploreSearch(e.target.value)}
|
||||
slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 1,
|
||||
'& .MuiOutlinedInput-root': { borderRadius: 1, height: 44 }
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
|
||||
<Stack direction="row" spacing={1} sx={{ overflowX: 'auto', py: 0.5, px: 0.5, '&::-webkit-scrollbar': { display: 'none' } }}>
|
||||
{exploreCategories.map(cat => (
|
||||
<Chip
|
||||
key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.missing_flavors.find(f => f.category_name === cat)?.category_slug}`, { defaultValue: cat })}
|
||||
onClick={() => setExploreCategory(cat)}
|
||||
color={exploreCategory === cat ? 'primary' : 'default'}
|
||||
variant={exploreCategory === cat ? 'filled' : 'outlined'}
|
||||
sx={{ fontWeight: 'bold', height: 36, px: 0.5, borderRadius: 1, fontSize: '0.85rem' }}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Grid container spacing={{ xs: 2, lg: 1.5 }} alignItems="center">
|
||||
<Grid size={{ xs: 12, lg: 4, xl: 5 }}>
|
||||
<TextField
|
||||
fullWidth size="small" placeholder={t('dashboard.searchMissing')}
|
||||
value={exploreSearch} onChange={e => setExploreSearch(e.target.value)}
|
||||
slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 1,
|
||||
'& .MuiOutlinedInput-root': { borderRadius: 1, height: { xs: 48, lg: 40 } }
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, lg: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
|
||||
<Box sx={{ display: 'flex', gap: 1, overflowX: 'auto', py: 0.5, px: 0.2, '&::-webkit-scrollbar': { display: 'none' } }}>
|
||||
{exploreCategories.map(cat => (
|
||||
<Chip
|
||||
key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.missing_flavors.find(f => f.category_name === cat)?.category_slug}`, { defaultValue: cat })}
|
||||
onClick={() => setExploreCategory(cat)}
|
||||
color={exploreCategory === cat ? 'primary' : 'default'}
|
||||
variant={exploreCategory === cat ? 'filled' : 'outlined'}
|
||||
sx={{ fontWeight: 'bold', height: { xs: 36, lg: 32 }, borderRadius: 1, fontSize: '0.8rem', flexShrink: 0 }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 'auto' }}>
|
||||
<Stack direction="row" spacing={0.5} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: 44, width: { xs: '100%', md: 'auto' } }}>
|
||||
<Button
|
||||
fullWidth={isMobile}
|
||||
size="small" variant={exploreSort === 'community' ? 'contained' : 'text'}
|
||||
onClick={() => setExploreSort('community')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, px: 2, fontSize: '0.85rem' }}
|
||||
>
|
||||
{t('dashboard.communityRating')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth={isMobile}
|
||||
size="small" variant={exploreSort === 'circle' ? 'contained' : 'text'}
|
||||
onClick={() => setExploreSort('circle')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, px: 2, fontSize: '0.85rem' }}
|
||||
>
|
||||
{t('dashboard.circleRating')}
|
||||
</Button>
|
||||
</Stack>
|
||||
<Grid size={{ xs: 12, lg: 'auto' }}>
|
||||
<Box sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: { xs: 48, lg: 40 }, display: 'flex', gap: 0.5 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small" variant={exploreSort === 'community' ? 'contained' : 'text'}
|
||||
onClick={() => setExploreSort('community')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, px: 2, fontSize: '0.8rem' }}
|
||||
>
|
||||
{t('dashboard.communityRating')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small" variant={exploreSort === 'circle' ? 'contained' : 'text'}
|
||||
onClick={() => setExploreSort('circle')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, px: 2, fontSize: '0.8rem' }}
|
||||
>
|
||||
{t('dashboard.circleRating')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{filteredMissing.length === 0 ? (
|
||||
<Box sx={{ py: 10, textAlign: 'center' }}>
|
||||
@@ -488,7 +492,7 @@ const Dashboard: React.FC = () => {
|
||||
) : (
|
||||
<Grid container spacing={2}>
|
||||
{filteredMissing.map(flavor => (
|
||||
<Grid key={flavor.id} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<Grid key={flavor.id} size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
<Card elevation={0} sx={{
|
||||
height: '100%', borderRadius: 1.5, border: '1px solid', borderColor: 'divider',
|
||||
transition: 'all 0.2s ease', '&:hover': { transform: 'translateY(-4px)', borderColor: 'primary.main', boxShadow: 4 },
|
||||
|
||||
@@ -258,7 +258,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
}
|
||||
}} />
|
||||
|
||||
<CardContent sx={{ pt: 0, px: { xs: 2, md: 5 }, pb: 4 }}>
|
||||
<CardContent sx={{ pt: 0, px: { xs: 2, md: 5 }, pb: { xs: 2, md: 4 } }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'center', sm: 'flex-end' }, gap: { xs: 2, sm: 4 } }}>
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
@@ -427,7 +427,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{items.map((rating: Rating) => (
|
||||
<Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2.4 }}>
|
||||
<Grid key={rating.id} size={{ xs: 6, sm: 4, lg: 2.4 }}>
|
||||
<Card sx={{
|
||||
height: '100%', borderRadius: 1, border: '1px solid', borderColor: 'divider',
|
||||
bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
|
||||
@@ -555,7 +555,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
<Grid size={12}><Typography variant="h6" color="text.secondary" sx={{ py: 12, textAlign: 'center', fontWeight: 'bold' }}>No followers yet.</Typography></Grid>
|
||||
) : (
|
||||
data.followers.map(user => (
|
||||
<Grid key={user.id} size={{ xs: 12, sm: 6, md: 4 }}>
|
||||
<Grid key={user.id} size={{ xs: 12, sm: 6, lg: 4 }}>
|
||||
<Card sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s ease', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)' } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', p: 2, gap: 2 }}>
|
||||
<Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 56, height: 56, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
|
||||
@@ -588,7 +588,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
<Grid size={12}><Typography variant="h6" color="text.secondary" sx={{ py: 12, textAlign: 'center', fontWeight: 'bold' }}>Not following anyone yet.</Typography></Grid>
|
||||
) : (
|
||||
data.following.map(user => (
|
||||
<Grid key={user.id} size={{ xs: 12, sm: 6, md: 4 }}>
|
||||
<Grid key={user.id} size={{ xs: 12, sm: 6, lg: 4 }}>
|
||||
<Card sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s ease', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)' } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', p: 2, gap: 2 }}>
|
||||
<Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 56, height: 56, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
|
||||
|
||||
@@ -208,7 +208,7 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{/* Left Column: Visuals & Language */}
|
||||
<Grid size={{ xs: 12, md: 5 }}>
|
||||
<Grid size={{ xs: 12, lg: 5 }}>
|
||||
<Paper sx={{ p: 3, mb: 4, borderRadius: 3, '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 } }}>
|
||||
<Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>{t('settings.appearanceTitle')}</Typography>
|
||||
<FormControl fullWidth margin="normal">
|
||||
@@ -272,7 +272,7 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
|
||||
</Grid>
|
||||
|
||||
{/* Right Column: Account Info & Security */}
|
||||
<Grid size={{ xs: 12, md: 7 }}>
|
||||
<Grid size={{ xs: 12, lg: 7 }}>
|
||||
<Paper sx={{ p: 3, mb: 4, borderRadius: 3, '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 } }}>
|
||||
<Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>{t('settings.infoTitle')}</Typography>
|
||||
<form onSubmit={handleUpdateProfile}>
|
||||
|
||||
@@ -229,7 +229,7 @@ const FlavorDetail: React.FC<FlavorDetailProps> = ({ adminMode }) => {
|
||||
{/* Main Content Grid */}
|
||||
<Grid container spacing={4}>
|
||||
{/* Left: Product Info Card */}
|
||||
<Grid size={{ xs: 12, md: 5, lg: 4 }}>
|
||||
<Grid size={{ xs: 12, lg: 4 }}>
|
||||
<Box sx={{ position: { md: 'sticky' }, top: 100 }}>
|
||||
<Card elevation={0} sx={{
|
||||
borderRadius: 4,
|
||||
@@ -324,7 +324,7 @@ const FlavorDetail: React.FC<FlavorDetailProps> = ({ adminMode }) => {
|
||||
</Grid>
|
||||
|
||||
{/* Right: Ratings & Comments */}
|
||||
<Grid size={{ xs: 12, md: 7, lg: 8 }}>
|
||||
<Grid size={{ xs: 12, lg: 8 }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: '800', mb: 1 }}>Ratings & Comments</Typography>
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
|
||||
Reference in new issue
Block a user