From 6d0f41c5e17cfaa219badc3362336de4953241a6 Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Thu, 5 Dec 2024 12:21:43 +0300
Subject: [PATCH] Design fixes

---
 .../containers/FixedHeader/FixedHeader.scss   | 35 ++++++++++++-------
 .../containers/FixedHeader/FixedHeader.tsx    | 12 +++----
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss b/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss
index ebc1433751..71ad5f00a9 100644
--- a/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss
+++ b/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss
@@ -20,12 +20,14 @@
 }
 
 .dash-fixed-header {
+    $class: &;
+
     $fixed-header-background: var(
         --dl-color-fixed-header-background,
         var(--g-color-base-simple-hover-solid)
     );
 
-    $dash-inline-padding: var(--g-spacing-6);
+    --dash-inline-padding: var(--g-spacing-6);
 
     margin-bottom: 20px;
 
@@ -34,7 +36,7 @@
             position: fixed;
             top: 40px;
 
-            margin-inline: calc(-1 * $dash-inline-padding);
+            margin-inline: calc(-1 * var(--dash-inline-padding));
             z-index: 10;
             max-height: calc(100vh - 40px);
 
@@ -43,10 +45,10 @@
             display: flex;
             flex-direction: row;
 
-            .dash-fixed-header__scrollable-container {
-                padding-inline: $dash-inline-padding;
+            #{$class}__scrollable-container {
+                padding-inline: var(--dash-inline-padding);
             }
-            .dash-fixed-header__controls-settings {
+            #{$class}__controls-settings {
                 left: 0;
             }
         }
@@ -56,6 +58,22 @@
         }
     }
 
+    &_hidden {
+        margin: 0;
+        height: 0;
+
+        #{$class}__controls-settings {
+            top: 0;
+        }
+    }
+
+    &__controls-settings {
+        width: 20px;
+        position: absolute;
+        left: calc(-1 * var(--dash-inline-padding));
+        top: var(--g-spacing-2);
+    }
+
     &__content {
         position: relative;
         display: flex;
@@ -81,13 +99,6 @@
         }
     }
 
-    &__controls-settings {
-        width: 20px;
-        position: absolute;
-        left: calc(-1 * $dash-inline-padding);
-        top: 0;
-    }
-
     &__container {
         display: flex;
         flex-direction: row;
diff --git a/src/ui/units/dash/containers/FixedHeader/FixedHeader.tsx b/src/ui/units/dash/containers/FixedHeader/FixedHeader.tsx
index d0a21cf78e..a3aa970f38 100644
--- a/src/ui/units/dash/containers/FixedHeader/FixedHeader.tsx
+++ b/src/ui/units/dash/containers/FixedHeader/FixedHeader.tsx
@@ -178,11 +178,10 @@ export function FixedHeaderWrapper({
     const topOffset = calculateOffset({isEmbedded, isPublic});
     const {isFixed, leftOffset, width} = useFixedHeaderRef(rootRef, topOffset);
     const style = isFixed && !editMode ? {left: leftOffset, top: topOffset, width} : {};
+
     const isRenderEmpty =
-        controlsRef.current?.children.length === 0 /* ||
-            controlsRef.current?.getBoundingClientRect().height === 0 */ &&
-        containerRef.current?.children.length === 0; /* ||
-            containerRef.current?.getBoundingClientRect().height === 0 */
+        controlsRef.current?.getBoundingClientRect().height === 0 &&
+        containerRef.current?.getBoundingClientRect().height === 0;
 
     React.useEffect(() => {
         if (isRenderEmpty) {
@@ -214,11 +213,10 @@ export function FixedHeaderWrapper({
 
     return (
         <div
-            className={b()}
+            className={b({hidden: isRenderEmpty})}
             ref={rootRef}
             style={{
-                height: isFixed ? containerHeight : undefined,
-                margin: containerHeight === 0 ? 0 : undefined,
+                height: isFixed ? containerHeight : 'auto',
             }}
         >
             <div