From a292cbb2e6cd5e5c14e7fa4d69fa8a74571eda0a Mon Sep 17 00:00:00 2001
From: Wroud <wroud@yandex.ru>
Date: Sat, 4 Jun 2022 15:43:41 +0300
Subject: [PATCH] fix(core-blocks): slide box styles on small creen

---
 webapp/packages/core-blocks/src/Slide/SlideBox.tsx      | 2 +-
 webapp/packages/core-blocks/src/Slide/SlideBoxStyles.ts | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Slide/SlideBox.tsx b/webapp/packages/core-blocks/src/Slide/SlideBox.tsx
index 919879a13d..7a980caa60 100644
--- a/webapp/packages/core-blocks/src/Slide/SlideBox.tsx
+++ b/webapp/packages/core-blocks/src/Slide/SlideBox.tsx
@@ -30,7 +30,7 @@ export const SlideBox: React.FC<Props> = function SlideBox({ children, className
       div.addEventListener('scroll', handleScroll);
     }
 
-    return () => { 
+    return () => {
       if (div) {
         div.removeEventListener('scroll', handleScroll);
       }
diff --git a/webapp/packages/core-blocks/src/Slide/SlideBoxStyles.ts b/webapp/packages/core-blocks/src/Slide/SlideBoxStyles.ts
index 005584d6ed..b7155ee8f3 100644
--- a/webapp/packages/core-blocks/src/Slide/SlideBoxStyles.ts
+++ b/webapp/packages/core-blocks/src/Slide/SlideBoxStyles.ts
@@ -20,10 +20,11 @@ export const slideBoxStyles = css`
         vertical-align:top;
         white-space: normal;
         transition: transform cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
-        transform: translateX(calc(-100% + 120px));
+        transform: translateX(-100%);
 
         &:first-child {
-          width: calc(100% - 120px);
+          transition: width cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
+          width: 100%;
         }
       }
 
@@ -52,6 +53,10 @@ export const slideBoxStyles = css`
         }
         & SlideElement {
           transform: translateX(0%);
+
+          &:first-child {
+            width: calc(100% - 120px);
+          }
         }
       }
     }