From 7924c2bdd95b26442ff455578bdb15c87b9b92aa Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 6 Feb 2025 22:53:11 +0700
Subject: [PATCH 1/5] fix flow hero height

---
 src/layouts/FlowLayout/styles.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss
index 4a9bec2f..fbc432c3 100644
--- a/src/layouts/FlowLayout/styles.module.scss
+++ b/src/layouts/FlowLayout/styles.module.scss
@@ -30,7 +30,7 @@ $cols: math.div($content_width, $cell);
   min-height: 200px;
 
   @include flow_grid() {
-    grid-template-rows: 40vh;
+    grid-template-rows: min(50vh, 33cqw);
   }
 
   @include flow_breakpoint(5);

From 69c61acc416a8b36ae5d210e59ef712627f1f941 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 7 Feb 2025 01:11:12 +0700
Subject: [PATCH 2/5] make better flow cell text

---
 .../components/FlowCellMenu/index.tsx         |  3 +-
 .../components/FlowCellText/index.tsx         | 29 +++++++++++++----
 .../FlowCellText/styles.module.scss           | 12 +++++--
 .../FlowGrid/components/FlowCell/index.tsx    |  3 +-
 .../components/FlowCell/styles.module.scss    | 31 ++++++++++++-------
 src/styles/themes/_default.scss               |  6 ++--
 src/styles/themes/_horizon.scss               |  6 ++--
 7 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx
