From 212484d06290d2d46e86a7fdc011fa4a5fe00c92 Mon Sep 17 00:00:00 2001
From: "@kirill.komarov" <kirill.komarov@stecpoint.ru>
Date: Mon, 11 May 2026 20:20:36 +0500
Subject: [PATCH] deploy

---
 .../catalog-slider/ui/CatalogSlider.tsx       | 93 +++++++++++--------
 1 file changed, 53 insertions(+), 40 deletions(-)

diff --git a/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx b/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
index 1b55638..7180f42 100644
--- a/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
+++ b/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
@@ -46,53 +46,66 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
           bgcolor: 'action.hover',
         }}
       >
-        {slides.map((slide, i) => (
-          <Box
-            key={slide.id}
-            sx={{
-              position: 'absolute',
-              inset: 0,
-              opacity: i === index ? 1 : 0,
-              transition: 'opacity 0.75s ease-in-out',
-              pointerEvents: 'none',
-            }}
-          >
+        {slides.map((slide, i) => {
+          const captionText = String(slide.caption ?? '')
+            .trim()
+            .replace(/\u00a0/g, ' ')
+          return (
             <Box
-              component="img"
-              src={slide.url}
-              alt=""
-              loading={i === 0 ? 'eager' : 'lazy'}
+              key={slide.id}
               sx={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'cover',
-                display: 'block',
+                position: 'absolute',
+                inset: 0,
+                opacity: i === index ? 1 : 0,
+                transition: 'opacity 0.75s ease-in-out',
+                pointerEvents: 'none',
               }}
-            />
-            {slide.caption.trim() ? (
+            >
               <Box
+                component="img"
+                src={slide.url}
+                alt={captionText || 'Слайд каталога'}
+                loading={i === 0 ? 'eager' : 'lazy'}
                 sx={{
                   position: 'absolute',
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  px: 2,
-                  pt: 4,
-                  pb: slides.length > 1 ? 5 : 2,
-                  background: 'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, transparent 100%)',
+                  inset: 0,
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                  display: 'block',
+                  zIndex: 0,
                 }}
-              >
-                <Typography
-                  color="common.white"
-                  variant="subtitle1"
-                  sx={{ fontWeight: 700, textShadow: '0 1px 4px rgba(0,0,0,0.6)' }}
+              />
+              {captionText ? (
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: slides.length > 1 ? 20 : 0,
+                    zIndex: 4,
+                    pt: 4,
+                    pb: slides.length > 1 ? 2 : 2,
+                    //    background: 'linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)',
+                  }}
                 >
-                  {slide.caption.trim()}
-                </Typography>
-              </Box>
-            ) : null}
-          </Box>
-        ))}
+                  <Typography
+                    color="common.white"
+                    variant="subtitle1"
+                    sx={{
+                      fontWeight: 700,
+                      textShadow: '0 1px 4px rgba(0,0,0,0.75)',
+                      textAlign: 'center',
+                      fontSize: { xs: '1.25rem', sm: '1.5rem' },
+                    }}
+                  >
+                    {captionText}
+                  </Typography>
+                </Box>
+              ) : null}
+            </Box>
+          )
+        })}
 
         {slides.length > 1 && (
           <Stack
@@ -103,7 +116,7 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
               bottom: 12,
               left: '50%',
               transform: 'translateX(-50%)',
-              zIndex: 2,
+              zIndex: 3,
               px: 1,
               py: 0.5,
               borderRadius: 2,