test commit

client/src/widgets/reviews-block/ui/ReviewsBlock.tsx

@@ -53,7 +53,7 @@ export function ReviewsBlock() {
       )}
       {q.isError && <Alert severity="error">Не удалось загрузить отзывы.</Alert>}
       {!q.isLoading && !q.isError && q.data && items.length === 0 && (
-        <Box sx={{ textAlign: 'center', py: 4 }}>
+        <Box sx={{ py: 4 }}>
           <Typography variant="h6" color="text.secondary" sx={{ mb: 2 }}>
             Отзывов пока нет
           </Typography>
@@ -79,8 +79,34 @@ export function ReviewsBlock() {
                   ...(zebra ? { bgcolor: 'action.hover' } : {}),
                 }}
               >
-                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                  <Stack direction="row" spacing={1.5} sx={{ minWidth: { sm: 220 }, alignItems: 'center' }}>
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'flex-start' } }}>
+                  {r.imageUrl && (
+                    <Box
+                      sx={{
+                        width: { xs: 80, sm: 80 },
+                        height: { xs: 80, sm: 80 },
+                        borderRadius: 1.5,
+                        border: 1,
+                        borderColor: 'divider',
+                        overflow: 'hidden',
+                        flexShrink: 0,
+                        alignSelf: { xs: 'flex-start', sm: 'center' },
+                      }}
+                    >
+                      <OptimizedImage
+                        src={r.imageUrl}
+                        alt="Фото к отзыву"
+                        widths={[160, 320]}
+                        sizes="80px"
+                        sx={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                        }}
+                      />
+                    </Box>
+                  )}
+                  <Stack direction="row" spacing={1.5} sx={{ minWidth: { sm: 200 }, alignItems: 'center' }}>
                     <Avatar sx={{ bgcolor: 'primary.main', color: 'primary.contrastText', fontWeight: 800 }}>
                       {initials(r.authorDisplay)}
                     </Avatar>
@@ -119,31 +145,6 @@ export function ReviewsBlock() {
                     <RichTextMessageContent value={text} tone="review" />
                   </Box>
                 </Stack>
-                {r.imageUrl && (
-                  <Box
-                    sx={{
-                      mt: 1.5,
-                      width: 120,
-                      height: 120,
-                      borderRadius: 1.5,
-                      border: 1,
-                      borderColor: 'divider',
-                      overflow: 'hidden',
-                    }}
-                  >
-                    <OptimizedImage
-                      src={r.imageUrl}
-                      alt="Фото к отзыву"
-                      widths={[320, 640]}
-                      sizes="120px"
-                      sx={{
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                      }}
-                    />
-                  </Box>
-                )}
               </Paper>
             )
           })}