Design fixes

datalens-tech · Dec 5, 2024 · 6d0f41c · 6d0f41c
1 parent c02ab09
commit 6d0f41c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git 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
@@ -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