index b188e600..365a29a3 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx
+++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx
@@ -23,6 +23,7 @@ interface Props {
 
 const FlowCellMenu: FC<Props> = ({
   onClose,
+  currentView,
   hasDescription,
   toggleViewDescription,
   descriptionEnabled,
@@ -59,7 +60,7 @@ const FlowCellMenu: FC<Props> = ({
           />
         </div>
 
-        {hasDescription && (
+        {hasDescription && currentView !== 'single' && (
           <Group
             className={styles.description}
             horizontal
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/index.tsx
index e49e2822..9fcd2e75 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/index.tsx
+++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/index.tsx
@@ -1,6 +1,7 @@
 import { FC, ReactElement } from 'react';
 
 import classNames from 'classnames';
+import { transparentize, darken, desaturate, getLuminance } from 'color2k';
 
 import { Markdown } from '~/components/common/Markdown';
 import { formatText } from '~/utils/dom';
@@ -11,13 +12,29 @@ import styles from './styles.module.scss';
 interface Props extends DivProps {
   children: string;
   heading: string | ReactElement;
+  color?: string;
 }
 
-const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
-  <div {...rest} className={classNames(styles.text, rest.className)}>
-    {heading && <div className={styles.heading}>{heading}</div>}
-    <Markdown className={styles.description}>{formatText(children)}</Markdown>
-  </div>
-);
+const FlowCellText: FC<Props> = ({ children, heading, color, ...rest }) => {
+  const colorIsBright = !!color && getLuminance(color) > 0.4;
+
+  const textColor = colorIsBright
+    ? desaturate(darken(color, 0.5), 0.1)
+    : undefined;
+
+  return (
+    <div
+      {...rest}
+      className={classNames(styles.text, rest.className)}
+      style={{
+        backgroundColor: color && transparentize(color, 0.5),
+        color: textColor,
+      }}
+    >
+      {heading && <div className={styles.heading}>{heading}</div>}
+      <Markdown className={styles.description}>{formatText(children)}</Markdown>
+    </div>
+  );
+};
 
 export { FlowCellText };
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
index 7a421447..2624f594 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
+++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
@@ -1,10 +1,16 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .text {
-  padding: $gap;
+  @include blur;
+
+  padding: $gap / 2 $gap $gap $gap;
   line-height: 1.3em;
 }
 
 .heading {
-  margin-bottom: 0.4em;
+  margin-bottom: 0.25em;
+
+  h4 {
+    // line-height: 1.1em;
+  }
 }
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
index 25e9d158..ed305920 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
+++ b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
@@ -111,8 +111,9 @@ const FlowCell: FC<Props> = ({
           <FlowCellText
             className={styles.text}
             heading={<h4 className={styles.title}>{title}</h4>}
+            color={color}
           >
-            {text!}
+            {text}
           </FlowCellText>
         )}
 
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
index 511f7d4e..708196e0 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
+++ b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
@@ -33,18 +33,20 @@
 
 .text {
   position: absolute;
-  bottom: 5px;
-  left: 5px;
   z-index: 1;
   overflow: hidden;
   border-radius: $radius;
-  max-height: calc(100% - 10px);
-  max-width: calc(100% - 10px);
   box-sizing: border-box;
-  font: $font_16_regular;
+  font: $font_14_medium;
+  line-height: 1.25em;
+  inset: 50% 0 0 0;
+
+  &.bright {
+    color: var(--content_bg_lightest);
+  }
 
   @include tablet {
-    font: $font_14_regular;
+    font: $font_12_medium;
     left: 5px;
     bottom: 5px;
   }
@@ -54,14 +56,19 @@
     opacity: 0.5;
   }
 
-  .quadro &,
   .horizontal & {
-    max-width: calc(50% - 15px);
+    inset: 0 calc(50% + $gap / 2) 0 0;
+    border-radius: $radius 0 0 $radius;
   }
 
-  .quadro &,
   .vertical & {
-    max-height: calc(50% - 15px);
+    inset: calc(50% + $gap / 2) 0 0 0;
+    border-radius: 0 0 $radius $radius;
+  }
+
+  .quadro & {
+    inset: calc(50% + $gap / 2) calc(50% + $gap / 2) 0 0;
+    border-radius: 0 $radius 0 $radius;
   }
 }
 
@@ -76,11 +83,13 @@
 
 .title {
   font: $font_cell_title;
+  line-height: 1.2em;
   text-transform: uppercase;
   word-break: break-word;
+  color: inherit;
 
   @include tablet {
-    font: $font_18_semibold;
+    font: $font_16_semibold;
   }
 }
 
diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss
index dea7ea0e..ea630d2e 100644
--- a/src/styles/themes/_default.scss
+++ b/src/styles/themes/_default.scss
@@ -63,10 +63,8 @@ $_brown: #23201f;
     --content_bg_success: #{transparentize($_wisegreen, 0.7)};
     --content_bg_info: #{transparentize($_blue, 0.5)};
     --content_bg_danger: #{transparentize($_red, 0.5)};
-    --content_bg_backdrop: url('/images/noise.png') #{transparentize(
-        $_brown,
-        0.3
-      )};
+    --content_bg_backdrop: url('/images/noise.png')
+      #{transparentize($_brown, 0.3)};
     --content_bg_hero: url('/images/noise.png') #{transparentize($_brown, 0.6)};
 
     // white shades (move to --vars)
diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss
index 4707b2f8..4d36e19b 100644
--- a/src/styles/themes/_horizon.scss
+++ b/src/styles/themes/_horizon.scss
@@ -85,10 +85,8 @@ $_ocean: #25b0bc;
     --gray_90: #{transparentize(white, 0.95)};
 
     // page background
-    --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken(
-        $_cold,
-        4%
-      )} fixed;
+    --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg')
+      #{darken($_cold, 4%)} fixed;
     --page-background-top: linear-gradient(
       #{$_accent} -150%,
       #{transparentize($_ocean, 0.99)} 100px,

From b257e9b5d9855d6e9302fcbf968b8e93adf1fce6 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 7 Feb 2025 01:39:58 +0700
Subject: [PATCH 3/5] scroll to cell on flow view change

---
 src/constants/dom/index.ts                    |  2 +
 .../FlowCellText/styles.module.scss           |  4 --
 .../FlowGrid/components/FlowCell/index.tsx    | 40 ++++++++++++++-----
 .../components/FlowCell/styles.module.scss    |  7 +---
 src/containers/flow/FlowGrid/index.tsx        |  2 +-
 src/utils/dom.ts                              | 12 ++++++
 6 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/constants/dom/index.ts b/src/constants/dom/index.ts
index be18c3a4..3d9462a8 100644
--- a/src/constants/dom/index.ts
+++ b/src/constants/dom/index.ts
@@ -5,3 +5,5 @@ export const isTablet = () => {
 
   return window.innerWidth < 599;
 };
+
+export const headerHeight = 64; // px
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
index 2624f594..0a2896ab 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
+++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
@@ -9,8 +9,4 @@
 
 .heading {
   margin-bottom: 0.25em;
-
-  h4 {
-    // line-height: 1.1em;
-  }
 }
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
index ed305920..ffd837b9 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
+++ b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,6 +9,8 @@ import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
 import { FlowDisplay, INode } from '~/types';
 
+import { isFullyVisible } from '../../../../../utils/dom';
+
 import { CellShade } from './components/CellShade';
 import { FlowCellImage } from './components/FlowCellImage';
 import { FlowCellMenu } from './components/FlowCellMenu';
@@ -25,7 +27,7 @@ interface Props {
   text?: string;
   flow: FlowDisplay;
   canEdit?: boolean;
-  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
+  onChange: (id: INode['id'], flow: FlowDisplay) => void;
 }
 
 const FlowCell: FC<Props> = ({
@@ -37,7 +39,7 @@ const FlowCell: FC<Props> = ({
   text,
   title,
   canEdit = false,
-  onChangeCellView,
+  onChange,
 }) => {
   const { isTablet } = useWindowSize();
 
@@ -45,6 +47,30 @@ const FlowCell: FC<Props> = ({
     ((!!flow.display && flow.display !== 'single') || !image) &&
     flow.show_description &&
     !!text;
+
+  const {
+    isActive: isMenuActive,
+    activate,
+    ref,
+    deactivate,
+  } = useClickOutsideFocus();
+
+  const onChangeWithScroll = useCallback<typeof onChange>(
+    (...args) => {
+      onChange(...args);
+
+      setTimeout(() => {
+        if (!isFullyVisible(ref.current)) {
+          ref.current?.scrollIntoView({
+            behavior: 'auto',
+            block: 'center',
+          });
+        }
+      }, 0);
+    },
+    [onChange, ref],
+  );
+
   const {
     hasDescription,
     setViewHorizontal,
@@ -52,13 +78,7 @@ const FlowCell: FC<Props> = ({
     setViewQuadro,
     setViewSingle,
     toggleViewDescription,
-  } = useFlowCellControls(id, text, flow, onChangeCellView);
-  const {
-    isActive: isMenuActive,
-    activate,
-    ref,
-    deactivate,
-  } = useClickOutsideFocus();
+  } = useFlowCellControls(id, text, flow, onChangeWithScroll);
 
   const shadeSize = useMemo(() => {
     const min = isTablet ? 10 : 15;
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
index 708196e0..6a0fb5ac 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
+++ b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
@@ -116,12 +116,7 @@
 }
 
 .display_modal {
-  @include appear;
-
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 11;
 }
diff --git a/src/containers/flow/FlowGrid/index.tsx b/src/containers/flow/FlowGrid/index.tsx
index 637a0d00..7bed5279 100644
--- a/src/containers/flow/FlowGrid/index.tsx
+++ b/src/containers/flow/FlowGrid/index.tsx
@@ -46,7 +46,7 @@ export const FlowGrid: FC<Props> = observer(
               text={node.description}
               title={node.title}
               canEdit={fetched && isUser && canEditNode(node, user)}
-              onChangeCellView={onChangeCellView}
+              onChange={onChangeCellView}
             />
           </div>
         ))}
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index dd0b9d4d..473877d0 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -10,6 +10,7 @@ import {
   COMMENT_BLOCK_TYPES,
   ICommentBlock,
 } from '~/constants/comment';
+import { headerHeight } from '~/constants/dom';
 import { IFile, ValueOf } from '~/types';
 import { CONFIG } from '~/utils/config';
 import {
@@ -213,3 +214,14 @@ export const sizeOf = (bytes: number): string => {
     (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B'
   );
 };
+
+/** Tells if element is in view */
+export const isFullyVisible = (element?: HTMLElement): boolean => {
+  if (!element) {
+    return false;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  return rect?.top > headerHeight && rect?.bottom < window.innerHeight;
+};

From 24c66ccfdba48b17943fe611b614639a98b3be4c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 7 Feb 2025 02:42:45 +0700
Subject: [PATCH 4/5] improve cell text appearance

---
 .../FlowCellText/styles.module.scss           | 14 +++++-
 .../FlowGrid/components/FlowCell/index.tsx    |  2 +-
 .../components/FlowCell/styles.module.scss    | 43 ++++++++++++++-----
 .../flow/FlowGrid/styles.module.scss          |  6 ---
 src/styles/_fonts.scss                        | 20 ++++++---
 5 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
index 0a2896ab..6fbd4a2f 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
+++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
@@ -3,8 +3,20 @@
 .text {
   @include blur;
 
-  padding: $gap / 2 $gap $gap $gap;
   line-height: 1.3em;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.description {
+  mask-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(0, 0, 0, 0) 95%
+  );
+  flex: 1;
+  overflow: hidden;
 }
 
 .heading {
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
index ffd837b9..c83da0f1 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
+++ b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx
@@ -145,7 +145,7 @@ const FlowCell: FC<Props> = ({
           />
         )}
 
-        {!!title && (
+        {!!title && !withText && (
           <CellShade
             color={color}
             className={styles.shade}
diff --git a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
index 6a0fb5ac..c2cc2e06 100644
--- a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
+++ b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
@@ -1,5 +1,7 @@
 @import 'src/styles/variables';
 
+$compact_size: 200px;
+
 .cell {
   @include inner_shadow;
 
@@ -9,6 +11,7 @@
   width: 100%;
   height: 100%;
   background: $content_bg;
+  container: cell / inline-size;
 }
 
 .thumb {
@@ -37,18 +40,13 @@
   overflow: hidden;
   border-radius: $radius;
   box-sizing: border-box;
+  inset: 50% 0 0 0;
+  padding: $gap $gap * 1.5 0 $gap * 1.5;
   font: $font_14_medium;
   line-height: 1.25em;
-  inset: 50% 0 0 0;
 
-  &.bright {
-    color: var(--content_bg_lightest);
-  }
-
-  @include tablet {
-    font: $font_12_medium;
-    left: 5px;
-    bottom: 5px;
+  @container (max-width: $compact_size) {
+    padding: $gap / 2 $gap 0 $gap;
   }
 
   & :global(.grey) {
@@ -56,6 +54,17 @@
     opacity: 0.5;
   }
 
+  @container (max-width: #{$compact_size}) {
+    padding: $gap / 2 $gap 0 $gap;
+  }
+
+  .horizontal &,
+  .quadro & {
+    @container (max-width: #{$compact_size * 2}) {
+      padding: $gap / 2 $gap 0 $gap;
+    }
+  }
+
   .horizontal & {
     inset: 0 calc(50% + $gap / 2) 0 0;
     border-radius: $radius 0 0 $radius;
@@ -70,6 +79,10 @@
     inset: calc(50% + $gap / 2) calc(50% + $gap / 2) 0 0;
     border-radius: 0 $radius 0 $radius;
   }
+
+  .title {
+    margin-bottom: 0.1em;
+  }
 }
 
 .title_wrapper {
@@ -87,9 +100,17 @@
   text-transform: uppercase;
   word-break: break-word;
   color: inherit;
+  margin-bottom: -0.125em;
 
-  @include tablet {
-    font: $font_16_semibold;
+  @container (max-width: #{$compact_size}) {
+    font: $font_cell_title_compact;
+  }
+
+  .horizontal &,
+  .quadro & {
+    @container (max-width: #{$compact_size * 2}) {
+      font: $font_cell_title_compact;
+    }
   }
 }
 
diff --git a/src/containers/flow/FlowGrid/styles.module.scss b/src/containers/flow/FlowGrid/styles.module.scss
index ea6378f4..b3af5556 100644
--- a/src/containers/flow/FlowGrid/styles.module.scss
+++ b/src/containers/flow/FlowGrid/styles.module.scss
@@ -1,11 +1,5 @@
 @import 'src/styles/variables';
 
-@mixin mobile {
-  @media (max-width: $cell * 2) {
-    @content;
-  }
-}
-
 .cell {
   &.horizontal,
   &.quadro {
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index a7086215..8f50e794 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,4 +1,3 @@
-
 $bold: 700;
 $semibold: 600;
 $regular: 400;
@@ -6,10 +5,20 @@ $medium: 500;
 $light: 300;
 $extra_light: 200;
 
-
-$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji';
+$font:
+  Montserrat,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  'Noto Sans',
+  sans-serif,
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
+  'Noto Color Emoji';
 
 $font_48_semibold: $semibold 48px $font;
 $font_48_bold: $bold 48px $font;
@@ -39,5 +48,6 @@ $font_8_regular: $regular 8px $font;
 $font_8_semibold: $semibold 8px $font;
 
 $font_cell_title: $font_24_semibold;
+$font_cell_title_compact: $font_18_semibold;
 $font_hero_title: $bold 40px $font;
 $font_boris: $bold 72px $font;

From 9e79cba7bffb1cf340c871c77613e63f56e9302a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 7 Feb 2025 06:07:37 +0700
Subject: [PATCH 5/5] fix search appearance

---
 .../NodeHorizontalCard/styles.module.scss     |  4 +-
 src/components/common/SubTitle/index.tsx      |  8 +-
 .../common/SubTitle/styles.module.scss        | 22 ++++-
 .../node/NodeRelated/styles.module.scss       |  5 -
 .../FlowStamp/components/FlowRecent/index.tsx | 33 -------
 .../components/FlowRecent/styles.module.scss  |  7 --
 src/containers/flow/FlowStamp/index.tsx       | 99 +++++++++----------
 .../flow/FlowStamp/styles.module.scss         | 95 ++++--------------
 8 files changed, 94 insertions(+), 179 deletions(-)
 delete mode 100644 src/containers/flow/FlowStamp/components/FlowRecent/index.tsx
 delete mode 100644 src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss

diff --git a/src/components/common/NodeHorizontalCard/styles.module.scss b/src/components/common/NodeHorizontalCard/styles.module.scss
index 32007320..6eb626c4 100644
--- a/src/components/common/NodeHorizontalCard/styles.module.scss
+++ b/src/components/common/NodeHorizontalCard/styles.module.scss
@@ -27,8 +27,8 @@
   &.new {
     &::after {
       content: ' ';
-      width: 12px;
-      height: 12px;
+      width: 8px;
+      height: 8px;
       border-radius: 100%;
       background: $color_danger;
       box-shadow: $content_bg 0 0 0 5px;
diff --git a/src/components/common/SubTitle/index.tsx b/src/components/common/SubTitle/index.tsx
index ebfd8961..e24510ea 100644
--- a/src/components/common/SubTitle/index.tsx
+++ b/src/components/common/SubTitle/index.tsx
@@ -13,9 +13,11 @@ interface Props extends DivProps {
 
 const SubTitle: FC<Props> = ({ isLoading, children, ...rest }) => (
   <div {...rest} className={classNames(styles.title, rest.className)}>
-    <Placeholder active={isLoading} loading>
-      {children}
-    </Placeholder>
+    <span className={styles.name}>
+      <Placeholder active={isLoading} loading>
+        {children}
+      </Placeholder>
+    </span>
   </div>
 );
 
diff --git a/src/components/common/SubTitle/styles.module.scss b/src/components/common/SubTitle/styles.module.scss
index 98651785..c3a36b26 100644
--- a/src/components/common/SubTitle/styles.module.scss
+++ b/src/components/common/SubTitle/styles.module.scss
@@ -1,7 +1,25 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .title {
   font: $font_12_semibold;
   text-transform: uppercase;
-  opacity: 0.3;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: $gap / 2;
+  color: var(--gray_75);
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &::after {
+    content: ' ';
+    display: flex;
+    height: 2px;
+    background-color: var(--gray_90);
+    flex: 1;
+    border-radius: 2px;
+  }
 }
diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss
index 1d4de34d..7a26a31a 100644
--- a/src/components/node/NodeRelated/styles.module.scss
+++ b/src/components/node/NodeRelated/styles.module.scss
@@ -29,11 +29,6 @@
 
 .title {
   padding-left: 5px;
-
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
 }
 
 .text {
diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx b/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx
deleted file mode 100644
index f46249d0..00000000
--- a/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FC } from 'react';
-
-import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
-import { IFlowNode } from '~/types';
-
-import styles from './styles.module.scss';
-
-interface Props {
-  recent: IFlowNode[];
-  updated: IFlowNode[];
-}
-
-const FlowRecent: FC<Props> = ({ recent, updated }) => {
-  return (
-    <>
-      <div className={styles.updates}>
-        {updated &&
-          updated.map((node) => (
-            <NodeHorizontalCard node={node} key={node.id} hasNew />
-          ))}
-      </div>
-
-      <div className={styles.recent}>
-        {recent &&
-          recent.map((node) => (
-            <NodeHorizontalCard node={node} key={node.id} />
-          ))}
-      </div>
-    </>
-  );
-};
-
-export { FlowRecent };
diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss b/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss
deleted file mode 100644
index 4925f482..00000000
--- a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'src/styles/variables';
-
-.recent {
-  @container sizer (width < #{$flow_hide_recents}) {
-    display: none;
-  }
-}
diff --git a/src/containers/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx
index 3569fd7c..03f271a8 100644
--- a/src/containers/flow/FlowStamp/index.tsx
+++ b/src/containers/flow/FlowStamp/index.tsx
@@ -2,17 +2,15 @@ import { FC, FormEvent, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 
-import { Group } from '~/components/common/Group';
+import { Card } from '~/components/common/Card';
 import { Icon } from '~/components/common/Icon';
-import { Superpower } from '~/components/common/Superpower';
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
+import { SubTitle } from '~/components/common/SubTitle';
 import { InputText } from '~/components/input/InputText';
-import { Toggle } from '~/components/input/Toggle';
-import { experimentalFeatures } from '~/constants/features';
 import styles from '~/containers/flow/FlowStamp/styles.module.scss';
 import { useFlowContext } from '~/utils/providers/FlowProvider';
 import { useSearchContext } from '~/utils/providers/SearchProvider';
 
-import { FlowRecent } from './components/FlowRecent';
 import { FlowSearchResults } from './components/FlowSearchResults';
 
 interface Props {
@@ -64,60 +62,55 @@ const FlowStamp: FC<Props> = ({ isFluid, onToggleLayout }) => {
 
   return (
     <div className={styles.wrap}>
-      <form className={styles.search} onSubmit={onSearchSubmit}>
-        <InputText
-          title="Поиск"
-          value={searchText}
-          handler={setSearchText}
-          suffix={after}
-          onKeyUp={onKeyUp}
-        />
-      </form>
+      <Card className={styles.search}>
+        <form onSubmit={onSearchSubmit}>
+          <InputText
+            title="Поиск"
+            value={searchText}
+            handler={setSearchText}
+            suffix={after}
+            onKeyUp={onKeyUp}
+          />
+        </form>
+      </Card>
 
       {searchText ? (
-        <div className={styles.search_results}>
-          <div className={styles.grid}>
-            <div className={styles.label}>
-              <span className={styles.label_text}>Результаты поиска</span>
-              <span className="line" />
-            </div>
-
-            <div className={styles.items}>
-              <FlowSearchResults
-                hasMore={searchHasMore}
-                isLoading={searchIsLoading}
-                results={searchResults}
-                onLoadMore={onSearchLoadMore}
-              />
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className={styles.grid}>
-          <div className={classNames(styles.label, styles.whatsnew)}>
-            <span className={styles.label_text}>Что нового?</span>
-            <span className="line" />
-          </div>
+        <Card className={styles.grid}>
+          <SubTitle>Результаты поиска</SubTitle>
 
           <div className={styles.items}>
-            <FlowRecent updated={updates} recent={recent} />
+            <FlowSearchResults
+              hasMore={searchHasMore}
+              isLoading={searchIsLoading}
+              results={searchResults}
+              onLoadMore={onSearchLoadMore}
+            />
           </div>
-        </div>
-      )}
+        </Card>
+      ) : (
+        <Card
+          className={classNames(styles.grid, {
+            [styles.noUpdates]: !updates.length,
+          })}
+        >
+          <SubTitle>Что нового?</SubTitle>
 
-      {experimentalFeatures.liquidFlow && (
-        <Superpower>
-          <div className={styles.toggles}>
-            <Group
-              horizontal
-              onClick={onToggleLayout}
-              className={styles.fluid_toggle}
-            >
-              <Toggle value={isFluid} />
-              <div className={styles.toggles__label}>Жидкое течение</div>
-            </Group>
-          </div>
-        </Superpower>
+          {updates.length > 0 && (
+            <div className={classNames(styles.items, styles.updates)}>
+              {updates.map((node) => (
+                <NodeHorizontalCard node={node} key={node.id} hasNew />
+              ))}
+            </div>
+          )}
+
+          {recent.length > 0 && (
+            <div className={classNames(styles.items, styles.recent)}>
+              {recent.map((node) => (
+                <NodeHorizontalCard node={node} key={node.id} />
+              ))}
+            </div>
+          )}
+        </Card>
       )}
     </div>
   );
diff --git a/src/containers/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss
index 550094c3..8dd15e59 100644
--- a/src/containers/flow/FlowStamp/styles.module.scss
+++ b/src/containers/flow/FlowStamp/styles.module.scss
@@ -1,22 +1,24 @@
-@import '../../../styles/variables';
+@import '~/styles/variables';
 
 .wrap {
   display: flex;
   flex-direction: column;
   width: 100%;
-  border-radius: $radius;
+  gap: $gap;
+}
+
+.search {
+  background-color: var(--content_bg_lighter);
 }
 
 .grid {
-  @include outer_shadow();
   display: flex;
   justify-content: stretch;
   flex-direction: column;
   flex: 1;
-  border-radius: $radius;
-  position: relative;
-  background: $content_bg;
   overflow: hidden;
+  gap: $gap;
+  padding: $gap;
 
   &::after {
     content: '';
@@ -33,49 +35,25 @@
       display: none;
     }
   }
+
+  &.noUpdates {
+    @container sizer (width < #{$flow_hide_recents}) {
+      display: none;
+    }
+  }
+}
+
+.items.recent {
+  @container sizer (width < #{$flow_hide_recents}) {
+    display: none;
+    background-color: red;
+  }
 }
 
 .items {
-  padding: 0 $gap 0 $gap;
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-}
-
-.label {
-  display: flex;
-  flex-direction: row;
-  min-width: 0;
-  padding: $gap;
-  border-radius: $radius;
-
-  @include title_with_line();
-
-  color: transparentize(white, $amount: 0.8);
-
-  &_search {
-    color: white;
-    padding-left: $gap * 1.2;
-  }
-
-  & > :global(.line) {
-    margin-right: $gap;
-  }
-}
-
-.label_text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.search {
-  @include outer_shadow();
-
-  background: $content_bg_lighter;
-  padding: $gap;
-  border-radius: $radius;
 }
 
 .search_icon {
@@ -89,34 +67,3 @@
   stroke-width: 0.5;
   transition: opacity 0.25s;
 }
-
-.toggles {
-  & > div {
-    padding: $gap;
-    font: $font_14_semibold;
-  }
-
-  &__label {
-    cursor: pointer;
-  }
-}
-
-.fluid_toggle {
-  @include desktop {
-    display: none;
-  }
-}
-
-.whatsnew {
-  @container sizer (width < #{$flow_hide_recents}) {
-    display: none;
-  }
-}
-
-.search_results {
-  overflow: auto;
-
-  @include tablet {
-    margin-top: $gap;
-  }
-}