src/components/common/NodeHorizontalCard/index.tsx

@@ -22,11 +22,7 @@ const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => (
   <Anchor
     key={node.id}
     className={styles.item}
-    href={
+    href={getNewCommentAnchor(URLS.NODE_URL(node.id))}
-      hasNew
-        ? getNewCommentAnchor(URLS.NODE_URL(node.id))
-        : URLS.NODE_URL(node.id)
-    }
     onClick={onClick}
   >
     <div

src/components/notifications/NotificationComment/index.tsx

@@ -20,7 +20,7 @@ interface NotificationCommentProps {
 
 const NotificationComment: FC<NotificationCommentProps> = ({ item, isNew }) => (
   <Anchor
-    href={getCommentAnchor(item.url, item.itemId)}
+    href={isNew ? getCommentAnchor(item.url, item.itemId) : item.url}
     className={styles.link}
   >
     <div className={classNames(styles.message, { [styles.new]: isNew })}>

src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss

@@ -1,7 +1,11 @@
-@import 'src/styles/variables';
+@import "src/styles/variables";
 
 .recent {
-  @container sizer (width < #{$flow_hide_recents}) {
+  @media (max-width: $flow_hide_recents) {
     display: none;
   }
 }
+
+.updates {
+
+}

src/containers/flow/FlowStamp/styles.module.scss

@@ -108,7 +108,7 @@
 }
 
 .whatsnew {
-  @container sizer (width < #{$flow_hide_recents}) {
+  @media (max-width: $flow_hide_recents) {
     display: none;
   }
 }

src/containers/node/NodeComments/index.tsx

@@ -68,7 +68,6 @@ const NodeComments: FC<Props> = observer(({ order }) => {
     return null;
   }
 
-  /** Scrolls down to new comments or specific one from anchor */
   useEffect(() => {
     const anchor = location.hash?.replace('#', '');
 

src/layouts/FlowLayout/styles.module.scss

@@ -2,19 +2,6 @@
 
 @import 'src/styles/variables';
 
-$target_flow_cell_width: 225px;
-
-/** Makes a breakpoint for target cell width **/
-@mixin breakpoint($columns) {
-  @container sizer (max-width: #{$target_flow_cell_width* $columns}) {
-    grid-template-columns: repeat(#{$columns}, 1fr);
-    grid-auto-rows: calc(
-      (100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
-    );
-    @content;
-  }
-}
-
 .wrap {
   max-width: 2000px;
   padding: 0 40px 40px 40px;
@@ -27,7 +14,6 @@ $cols: math.div($content_width, $cell);
 .container {
   @include container;
   margin-top: $page_top_offset;
-  container: sizer / size;
 
   @include tablet {
     padding: 0 $gap;
@@ -36,37 +22,9 @@ $cols: math.div($content_width, $cell);
 }
 
 .grid {
-  width: 100%;
+  grid-template-rows: 50vh;
-  min-height: 200px;
-  display: grid;
-  gap: #{$gap};
-  grid-template-columns: repeat(5, 1fr);
-  grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
-  grid-template-rows: 40vh;
-  grid-auto-flow: row dense;
 
-  @include breakpoint(5);
+  @include flow_grid;
-  @include breakpoint(4);
-  @include breakpoint(3) {
-    grid-template-rows: calc(66cqw - #{$gap}) auto;
-  }
-
-  @include breakpoint(2) {
-    grid-template-rows: calc(100cqw - #{$gap}) auto;
-  }
-
-  @container sizer (width < #{$flow_hide_recents}) {
-    .stamp {
-      grid-column-start: 1;
-      grid-row-end: span 1;
-    }
-
-    .login {
-      display: flex;
-      grid-column: 1 / 2;
-      grid-row-end: span 2;
-    }
-  }
 }
 
 .pad_last {
@@ -94,6 +52,11 @@ $cols: math.div($content_width, $cell);
   justify-content: stretch;
   overflow: hidden;
   position: relative;
+
+  @media (max-width: $flow_hide_recents) {
+    grid-column-start: 1;
+    grid-row-end: span 1;
+  }
 }
 
 .login {
@@ -109,4 +72,10 @@ $cols: math.div($content_width, $cell);
   @include desktop {
     display: none;
   }
+
+  @media (max-width: $flow_hide_recents) {
+    display: flex;
+    grid-column: 1 / 2;
+    grid-row-end: span 2;
+  }
 }

src/styles/variables.scss

@@ -4,19 +4,14 @@
 @import 'mixins';
 @import 'animations';
 
-$gap: 8px;
-
 $header_height: 64px;
 $cell: 250px;
 $fluid_cell: $cell; // smaller cell for fluid flow
 $cell_tablet: ($fluid_cell + 5) * 3 + 10; // flow breakpoint for tablet
 $cell_mobile: ($fluid_cell + 5) * 2 + 10; // flow breakpoint for mobile
+$flow_hide_recents: $cell_tablet; // breakpoint, there recents will be hidden
 
-$target_flow_cell_width: 225px;
+$gap: 10px;
-$flow_tablet_cell_count: 3;
-$flow_hide_recents: $target_flow_cell_width * $flow_tablet_cell_count +
-  ($flow_tablet_cell_count - 1) * $gap;
-
 $lab_gap: $gap * 2;
 $lab_gap_mobile: $gap * 2;
 $grid_line: 5px;
@@ -38,16 +33,11 @@ $panel_size: 64px;
 $node_title_height: $panel_size;
 $upload_button_height: 52px;
 
-$shadow_depth_1:
+$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset $gray_90 0 1px;
-  transparentize(black, 0.8) 0 1px,
+$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset $gray_90 0 1px;
-  inset $gray_90 0 1px;
-$shadow_depth_2:
-  transparentize(black, 0.8) 0 2px,
-  inset $gray_90 0 1px;
 
 $comment_shadow: $shadow_depth_2;
-$node_shadow:
+$node_shadow: transparentize(black, 0.8) 0 2px,
-  transparentize(black, 0.8) 0 2px,
   transparentize(black, 0.8) 0 2px 4px;
 
 $tag_height: 26px;