use container queries in flow

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

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

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

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

src/layouts/FlowLayout/styles.module.scss

@@ -2,6 +2,19 @@
 
 @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;
@@ -14,6 +27,7 @@ $cols: math.div($content_width, $cell);
 .container {
   @include container;
   margin-top: $page_top_offset;
+  container: sizer / size;
 
   @include tablet {
     padding: 0 $gap;
@@ -22,9 +36,37 @@ $cols: math.div($content_width, $cell);
 }
 
 .grid {
-  grid-template-rows: 50vh;
+  width: 100%;
+  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 flow_grid;
+  @include breakpoint(5);
+  @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 {
@@ -52,11 +94,6 @@ $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 {
@@ -72,10 +109,4 @@ $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,14 +4,19 @@
 @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
 
-$gap: 10px;
+$target_flow_cell_width: 225px;
+$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;
@@ -33,11 +38,16 @@ $panel_size: 64px;
 $node_title_height: $panel_size;
 $upload_button_height: 52px;
 
-$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset $gray_90 0 1px;
+$shadow_depth_1:
-$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset $gray_90 0 1px;
+  transparentize(black, 0.8) 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: transparentize(black, 0.8) 0 2px,
+$node_shadow:
+  transparentize(black, 0.8) 0 2px,
   transparentize(black, 0.8) 0 2px 4px;
 
 $tag_height: 26px;