From 8eb531f576dbd17841df92f24025a728ca802261 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@saxumcordis-dev.sas.yp-c.yandex.net>
Date: Tue, 8 Aug 2023 14:42:04 +0300
Subject: [PATCH 01/12] fix: long headers values

---
 src/lib/kit/components/Card/Card.scss                         | 4 ++++
 src/lib/kit/components/Layouts/Section/Section.scss           | 4 ++++
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss      | 1 +
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx       | 1 +
 4 files changed, 10 insertions(+)

diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss
index 57161988..06368e8c 100644
--- a/src/lib/kit/components/Card/Card.scss
+++ b/src/lib/kit/components/Card/Card.scss
@@ -52,6 +52,7 @@
         display: flex;
         align-items: center;
         flex-grow: 1;
+        max-width: 543px;
     }
 
     &__header-right {
@@ -67,6 +68,9 @@
         font-size: var(--yc-text-subheader-2-font-size);
         font-weight: var(--yc-text-subheader-font-weight);
         line-height: var(--yc-text-subheader-2-line-height);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     &__note {
diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss
index 2f2151f6..48e554a7 100644
--- a/src/lib/kit/components/Layouts/Section/Section.scss
+++ b/src/lib/kit/components/Layouts/Section/Section.scss
@@ -13,6 +13,7 @@ $block: '.#{$ns}section';
 
     &__header {
         margin-bottom: $normalOffset;
+        max-width: 543px;
 
         &_with-popover {
             display: flex;
@@ -23,6 +24,9 @@ $block: '.#{$ns}section';
     &__title {
         font-weight: 500;
         margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &_size_s {
             font-size: 13px;
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
index f0541afd..562373d3 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
@@ -18,6 +18,7 @@ $animationDuration: 0.3s;
     &__header {
         display: flex;
         align-items: center;
+        max-width: 543px;
 
         &-inner {
             margin-left: -13px;
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 393e9571..1d4f462f 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -103,6 +103,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                     <div className={b('header')}>
                         <Button
                             view="flat"
+                            width="auto"
                             className={b('header-inner', buttonClassName)}
                             onClick={this.handleClick}
                             qa={`${name}-accordeon-toggler`}

From 7af552145a6f8e403c2696512ce557b08aca2359 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Wed, 9 Aug 2023 17:49:56 +0300
Subject: [PATCH 02/12] fix: add long title popover to accordeon & fix
 placement usage

---
 .../SimpleVerticalAccordeon.scss              |  2 +-
 .../SimpleVerticalAccordeon.tsx               | 39 +++++++++++++------
 .../Views/MultiSelectView/MultiSelectView.tsx |  6 ++-
 .../NumberWithScaleView.tsx                   |  6 ++-
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
index 562373d3..869765dc 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
@@ -18,10 +18,10 @@ $animationDuration: 0.3s;
     &__header {
         display: flex;
         align-items: center;
-        max-width: 543px;
 
         &-inner {
             margin-left: -13px;
+            max-width: 543px;
         }
     }
 
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 1d4f462f..7401a3cb 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Popover} from '@gravity-ui/uikit';
 
 import {block} from '../../utils';
 
@@ -34,6 +34,8 @@ interface SimpleVerticalAccordeonState {
     isFirstRender: boolean;
 }
 
+const MAX_TITLE_TEXT_WIDTH = 495; /** 543px max-width - 48px of padding */
+
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
     SimpleVerticalAccordeonState
@@ -45,6 +47,7 @@ export class SimpleVerticalAccordeon extends React.Component<
     };
 
     componentRef = React.createRef<HTMLDivElement>();
+    titleRef = React.createRef<HTMLElement>();
 
     constructor(props: SimpleVerticalAccordeonProps) {
         super(props);
@@ -97,20 +100,34 @@ export class SimpleVerticalAccordeon extends React.Component<
             return null;
         }
 
+        const title = this.getTitle();
+        const titlePopoverDisabled =
+            (this.titleRef.current?.offsetWidth || 0) < MAX_TITLE_TEXT_WIDTH;
+
         return (
             Boolean(React.Children.count(children)) && (
                 <div className={b({branch: withBranchView, view: viewLayout}, className)}>
                     <div className={b('header')}>
-                        <Button
-                            view="flat"
-                            width="auto"
-                            className={b('header-inner', buttonClassName)}
-                            onClick={this.handleClick}
-                            qa={`${name}-accordeon-toggler`}
-                        >
-                            <b className={b('title', {size: titleSize})}>{this.getTitle()}</b>
-                            <Icon data={ChevronDown} className={b('chevron', {open})} size={16} />
-                        </Button>
+                        <Popover content={title} disabled={titlePopoverDisabled}>
+                            <Button
+                                view="flat"
+                                className={b('header-inner', buttonClassName)}
+                                onClick={this.handleClick}
+                                qa={`${name}-accordeon-toggler`}
+                                width="auto"
+                            >
+                                {' '}
+                                <b ref={this.titleRef} className={b('title', {size: titleSize})}>
+                                    {title}
+                                </b>
+                                <Icon
+                                    data={ChevronDown}
+                                    className={b('chevron', {open})}
+                                    size={16}
+                                />
+                            </Button>
+                        </Popover>
+
                         {this.getTooltip()}
                         {headerActionsTemplate ? headerActionsTemplate : null}
                     </div>
diff --git a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
index a0495468..d2ce25a2 100644
--- a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
+++ b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover} from '@gravity-ui/uikit';
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {ArrayView} from '../../../../core';
 import {block} from '../../../utils';
@@ -9,6 +9,8 @@ import './MultiSelectView.scss';
 
 const b = block('multiselect-view');
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
 export const MultiSelectView: ArrayView = ({spec, value = []}) => {
     const _value = value as string[];
 
@@ -21,7 +23,7 @@ export const MultiSelectView: ArrayView = ({spec, value = []}) => {
         <React.Fragment>
             {items.map((item) => (
                 <Popover
-                    placement={['bottom', 'top']}
+                    placement={POPOVER_PLACEMENT}
                     key={item}
                     content={item}
                     className={b('tooltip-container')}
diff --git a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
index 74bbd0fc..4d5dcd23 100644
--- a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
+++ b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover} from '@gravity-ui/uikit';
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {StringViewProps} from '../../../../core';
 import {block, isCorrectSizeParams} from '../../../utils';
@@ -10,6 +10,8 @@ import './NumberWithScaleView.scss';
 
 const b = block('number-with-scale-view');
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
 const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     const {initialValue, initialType} = useInitial(value || '', spec, [value]);
     const {scale} = spec.viewSpec.sizeParams!;
@@ -17,7 +19,7 @@ const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     return (
         <div className={b()}>
             <Popover
-                placement={['bottom', 'top']}
+                placement={POPOVER_PLACEMENT}
                 content={initialValue}
                 className={b('tooltip-container')}
                 contentClassName={b('tooltip')}

From c229b1f11ee2f28353f8f331e47a2e4aa99b6d55 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Wed, 9 Aug 2023 18:34:45 +0300
Subject: [PATCH 03/12] fix: add long title popover to card & section

---
 src/lib/kit/components/Card/Card.scss         |  2 +-
 src/lib/kit/components/Card/Card.tsx          | 20 +++++++++---
 .../components/Layouts/Section/Section.scss   |  2 +-
 .../components/Layouts/Section/Section.tsx    | 32 ++++++++++++++-----
 .../SimpleVerticalAccordeon.tsx               |  9 ++++--
 5 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss
index 06368e8c..334ea9ed 100644
--- a/src/lib/kit/components/Card/Card.scss
+++ b/src/lib/kit/components/Card/Card.scss
@@ -52,7 +52,6 @@
         display: flex;
         align-items: center;
         flex-grow: 1;
-        max-width: 543px;
     }
 
     &__header-right {
@@ -71,6 +70,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        max-width: 533px;
     }
 
     &__note {
diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 410b16ba..06906867 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {block} from '../../utils';
@@ -24,6 +24,9 @@ export interface CardProps {
     checkEmptyBody?: boolean;
 }
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+const MAX_TITLE_WIDTH = 543;
+
 export const Card: React.FC<CardProps> = ({
     name,
     title: propsTitle,
@@ -37,6 +40,7 @@ export const Card: React.FC<CardProps> = ({
     children,
 }) => {
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const titleRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
     const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
 
@@ -66,14 +70,18 @@ export const Card: React.FC<CardProps> = ({
         [],
     );
 
+    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+
     const title = React.useMemo(() => {
         if (_.isString(propsTitle)) {
             return (
                 <React.Fragment>
-                    <div className={b('title')}>{propsTitle}</div>
+                    <Popover content={propsTitle} disabled={titlePopoverDisabled}>
+                        <div className={b('title')}>{propsTitle}</div>
+                    </Popover>
                     {description ? (
                         <div className={b('note')}>
-                            <HelpPopover htmlContent={description} placement={['bottom', 'top']} />
+                            <HelpPopover htmlContent={description} placement={POPOVER_PLACEMENT} />
                         </div>
                     ) : null}
                 </React.Fragment>
@@ -81,7 +89,7 @@ export const Card: React.FC<CardProps> = ({
         }
 
         return propsTitle;
-    }, [propsTitle, description]);
+    }, [propsTitle, titlePopoverDisabled, description]);
 
     React.useEffect(() => {
         if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
@@ -112,7 +120,9 @@ export const Card: React.FC<CardProps> = ({
                 className={b('header', {interactive: Boolean(handleHeaderToggle)})}
                 onClick={handleHeaderToggle}
             >
-                <div className={b('header-left')}>{title}</div>
+                <div ref={titleRef} className={b('header-left')}>
+                    {title}
+                </div>
                 <div className={b('header-right')} onClick={preventEvent}>
                     {actions ? <div className={b('actions')}>{actions}</div> : null}
                     {alwaysOpen ? null : (
diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss
index 48e554a7..8653c4bd 100644
--- a/src/lib/kit/components/Layouts/Section/Section.scss
+++ b/src/lib/kit/components/Layouts/Section/Section.scss
@@ -13,7 +13,6 @@ $block: '.#{$ns}section';
 
     &__header {
         margin-bottom: $normalOffset;
-        max-width: 543px;
 
         &_with-popover {
             display: flex;
@@ -22,6 +21,7 @@ $block: '.#{$ns}section';
     }
 
     &__title {
+        max-width: 533px;
         font-weight: 500;
         margin: 0;
         white-space: nowrap;
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 0d3fbfdb..751698e5 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
 import {ErrorWrapper} from '../../../';
 import {
-    FieldRenderProps,
-    FieldValue,
-    FormValue,
-    LayoutProps,
-    Spec,
-    ViewLayoutProps,
+    type FieldRenderProps,
+    type FieldValue,
+    type FormValue,
+    type LayoutProps,
+    type Spec,
+    type ViewLayoutProps,
     isArraySpec,
     isObjectSpec,
 } from '../../../../core';
@@ -27,6 +28,9 @@ interface SectionProps {
     descriptionAsSubtitle?: boolean;
 }
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+const MAX_TITLE_WIDTH = 543;
+
 const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
     name,
     spec,
@@ -39,6 +43,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
 }: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & SectionProps) => {
     const meta = (restProps as FieldRenderProps<D>).meta as FieldRenderProps<D>['meta'] | undefined;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
+    const titleRef = React.useRef<HTMLHeadingElement>(null);
     let content = children;
 
     if (meta) {
@@ -76,15 +81,26 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
         }
     }
 
+    const layoutTitle = spec.viewSpec.layoutTitle;
+    const layoutTitlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+
     return (
         <section className={b()}>
-            {spec.viewSpec.layoutTitle ? (
+            {layoutTitle ? (
                 <div
                     className={b('header', {
                         'with-popover': !descriptionAsSubtitle,
                     })}
                 >
-                    <h2 className={b('title', {size: titleSize})}>{spec.viewSpec.layoutTitle}</h2>
+                    <Popover
+                        content={layoutTitle}
+                        placement={POPOVER_PLACEMENT}
+                        disabled={layoutTitlePopoverDisabled}
+                    >
+                        <h2 className={b('title', {size: titleSize})} ref={titleRef}>
+                            {layoutTitle}
+                        </h2>
+                    </Popover>
                     {description}
                 </div>
             ) : null}
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 7401a3cb..f7cd80ad 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon, Popover} from '@gravity-ui/uikit';
+import {Button, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {block} from '../../utils';
 
@@ -35,6 +35,7 @@ interface SimpleVerticalAccordeonState {
 }
 
 const MAX_TITLE_TEXT_WIDTH = 495; /** 543px max-width - 48px of padding */
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
 
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
@@ -108,7 +109,11 @@ export class SimpleVerticalAccordeon extends React.Component<
             Boolean(React.Children.count(children)) && (
                 <div className={b({branch: withBranchView, view: viewLayout}, className)}>
                     <div className={b('header')}>
-                        <Popover content={title} disabled={titlePopoverDisabled}>
+                        <Popover
+                            content={title}
+                            disabled={titlePopoverDisabled}
+                            placement={POPOVER_PLACEMENT}
+                        >
                             <Button
                                 view="flat"
                                 className={b('header-inner', buttonClassName)}

From 64db05ee95bddaba83088fb894d14b584eb3068f Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Wed, 9 Aug 2023 18:36:06 +0300
Subject: [PATCH 04/12] fix: constants

---
 src/lib/kit/components/Card/Card.tsx               | 2 +-
 src/lib/kit/components/Layouts/Section/Section.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 06906867..90f3bb32 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -25,7 +25,7 @@ export interface CardProps {
 }
 
 const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 543;
+const MAX_TITLE_WIDTH = 533;
 
 export const Card: React.FC<CardProps> = ({
     name,
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 751698e5..0ac8f809 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -29,7 +29,7 @@ interface SectionProps {
 }
 
 const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 543;
+const MAX_TITLE_WIDTH = 533;
 
 const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
     name,

From 807997e3e2776b5c13a4b6a377ef6fed366fb54d Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Thu, 10 Aug 2023 14:09:56 +0300
Subject: [PATCH 05/12] fix: review updates

---
 src/lib/kit/components/Card/Card.tsx          | 27 +++++++++++--------
 .../components/Layouts/Section/Section.tsx    | 24 ++++++++---------
 .../SimpleVerticalAccordeon.scss              |  2 +-
 .../SimpleVerticalAccordeon.tsx               | 11 ++++----
 .../Views/MultiSelectView/MultiSelectView.tsx |  6 ++---
 .../NumberWithScaleView.tsx                   |  6 ++---
 src/lib/kit/constants/common.ts               |  5 ++++
 src/lib/kit/constants/index.ts                |  1 +
 8 files changed, 43 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/kit/constants/common.ts

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 90f3bb32..0f8e0373 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants';
 import {block} from '../../utils';
 
 import './Card.scss';
@@ -24,9 +25,6 @@ export interface CardProps {
     checkEmptyBody?: boolean;
 }
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 533;
-
 export const Card: React.FC<CardProps> = ({
     name,
     title: propsTitle,
@@ -70,18 +68,27 @@ export const Card: React.FC<CardProps> = ({
         [],
     );
 
-    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH;
 
     const title = React.useMemo(() => {
         if (_.isString(propsTitle)) {
             return (
                 <React.Fragment>
-                    <Popover content={propsTitle} disabled={titlePopoverDisabled}>
-                        <div className={b('title')}>{propsTitle}</div>
+                    <Popover
+                        content={propsTitle}
+                        disabled={titlePopoverDisabled}
+                        placement={COMMON_POPOVER_PLACEMENT}
+                    >
+                        <div ref={titleRef} className={b('title')}>
+                            {propsTitle}
+                        </div>
                     </Popover>
                     {description ? (
                         <div className={b('note')}>
-                            <HelpPopover htmlContent={description} placement={POPOVER_PLACEMENT} />
+                            <HelpPopover
+                                htmlContent={description}
+                                placement={COMMON_POPOVER_PLACEMENT}
+                            />
                         </div>
                     ) : null}
                 </React.Fragment>
@@ -120,9 +127,7 @@ export const Card: React.FC<CardProps> = ({
                 className={b('header', {interactive: Boolean(handleHeaderToggle)})}
                 onClick={handleHeaderToggle}
             >
-                <div ref={titleRef} className={b('header-left')}>
-                    {title}
-                </div>
+                <div className={b('header-left')}>{title}</div>
                 <div className={b('header-right')} onClick={preventEvent}>
                     {actions ? <div className={b('actions')}>{actions}</div> : null}
                     {alwaysOpen ? null : (
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 0ac8f809..090ffe13 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
-import {ErrorWrapper} from '../../../';
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper} from '../../../';
 import {
-    type FieldRenderProps,
-    type FieldValue,
-    type FormValue,
-    type LayoutProps,
-    type Spec,
-    type ViewLayoutProps,
+    FieldRenderProps,
+    FieldValue,
+    FormValue,
+    LayoutProps,
+    Spec,
+    ViewLayoutProps,
     isArraySpec,
     isObjectSpec,
 } from '../../../../core';
@@ -28,9 +28,6 @@ interface SectionProps {
     descriptionAsSubtitle?: boolean;
 }
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 533;
-
 const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
     name,
     spec,
@@ -82,7 +79,8 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
     }
 
     const layoutTitle = spec.viewSpec.layoutTitle;
-    const layoutTitlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+    const layoutTitlePopoverDisabled =
+        (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH;
 
     return (
         <section className={b()}>
@@ -94,7 +92,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
                 >
                     <Popover
                         content={layoutTitle}
-                        placement={POPOVER_PLACEMENT}
+                        placement={COMMON_POPOVER_PLACEMENT}
                         disabled={layoutTitlePopoverDisabled}
                     >
                         <h2 className={b('title', {size: titleSize})} ref={titleRef}>
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
index 869765dc..e0d83dce 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
@@ -21,7 +21,7 @@ $animationDuration: 0.3s;
 
         &-inner {
             margin-left: -13px;
-            max-width: 543px;
+            max-width: 533px;
         }
     }
 
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index f7cd80ad..dff40a96 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Button, Icon, Popover} from '@gravity-ui/uikit';
 
+import {COMMON_POPOVER_PLACEMENT} from '../../constants';
 import {block} from '../../utils';
 
 import './SimpleVerticalAccordeon.scss';
@@ -34,8 +35,7 @@ interface SimpleVerticalAccordeonState {
     isFirstRender: boolean;
 }
 
-const MAX_TITLE_TEXT_WIDTH = 495; /** 543px max-width - 48px of padding */
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
 
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
@@ -103,7 +103,7 @@ export class SimpleVerticalAccordeon extends React.Component<
 
         const title = this.getTitle();
         const titlePopoverDisabled =
-            (this.titleRef.current?.offsetWidth || 0) < MAX_TITLE_TEXT_WIDTH;
+            (this.titleRef.current?.offsetWidth || 0) <= TITLE_TEXT_MAX_WIDTH;
 
         return (
             Boolean(React.Children.count(children)) && (
@@ -112,7 +112,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                         <Popover
                             content={title}
                             disabled={titlePopoverDisabled}
-                            placement={POPOVER_PLACEMENT}
+                            placement={COMMON_POPOVER_PLACEMENT}
                         >
                             <Button
                                 view="flat"
@@ -121,7 +121,6 @@ export class SimpleVerticalAccordeon extends React.Component<
                                 qa={`${name}-accordeon-toggler`}
                                 width="auto"
                             >
-                                {' '}
                                 <b ref={this.titleRef} className={b('title', {size: titleSize})}>
                                     {title}
                                 </b>
diff --git a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
index d2ce25a2..a0495468 100644
--- a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
+++ b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 import {ArrayView} from '../../../../core';
 import {block} from '../../../utils';
@@ -9,8 +9,6 @@ import './MultiSelectView.scss';
 
 const b = block('multiselect-view');
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-
 export const MultiSelectView: ArrayView = ({spec, value = []}) => {
     const _value = value as string[];
 
@@ -23,7 +21,7 @@ export const MultiSelectView: ArrayView = ({spec, value = []}) => {
         <React.Fragment>
             {items.map((item) => (
                 <Popover
-                    placement={POPOVER_PLACEMENT}
+                    placement={['bottom', 'top']}
                     key={item}
                     content={item}
                     className={b('tooltip-container')}
diff --git a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
index 4d5dcd23..74bbd0fc 100644
--- a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
+++ b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 import {StringViewProps} from '../../../../core';
 import {block, isCorrectSizeParams} from '../../../utils';
@@ -10,8 +10,6 @@ import './NumberWithScaleView.scss';
 
 const b = block('number-with-scale-view');
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-
 const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     const {initialValue, initialType} = useInitial(value || '', spec, [value]);
     const {scale} = spec.viewSpec.sizeParams!;
@@ -19,7 +17,7 @@ const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     return (
         <div className={b()}>
             <Popover
-                placement={POPOVER_PLACEMENT}
+                placement={['bottom', 'top']}
                 content={initialValue}
                 className={b('tooltip-container')}
                 contentClassName={b('tooltip')}
diff --git a/src/lib/kit/constants/common.ts b/src/lib/kit/constants/common.ts
new file mode 100644
index 00000000..be8db571
--- /dev/null
+++ b/src/lib/kit/constants/common.ts
@@ -0,0 +1,5 @@
+import type {PopoverProps} from '@gravity-ui/uikit';
+
+export const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
+export const COMMON_TITLE_MAX_WIDTH = 533;
diff --git a/src/lib/kit/constants/index.ts b/src/lib/kit/constants/index.ts
index f03c2281..d69e2e4b 100644
--- a/src/lib/kit/constants/index.ts
+++ b/src/lib/kit/constants/index.ts
@@ -1 +1,2 @@
 export * from './config';
+export * from './common';

From ec3b25726fa87a746e3d58c1f1fc4664673e249e Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@saxumcordis-dev.sas.yp-c.yandex.net>
Date: Tue, 8 Aug 2023 14:42:04 +0300
Subject: [PATCH 06/12] fix: long headers values

---
 src/lib/kit/components/Card/Card.scss                         | 4 ++++
 src/lib/kit/components/Layouts/Section/Section.scss           | 4 ++++
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss      | 1 +
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx       | 1 +
 4 files changed, 10 insertions(+)

diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss
index 57161988..06368e8c 100644
--- a/src/lib/kit/components/Card/Card.scss
+++ b/src/lib/kit/components/Card/Card.scss
@@ -52,6 +52,7 @@
         display: flex;
         align-items: center;
         flex-grow: 1;
+        max-width: 543px;
     }
 
     &__header-right {
@@ -67,6 +68,9 @@
         font-size: var(--yc-text-subheader-2-font-size);
         font-weight: var(--yc-text-subheader-font-weight);
         line-height: var(--yc-text-subheader-2-line-height);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     &__note {
diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss
index 2f2151f6..48e554a7 100644
--- a/src/lib/kit/components/Layouts/Section/Section.scss
+++ b/src/lib/kit/components/Layouts/Section/Section.scss
@@ -13,6 +13,7 @@ $block: '.#{$ns}section';
 
     &__header {
         margin-bottom: $normalOffset;
+        max-width: 543px;
 
         &_with-popover {
             display: flex;
@@ -23,6 +24,9 @@ $block: '.#{$ns}section';
     &__title {
         font-weight: 500;
         margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &_size_s {
             font-size: 13px;
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
index f0541afd..562373d3 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
@@ -18,6 +18,7 @@ $animationDuration: 0.3s;
     &__header {
         display: flex;
         align-items: center;
+        max-width: 543px;
 
         &-inner {
             margin-left: -13px;
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 393e9571..1d4f462f 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -103,6 +103,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                     <div className={b('header')}>
                         <Button
                             view="flat"
+                            width="auto"
                             className={b('header-inner', buttonClassName)}
                             onClick={this.handleClick}
                             qa={`${name}-accordeon-toggler`}

From e035e1ed2440003f4f4950e3c95ada1f298f78e5 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Wed, 9 Aug 2023 17:49:56 +0300
Subject: [PATCH 07/12] fix: add long title popover to accordeon & fix
 placement usage

---
 .../SimpleVerticalAccordeon.scss              |  2 +-
 .../SimpleVerticalAccordeon.tsx               | 39 +++++++++++++------
 .../Views/MultiSelectView/MultiSelectView.tsx |  6 ++-
 .../NumberWithScaleView.tsx                   |  6 ++-
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
index 562373d3..869765dc 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
@@ -18,10 +18,10 @@ $animationDuration: 0.3s;
     &__header {
         display: flex;
         align-items: center;
-        max-width: 543px;
 
         &-inner {
             margin-left: -13px;
+            max-width: 543px;
         }
     }
 
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 1d4f462f..7401a3cb 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Popover} from '@gravity-ui/uikit';
 
 import {block} from '../../utils';
 
@@ -34,6 +34,8 @@ interface SimpleVerticalAccordeonState {
     isFirstRender: boolean;
 }
 
+const MAX_TITLE_TEXT_WIDTH = 495; /** 543px max-width - 48px of padding */
+
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
     SimpleVerticalAccordeonState
@@ -45,6 +47,7 @@ export class SimpleVerticalAccordeon extends React.Component<
     };
 
     componentRef = React.createRef<HTMLDivElement>();
+    titleRef = React.createRef<HTMLElement>();
 
     constructor(props: SimpleVerticalAccordeonProps) {
         super(props);
@@ -97,20 +100,34 @@ export class SimpleVerticalAccordeon extends React.Component<
             return null;
         }
 
+        const title = this.getTitle();
+        const titlePopoverDisabled =
+            (this.titleRef.current?.offsetWidth || 0) < MAX_TITLE_TEXT_WIDTH;
+
         return (
             Boolean(React.Children.count(children)) && (
                 <div className={b({branch: withBranchView, view: viewLayout}, className)}>
                     <div className={b('header')}>
-                        <Button
-                            view="flat"
-                            width="auto"
-                            className={b('header-inner', buttonClassName)}
-                            onClick={this.handleClick}
-                            qa={`${name}-accordeon-toggler`}
-                        >
-                            <b className={b('title', {size: titleSize})}>{this.getTitle()}</b>
-                            <Icon data={ChevronDown} className={b('chevron', {open})} size={16} />
-                        </Button>
+                        <Popover content={title} disabled={titlePopoverDisabled}>
+                            <Button
+                                view="flat"
+                                className={b('header-inner', buttonClassName)}
+                                onClick={this.handleClick}
+                                qa={`${name}-accordeon-toggler`}
+                                width="auto"
+                            >
+                                {' '}
+                                <b ref={this.titleRef} className={b('title', {size: titleSize})}>
+                                    {title}
+                                </b>
+                                <Icon
+                                    data={ChevronDown}
+                                    className={b('chevron', {open})}
+                                    size={16}
+                                />
+                            </Button>
+                        </Popover>
+
                         {this.getTooltip()}
                         {headerActionsTemplate ? headerActionsTemplate : null}
                     </div>
diff --git a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
index a0495468..d2ce25a2 100644
--- a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
+++ b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover} from '@gravity-ui/uikit';
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {ArrayView} from '../../../../core';
 import {block} from '../../../utils';
@@ -9,6 +9,8 @@ import './MultiSelectView.scss';
 
 const b = block('multiselect-view');
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
 export const MultiSelectView: ArrayView = ({spec, value = []}) => {
     const _value = value as string[];
 
@@ -21,7 +23,7 @@ export const MultiSelectView: ArrayView = ({spec, value = []}) => {
         <React.Fragment>
             {items.map((item) => (
                 <Popover
-                    placement={['bottom', 'top']}
+                    placement={POPOVER_PLACEMENT}
                     key={item}
                     content={item}
                     className={b('tooltip-container')}
diff --git a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
index 74bbd0fc..4d5dcd23 100644
--- a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
+++ b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover} from '@gravity-ui/uikit';
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {StringViewProps} from '../../../../core';
 import {block, isCorrectSizeParams} from '../../../utils';
@@ -10,6 +10,8 @@ import './NumberWithScaleView.scss';
 
 const b = block('number-with-scale-view');
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
 const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     const {initialValue, initialType} = useInitial(value || '', spec, [value]);
     const {scale} = spec.viewSpec.sizeParams!;
@@ -17,7 +19,7 @@ const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     return (
         <div className={b()}>
             <Popover
-                placement={['bottom', 'top']}
+                placement={POPOVER_PLACEMENT}
                 content={initialValue}
                 className={b('tooltip-container')}
                 contentClassName={b('tooltip')}

From 737b8c3a52514491ca0bb88c518be128df24bab1 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Wed, 9 Aug 2023 18:34:45 +0300
Subject: [PATCH 08/12] fix: add long title popover to card & section

---
 src/lib/kit/components/Card/Card.scss         |  2 +-
 src/lib/kit/components/Card/Card.tsx          | 20 +++++++++---
 .../components/Layouts/Section/Section.scss   |  2 +-
 .../components/Layouts/Section/Section.tsx    | 32 ++++++++++++++-----
 .../SimpleVerticalAccordeon.tsx               |  9 ++++--
 5 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss
index 06368e8c..334ea9ed 100644
--- a/src/lib/kit/components/Card/Card.scss
+++ b/src/lib/kit/components/Card/Card.scss
@@ -52,7 +52,6 @@
         display: flex;
         align-items: center;
         flex-grow: 1;
-        max-width: 543px;
     }
 
     &__header-right {
@@ -71,6 +70,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        max-width: 533px;
     }
 
     &__note {
diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 410b16ba..06906867 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {block} from '../../utils';
@@ -24,6 +24,9 @@ export interface CardProps {
     checkEmptyBody?: boolean;
 }
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+const MAX_TITLE_WIDTH = 543;
+
 export const Card: React.FC<CardProps> = ({
     name,
     title: propsTitle,
@@ -37,6 +40,7 @@ export const Card: React.FC<CardProps> = ({
     children,
 }) => {
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const titleRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
     const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
 
@@ -66,14 +70,18 @@ export const Card: React.FC<CardProps> = ({
         [],
     );
 
+    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+
     const title = React.useMemo(() => {
         if (_.isString(propsTitle)) {
             return (
                 <React.Fragment>
-                    <div className={b('title')}>{propsTitle}</div>
+                    <Popover content={propsTitle} disabled={titlePopoverDisabled}>
+                        <div className={b('title')}>{propsTitle}</div>
+                    </Popover>
                     {description ? (
                         <div className={b('note')}>
-                            <HelpPopover htmlContent={description} placement={['bottom', 'top']} />
+                            <HelpPopover htmlContent={description} placement={POPOVER_PLACEMENT} />
                         </div>
                     ) : null}
                 </React.Fragment>
@@ -81,7 +89,7 @@ export const Card: React.FC<CardProps> = ({
         }
 
         return propsTitle;
-    }, [propsTitle, description]);
+    }, [propsTitle, titlePopoverDisabled, description]);
 
     React.useEffect(() => {
         if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
@@ -112,7 +120,9 @@ export const Card: React.FC<CardProps> = ({
                 className={b('header', {interactive: Boolean(handleHeaderToggle)})}
                 onClick={handleHeaderToggle}
             >
-                <div className={b('header-left')}>{title}</div>
+                <div ref={titleRef} className={b('header-left')}>
+                    {title}
+                </div>
                 <div className={b('header-right')} onClick={preventEvent}>
                     {actions ? <div className={b('actions')}>{actions}</div> : null}
                     {alwaysOpen ? null : (
diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss
index 48e554a7..8653c4bd 100644
--- a/src/lib/kit/components/Layouts/Section/Section.scss
+++ b/src/lib/kit/components/Layouts/Section/Section.scss
@@ -13,7 +13,6 @@ $block: '.#{$ns}section';
 
     &__header {
         margin-bottom: $normalOffset;
-        max-width: 543px;
 
         &_with-popover {
             display: flex;
@@ -22,6 +21,7 @@ $block: '.#{$ns}section';
     }
 
     &__title {
+        max-width: 533px;
         font-weight: 500;
         margin: 0;
         white-space: nowrap;
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 0d3fbfdb..751698e5 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
 import {ErrorWrapper} from '../../../';
 import {
-    FieldRenderProps,
-    FieldValue,
-    FormValue,
-    LayoutProps,
-    Spec,
-    ViewLayoutProps,
+    type FieldRenderProps,
+    type FieldValue,
+    type FormValue,
+    type LayoutProps,
+    type Spec,
+    type ViewLayoutProps,
     isArraySpec,
     isObjectSpec,
 } from '../../../../core';
@@ -27,6 +28,9 @@ interface SectionProps {
     descriptionAsSubtitle?: boolean;
 }
 
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+const MAX_TITLE_WIDTH = 543;
+
 const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
     name,
     spec,
@@ -39,6 +43,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
 }: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & SectionProps) => {
     const meta = (restProps as FieldRenderProps<D>).meta as FieldRenderProps<D>['meta'] | undefined;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
+    const titleRef = React.useRef<HTMLHeadingElement>(null);
     let content = children;
 
     if (meta) {
@@ -76,15 +81,26 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
         }
     }
 
+    const layoutTitle = spec.viewSpec.layoutTitle;
+    const layoutTitlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+
     return (
         <section className={b()}>
-            {spec.viewSpec.layoutTitle ? (
+            {layoutTitle ? (
                 <div
                     className={b('header', {
                         'with-popover': !descriptionAsSubtitle,
                     })}
                 >
-                    <h2 className={b('title', {size: titleSize})}>{spec.viewSpec.layoutTitle}</h2>
+                    <Popover
+                        content={layoutTitle}
+                        placement={POPOVER_PLACEMENT}
+                        disabled={layoutTitlePopoverDisabled}
+                    >
+                        <h2 className={b('title', {size: titleSize})} ref={titleRef}>
+                            {layoutTitle}
+                        </h2>
+                    </Popover>
                     {description}
                 </div>
             ) : null}
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 7401a3cb..f7cd80ad 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon, Popover} from '@gravity-ui/uikit';
+import {Button, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
 
 import {block} from '../../utils';
 
@@ -35,6 +35,7 @@ interface SimpleVerticalAccordeonState {
 }
 
 const MAX_TITLE_TEXT_WIDTH = 495; /** 543px max-width - 48px of padding */
+const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
 
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
@@ -108,7 +109,11 @@ export class SimpleVerticalAccordeon extends React.Component<
             Boolean(React.Children.count(children)) && (
                 <div className={b({branch: withBranchView, view: viewLayout}, className)}>
                     <div className={b('header')}>
-                        <Popover content={title} disabled={titlePopoverDisabled}>
+                        <Popover
+                            content={title}
+                            disabled={titlePopoverDisabled}
+                            placement={POPOVER_PLACEMENT}
+                        >
                             <Button
                                 view="flat"
                                 className={b('header-inner', buttonClassName)}

From 3e2d3181fd15aaa09305a481fc7352485e0ac641 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Wed, 9 Aug 2023 18:36:06 +0300
Subject: [PATCH 09/12] fix: constants

---
 src/lib/kit/components/Card/Card.tsx               | 2 +-
 src/lib/kit/components/Layouts/Section/Section.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 06906867..90f3bb32 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -25,7 +25,7 @@ export interface CardProps {
 }
 
 const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 543;
+const MAX_TITLE_WIDTH = 533;
 
 export const Card: React.FC<CardProps> = ({
     name,
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 751698e5..0ac8f809 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -29,7 +29,7 @@ interface SectionProps {
 }
 
 const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 543;
+const MAX_TITLE_WIDTH = 533;
 
 const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
     name,

From 3dfa2cdf56cbb14458b2e941f655b3cc5b56c04d Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Thu, 10 Aug 2023 14:09:56 +0300
Subject: [PATCH 10/12] fix: review updates

---
 src/lib/kit/components/Card/Card.tsx          | 27 +++++++++++--------
 .../components/Layouts/Section/Section.tsx    | 24 ++++++++---------
 .../SimpleVerticalAccordeon.scss              |  2 +-
 .../SimpleVerticalAccordeon.tsx               | 11 ++++----
 .../Views/MultiSelectView/MultiSelectView.tsx |  6 ++---
 .../NumberWithScaleView.tsx                   |  6 ++---
 src/lib/kit/constants/common.ts               |  5 ++++
 src/lib/kit/constants/index.ts                |  1 +
 8 files changed, 43 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/kit/constants/common.ts

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 90f3bb32..0f8e0373 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants';
 import {block} from '../../utils';
 
 import './Card.scss';
@@ -24,9 +25,6 @@ export interface CardProps {
     checkEmptyBody?: boolean;
 }
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 533;
-
 export const Card: React.FC<CardProps> = ({
     name,
     title: propsTitle,
@@ -70,18 +68,27 @@ export const Card: React.FC<CardProps> = ({
         [],
     );
 
-    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH;
 
     const title = React.useMemo(() => {
         if (_.isString(propsTitle)) {
             return (
                 <React.Fragment>
-                    <Popover content={propsTitle} disabled={titlePopoverDisabled}>
-                        <div className={b('title')}>{propsTitle}</div>
+                    <Popover
+                        content={propsTitle}
+                        disabled={titlePopoverDisabled}
+                        placement={COMMON_POPOVER_PLACEMENT}
+                    >
+                        <div ref={titleRef} className={b('title')}>
+                            {propsTitle}
+                        </div>
                     </Popover>
                     {description ? (
                         <div className={b('note')}>
-                            <HelpPopover htmlContent={description} placement={POPOVER_PLACEMENT} />
+                            <HelpPopover
+                                htmlContent={description}
+                                placement={COMMON_POPOVER_PLACEMENT}
+                            />
                         </div>
                     ) : null}
                 </React.Fragment>
@@ -120,9 +127,7 @@ export const Card: React.FC<CardProps> = ({
                 className={b('header', {interactive: Boolean(handleHeaderToggle)})}
                 onClick={handleHeaderToggle}
             >
-                <div ref={titleRef} className={b('header-left')}>
-                    {title}
-                </div>
+                <div className={b('header-left')}>{title}</div>
                 <div className={b('header-right')} onClick={preventEvent}>
                     {actions ? <div className={b('actions')}>{actions}</div> : null}
                     {alwaysOpen ? null : (
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 0ac8f809..090ffe13 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
-import {ErrorWrapper} from '../../../';
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper} from '../../../';
 import {
-    type FieldRenderProps,
-    type FieldValue,
-    type FormValue,
-    type LayoutProps,
-    type Spec,
-    type ViewLayoutProps,
+    FieldRenderProps,
+    FieldValue,
+    FormValue,
+    LayoutProps,
+    Spec,
+    ViewLayoutProps,
     isArraySpec,
     isObjectSpec,
 } from '../../../../core';
@@ -28,9 +28,6 @@ interface SectionProps {
     descriptionAsSubtitle?: boolean;
 }
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-const MAX_TITLE_WIDTH = 533;
-
 const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
     name,
     spec,
@@ -82,7 +79,8 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
     }
 
     const layoutTitle = spec.viewSpec.layoutTitle;
-    const layoutTitlePopoverDisabled = (titleRef.current?.offsetWidth || 0) < MAX_TITLE_WIDTH;
+    const layoutTitlePopoverDisabled =
+        (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH;
 
     return (
         <section className={b()}>
@@ -94,7 +92,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
                 >
                     <Popover
                         content={layoutTitle}
-                        placement={POPOVER_PLACEMENT}
+                        placement={COMMON_POPOVER_PLACEMENT}
                         disabled={layoutTitlePopoverDisabled}
                     >
                         <h2 className={b('title', {size: titleSize})} ref={titleRef}>
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
index 869765dc..e0d83dce 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss
@@ -21,7 +21,7 @@ $animationDuration: 0.3s;
 
         &-inner {
             margin-left: -13px;
-            max-width: 543px;
+            max-width: 533px;
         }
     }
 
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index f7cd80ad..dff40a96 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon, Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Button, Icon, Popover} from '@gravity-ui/uikit';
 
+import {COMMON_POPOVER_PLACEMENT} from '../../constants';
 import {block} from '../../utils';
 
 import './SimpleVerticalAccordeon.scss';
@@ -34,8 +35,7 @@ interface SimpleVerticalAccordeonState {
     isFirstRender: boolean;
 }
 
-const MAX_TITLE_TEXT_WIDTH = 495; /** 543px max-width - 48px of padding */
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
 
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
@@ -103,7 +103,7 @@ export class SimpleVerticalAccordeon extends React.Component<
 
         const title = this.getTitle();
         const titlePopoverDisabled =
-            (this.titleRef.current?.offsetWidth || 0) < MAX_TITLE_TEXT_WIDTH;
+            (this.titleRef.current?.offsetWidth || 0) <= TITLE_TEXT_MAX_WIDTH;
 
         return (
             Boolean(React.Children.count(children)) && (
@@ -112,7 +112,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                         <Popover
                             content={title}
                             disabled={titlePopoverDisabled}
-                            placement={POPOVER_PLACEMENT}
+                            placement={COMMON_POPOVER_PLACEMENT}
                         >
                             <Button
                                 view="flat"
@@ -121,7 +121,6 @@ export class SimpleVerticalAccordeon extends React.Component<
                                 qa={`${name}-accordeon-toggler`}
                                 width="auto"
                             >
-                                {' '}
                                 <b ref={this.titleRef} className={b('title', {size: titleSize})}>
                                     {title}
                                 </b>
diff --git a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
index d2ce25a2..a0495468 100644
--- a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
+++ b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 import {ArrayView} from '../../../../core';
 import {block} from '../../../utils';
@@ -9,8 +9,6 @@ import './MultiSelectView.scss';
 
 const b = block('multiselect-view');
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-
 export const MultiSelectView: ArrayView = ({spec, value = []}) => {
     const _value = value as string[];
 
@@ -23,7 +21,7 @@ export const MultiSelectView: ArrayView = ({spec, value = []}) => {
         <React.Fragment>
             {items.map((item) => (
                 <Popover
-                    placement={POPOVER_PLACEMENT}
+                    placement={['bottom', 'top']}
                     key={item}
                     content={item}
                     className={b('tooltip-container')}
diff --git a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
index 4d5dcd23..74bbd0fc 100644
--- a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
+++ b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 import {StringViewProps} from '../../../../core';
 import {block, isCorrectSizeParams} from '../../../utils';
@@ -10,8 +10,6 @@ import './NumberWithScaleView.scss';
 
 const b = block('number-with-scale-view');
 
-const POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
-
 const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     const {initialValue, initialType} = useInitial(value || '', spec, [value]);
     const {scale} = spec.viewSpec.sizeParams!;
@@ -19,7 +17,7 @@ const NumberWithScaleViewBase: React.FC<StringViewProps> = ({spec, value}) => {
     return (
         <div className={b()}>
             <Popover
-                placement={POPOVER_PLACEMENT}
+                placement={['bottom', 'top']}
                 content={initialValue}
                 className={b('tooltip-container')}
                 contentClassName={b('tooltip')}
diff --git a/src/lib/kit/constants/common.ts b/src/lib/kit/constants/common.ts
new file mode 100644
index 00000000..be8db571
--- /dev/null
+++ b/src/lib/kit/constants/common.ts
@@ -0,0 +1,5 @@
+import type {PopoverProps} from '@gravity-ui/uikit';
+
+export const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
+export const COMMON_TITLE_MAX_WIDTH = 533;
diff --git a/src/lib/kit/constants/index.ts b/src/lib/kit/constants/index.ts
index f03c2281..d69e2e4b 100644
--- a/src/lib/kit/constants/index.ts
+++ b/src/lib/kit/constants/index.ts
@@ -1 +1,2 @@
 export * from './config';
+export * from './common';

From 180516e15ac32c7d8f753ef8f96239c820b5abcf Mon Sep 17 00:00:00 2001
From: Egor <mostovoyegor@yandex-team.ru>
Date: Tue, 8 Aug 2023 12:52:03 +0200
Subject: [PATCH 11/12] fix: fixed array type for default values (#72)

---
 src/lib/kit/utils/common.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/kit/utils/common.ts b/src/lib/kit/utils/common.ts
index 94a6fd26..67f55d0b 100644
--- a/src/lib/kit/utils/common.ts
+++ b/src/lib/kit/utils/common.ts
@@ -5,6 +5,7 @@ import {
     NumberSpec,
     ObjectValue,
     Spec,
+    SpecTypes,
     StringSpec,
     isArraySpec,
     isObjectSpec,
@@ -76,7 +77,10 @@ export const prepareSpec = <Type extends Spec>(
                 }
             }
 
-            if (typeof _defaultValue === result.type) {
+            if (
+                typeof _defaultValue === result.type ||
+                (_.isArray(_defaultValue) && result.type === SpecTypes.Array)
+            ) {
                 result.defaultValue = _defaultValue;
             } else {
                 result.defaultValue = undefined;

From 3c6c2ded7c1feace94d7b735694649a4b4318ae4 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Fri, 11 Aug 2023 15:56:06 +0300
Subject: [PATCH 12/12] fix: imports

---
 src/lib/kit/components/Card/Card.tsx                            | 2 +-
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index 0f8e0373..1421f22d 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -5,7 +5,7 @@ import {ChevronDown} from '@gravity-ui/icons';
 import {Button, Card as CardBase, Icon, Popover} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
-import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants';
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants/common';
 import {block} from '../../utils';
 
 import './Card.scss';
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index dff40a96..46c85cc2 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -4,7 +4,7 @@ import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
 import {Button, Icon, Popover} from '@gravity-ui/uikit';
 
-import {COMMON_POPOVER_PLACEMENT} from '../../constants';
+import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
 import {block} from '../../utils';
 
 import './SimpleVerticalAccordeon.scss';