ydb-embedded-ui 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [1.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.3...v1.6.0) (2022-06-06)
+
+
+### Features
+
+* query issues displaying ([3ba4c25](https://github.com/ydb-platform/ydb-embedded-ui/commit/3ba4c2591542ef902eba4f7c44550f3c59618575))
+
+
+### Bug Fixes
+
+* code-review ([742c58a](https://github.com/ydb-platform/ydb-embedded-ui/commit/742c58a9bc4fa0dd0b24aa0119b7352e2be6fc8e))
+* **package.json:** typecheck script ([111b525](https://github.com/ydb-platform/ydb-embedded-ui/commit/111b525f51a050010bbc03a3d0990be00c18ccd8))
+
+### [1.5.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.2...v1.5.3) (2022-05-26)
+
+
+### Bug Fixes
+
+* explicitly set lang for ydb-ui-components i18n ([5684524](https://github.com/ydb-platform/ydb-embedded-ui/commit/5684524267e2cbf19a44de75b0e0b2bf98b617fd))
+* proper icon size in uikit/Select ([a665d6d](https://github.com/ydb-platform/ydb-embedded-ui/commit/a665d6d829dae61ccf25566dd7b8cd1e46a743bb))
+* update code for @yandex-cloud/uikit@^2.0.0 ([49d67a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/49d67a1bddcba6fa138b5ebaeb280f16366b3329))
+
+
+### chore
+
+* update @yandex-cloud/uikit to 2.4.0 ([d2eb2e5](https://github.com/ydb-platform/ydb-embedded-ui/commit/d2eb2e5db147604ae346aea295ae22759712eaa4))
+* add @yandex-cloud/uikit to peer deps ([9c9f599](https://github.com/ydb-platform/ydb-embedded-ui/commit/9c9f5997dcca1be5868d013da311a28e495e7faa))
+* update ydb-ui-components to v2.0.1 ([3d6a8d3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3d6a8d30ab2ab47203eb956904e891ae106c0bc7))
+
+### [1.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.1...v1.5.2) (2022-05-26)
+
+
+### Bug Fixes
+
+* **Tenant:** always update diagnostics tabs for root ([db03266](https://github.com/ydb-platform/ydb-embedded-ui/commit/db03266fd7dd6e4588c1db0d109bdfaa8f693e2d))
+* **Tenant:** don't use HistoryAPI and redux-location-state together ([c1bc562](https://github.com/ydb-platform/ydb-embedded-ui/commit/c1bc5621e3ead44b1b84e592f8d7106bbc918e37))
+
 ### [1.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.0...v1.5.1) (2022-05-25)
 
 

package/dist/assets/icons/circle-exclamation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"/></svg>

package/dist/assets/icons/circle-info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/></svg>

package/dist/assets/icons/circle-xmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"/></svg>

package/dist/assets/icons/triangle-exclamation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>

package/dist/components/AsideNavigation/Settings/Settings.scss

@@ -29,9 +29,9 @@
     &__heading {
         margin: 20px 20px 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__search {
@@ -48,9 +48,9 @@
         &-heading {
             margin: 0;
 
-            font-size: var(--yc-text-body2-font-size);
+            font-size: var(--yc-text-body-2-font-size);
             font-weight: 500;
-            line-height: var(--yc-text-body2-line-height);
+            line-height: var(--yc-text-body-2-line-height);
 
             &_badge {
                 position: relative;

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -1,5 +1,5 @@
 .kv-breadcrumbs {
     padding: 20px 0;
 
-    font-size: var(--yc-text-body2-font-size);
+    font-size: var(--yc-text-body-2-font-size);
 }

package/dist/components/Collapse/Collapse.scss

@@ -20,18 +20,18 @@
 
     &__title_size {
         &_s {
-            font-size: var(--yc-text-body-font-size);
-            line-height: var(--yc-text-body-line-height);
+            font-size: var(--yc-text-body-1-font-size);
+            line-height: var(--yc-text-body-1-line-height);
         }
 
         &_m {
-            font-size: var(--yc-text-body2-font-size);
-            line-height: var(--yc-text-body2-line-height);
+            font-size: var(--yc-text-body-2-font-size);
+            line-height: var(--yc-text-body-2-line-height);
         }
 
         &_l {
-            font-size: var(--yc-text-body3-font-size);
-            line-height: var(--yc-text-body3-line-height);
+            font-size: var(--yc-text-body-3-font-size);
+            line-height: var(--yc-text-body-3-line-height);
         }
     }
 
@@ -55,9 +55,9 @@
     }
 
     &__empty-state-title {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         font-weight: normal;
-        line-height: var(--yc-text-body-line-height);
+        line-height: var(--yc-text-body-1-line-height);
 
         opacity: 0.5;
     }

package/dist/components/EmptyState/EmptyState.scss

@@ -47,21 +47,21 @@
         font-weight: 500;
 
         &_size_s {
-            font-size: var(--yc-text-lead-font-size);
-            line-height: var(--yc-text-lead-line-height);
+            font-size: var(--yc-text-subheader-3-font-size);
+            line-height: var(--yc-text-subheader-3-line-height);
         }
 
         &_size_m {
-            font-size: var(--yc-text-title-font-size);
-            line-height: var(--yc-text-title-line-height);
+            font-size: var(--yc-text-header-2-font-size);
+            line-height: var(--yc-text-header-2-line-height);
         }
     }
 
     &__description {
         grid-area: description;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__actions {

package/dist/components/EntityStatus/EntityStatus.scss

@@ -5,8 +5,8 @@
     max-width: 100%;
     height: 100%;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 
     &__clipboard-button {
         display: none;
@@ -42,8 +42,8 @@
     &__label {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
 
         color: var(--yc-color-text-complementary);
     }
@@ -96,7 +96,7 @@
     }
 
     &_size_m {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -1,15 +1,15 @@
 @import '../../styles/mixins.scss';
 
 .full-node-viewer {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 
     &__title {
         margin: 0 20px 0 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -50,7 +50,7 @@
         min-width: 100px;
         margin-right: 25px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 18px;
         white-space: nowrap;
 
@@ -69,9 +69,9 @@
     &__section-title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__link {

package/dist/components/GroupViewer/GroupViewer.scss

@@ -8,7 +8,7 @@
     &__label {
         margin-right: 20px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-complementary);
     }

package/dist/components/InfoViewer/InfoViewer.scss

@@ -1,12 +1,12 @@
 .info-viewer {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     &__title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__items {

package/dist/components/PDiskViewer/PDiskViewer.scss

@@ -6,7 +6,7 @@
     &__size {
         margin-right: 24px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 0;
 
         color: var(--yc-color-text-complementary);

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,6 +1,6 @@
 .pool-usage {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     &__info {
         display: flex;
         justify-content: space-between;
@@ -17,7 +17,7 @@
     }
 
     &__threads {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-hint);
 
@@ -29,7 +29,7 @@
     &__percents {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-primary);
     }
@@ -44,7 +44,7 @@
 
         height: 6px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
 
         border-radius: 4px;
         background-color: var(--yc-color-base-generic-accent);

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -10,7 +10,7 @@
     height: 23px;
     padding: 0 4px;
 
-    font-size: var(--yc-text-body2-font-size);
+    font-size: var(--yc-text-body-2-font-size);
     white-space: nowrap;
 
     color: var(--yc-color-text-light-primary);
@@ -49,20 +49,20 @@
     &_size_xs {
         height: 20px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &_size_s {
         height: 28px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 28px;
     }
     &_size_m {
         height: 32px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 32px;
     }
 
@@ -70,25 +70,25 @@
         height: 24px;
 
         font-size: 13px;
-        line-height: var(--yc-text-lead-line-height);
+        line-height: var(--yc-text-subheader-3-line-height);
     }
 
     &_size_n {
         height: 36px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 36px;
     }
 
     &_size_l {
         height: 38px;
 
-        font-size: var(--yc-text-lead-font-size);
+        font-size: var(--yc-text-subheader-3-font-size);
         line-height: 38px;
     }
 
     &_size_head {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 36px;
     }
 }

package/dist/components/ShortyString/ShortyString.scss

@@ -0,0 +1,7 @@
+.kv-shorty-string {
+    &__toggle {
+        margin-left: 2em;
+
+        font-size: 0.85em;
+    }
+}

package/dist/components/ShortyString/ShortyString.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import cn from 'bem-cn-lite';
+
+import {Link} from '@yandex-cloud/uikit';
+
+import './ShortyString.scss';
+
+const block = cn('kv-shorty-string');
+
+type Props = {
+    value?: string;
+    limit?: number;
+    displayLength?: boolean;
+    render?: (value: string) => React.ReactNode;
+    onToggle?: () => void;
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+
+export default function ShortyString({
+    value = '',
+    limit = 200,
+    displayLength = true,
+    render = (v: string) => v,
+    onToggle,
+    expandLabel = 'Show more',
+    collapseLabel = 'Show less',
+}: Props) {
+    const [expanded, setExpanded] = React.useState(false);
+    const hasToggle = value.length > limit;
+    const length =
+        displayLength && !expanded ? `(${value.length} symbols)` : undefined;
+
+    const text = expanded || value.length <= limit ? value : value.slice(0, limit - 4) + '\u00a0...';
+    const label = expanded ? collapseLabel : expandLabel;
+    return (
+        <div className={block()}>
+            {render(text)}
+            {hasToggle ? (
+                <Link
+                    className={block('toggle')}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setExpanded((v) => !v);
+                        onToggle?.();
+                    }}
+                >
+                    {label} {length}
+                </Link>
+            ) : null}
+        </div>
+    );
+}

package/dist/components/TableSkeleton/TableSkeleton.scss

@@ -8,7 +8,7 @@
         height: var(--data-table-row-height);
 
         .yc-skeleton {
-            height: var(--yc-text-body2-line-height);
+            height: var(--yc-text-body-2-line-height);
         }
     }
 

package/dist/components/TabletsViewer/TabletsViewer.scss

@@ -17,7 +17,7 @@
         min-width: 60px;
         margin-right: 20px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 18px;
         white-space: nowrap;
         text-transform: capitalize;
@@ -33,7 +33,7 @@
         margin: 0;
         margin-bottom: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: bold;
         line-height: 20px;
     }

package/dist/containers/App/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
+import {i18n as YDBComponentsI18N} from 'ydb-ui-components/build/components/i18n';
 import {I18N, i18n} from '../../utils/i18n';
 
 import ContentWrapper, {Content} from './Content';
@@ -25,7 +26,7 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         i18n.setLang(I18N.LANGS.en);
-        I18N.setDefaultLang(I18N.LANGS.en); // for the peer dependency ydb-ui-components, should match the language above
+        YDBComponentsI18N.setLang(I18N.LANGS.en);
     }
 
     componentDidMount() {

package/dist/containers/App/App.scss

@@ -3,9 +3,15 @@
 @import './NodesTable';
 
 * {
+    // FIXME: this is an overkill, potentially could break external components, needs refactoring
     box-sizing: border-box;
 }
 
+.yc-select-popup__tick-icon {
+    // this is a local fix, remove after the refactoring
+    box-sizing: content-box;
+}
+
 html,
 body,
 #root {

package/dist/containers/App/TipPopup/TipPopup.js

@@ -54,7 +54,7 @@ function TipPopup({dbChangePopupVisibility, dataAttribute, initialIsPopupVisible
                 <div className={b('title')}>{tipData.title}</div>
                 <div className={b('content')}>{tipData.description}</div>
                 <div className={b('cross-icon-wrapper')}>
-                    <Button view="clear" onClick={onClosePopupClick}>
+                    <Button view="flat-secondary" onClick={onClosePopupClick}>
                         <Icon data={closeIcon} size={10} className={b('cross-icon')} />
                     </Button>
                 </div>

package/dist/containers/AsideNavigation/AsideNavigation.scss

@@ -6,7 +6,7 @@
 
         margin-left: 16px;
 
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
     &__user-info-wrapper {
         display: flex;

package/dist/containers/Authentication/Authentication.scss

@@ -28,8 +28,8 @@
 
         width: 100%;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-header-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-header-1-line-height);
     }
 
     &__logo {

package/dist/containers/Header/Header.scss

@@ -15,14 +15,14 @@
     @include body2-typography;
 
     &__cluster-info-title {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         text-transform: uppercase;
 
         color: var(--yc-color-text-secondary);
     }
 
     &__cluster-info-name {
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
     }
 

package/dist/containers/Header/Host/Host.scss

@@ -13,8 +13,8 @@
 
         margin-right: 15px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
     &__info {
         display: flex;
@@ -32,8 +32,8 @@
     &__label {
         margin-right: 10px;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-hint);
 
@@ -42,8 +42,8 @@
         }
     }
     &__value {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-primary);
     }

package/dist/containers/Heatmap/Heatmap.js

@@ -8,8 +8,7 @@ import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {formatNumber} from '../../utils';
 
-import {Loader, Checkbox} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Checkbox, Select} from '@yandex-cloud/uikit';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
 import {Histogram} from './Histogram/Histogram';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/Heatmap/Heatmap.scss

@@ -49,9 +49,9 @@
     &__label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
 
         &_overall {

package/dist/containers/Node/Node.scss

@@ -20,7 +20,6 @@
 
     &__tabs {
         padding: 16px 20px 0;
-        @include body2-typography();
     }
 
     &__tab {

package/dist/containers/Node/Node.tsx

@@ -98,6 +98,7 @@ function Node(props: NodeProps) {
         return (
             <div className={b('tabs')}>
                 <Tabs
+                    size="l"
                     items={nodeTabs}
                     activeTab={activeTabVerified}
                     wrapTo={({id}, node) => (

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -22,7 +22,7 @@
 
         width: 573px;
         margin-bottom: 8px;
-        padding-left: 20px;
+        padding: 0 10px 0 20px;
 
         border: 1px solid var(--yc-color-line-generic);
         border-radius: 5px;
@@ -137,9 +137,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 }