fixed sidebar

src/components/containers/Sticky/index.tsx

@@ -1,14 +1,16 @@
 import React, { DetailsHTMLAttributes, FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
-import StickySidebar from 'sticky-sidebar';
+
-import classnames from 'classnames';
 import ResizeSensor from 'resize-sensor';
+(window as any).ResizeSensor = ResizeSensor;
+
+import StickySidebar from 'sticky-sidebar';
+(window as any).StickySidebar = StickySidebar;
+
+import classnames from 'classnames';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {}
 
-(window as any).StickySidebar = StickySidebar;
-(window as any).ResizeSensor = ResizeSensor;
-
 const Sticky: FC<IProps> = ({ children }) => {
   const ref = useRef(null);
   const sb = useRef<StickySidebar>(null);

src/components/node/NodeBottomBlock/index.tsx

@@ -2,16 +2,16 @@ import React, { FC } from 'react';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
-import styles from '~/containers/node/NodeLayout/styles.module.scss';
 import { NodeCommentsBlock } from '~/components/node/NodeCommentsBlock';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
-import { Sticky } from '~/components/containers/Sticky';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
 import { IComment, INode } from '~/redux/types';
 import { useUser } from '~/utils/hooks/user/userUser';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import { INodeRelated } from '~/redux/node/types';
+import StickyBox from 'react-sticky-box/dist/esnext';
+import styles from './styles.module.scss';
 
 interface IProps {
   node: INode;
@@ -59,12 +59,12 @@ const NodeBottomBlock: FC<IProps> = ({
           </Group>
 
           <div className={styles.panel}>
-            <Sticky>
+            <StickyBox className={styles.sticky} offsetTop={72}>
               <Group style={{ flex: 1, minWidth: 0 }}>
                 <NodeTagsBlock node={node} isLoading={isLoading} />
                 <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />
               </Group>
-            </Sticky>
+            </StickyBox>
           </div>
         </Group>
       </Padder>

src/components/node/NodeBottomBlock/styles.module.scss

@@ -0,0 +1,48 @@
+@import "~/styles/variables.scss";
+
+.sticky {
+  width: 100%;
+}
+
+.content {
+  align-items: stretch !important;
+  @include vertical_at_tablet;
+}
+
+.comments {
+  flex: 3 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: column;
+
+  @media (max-width: 1024px) {
+    flex: 2 1;
+  }
+}
+
+
+.panel {
+  flex: 1 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-left: $gap / 2;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-top: $comment_height / 2;
+    flex: 1 2;
+  }
+}
+
+.buttons {
+  background: $node_buttons_bg;
+  flex: 1;
+  border-radius: $panel_radius;
+  box-shadow: $comment_shadow;
+}

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -75,6 +75,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
         observeParents
         resizeObserver
         watchOverflow
+        updateOnImagesReady
         onInit={resetSwiper}
         zoom
       >

src/containers/main/Container/styles.module.scss

@@ -9,4 +9,8 @@
   @include tablet {
     padding: 0;
   }
+
+  @media (max-width: $content_width + $gap * 4) {
+    padding: 0;
+  }
 }