@cloud-ru/ds-uikit-product-header 1.5.1 → 1.5.2-preview-0406cbd2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "1.5.1",
+  "version": "1.5.2-preview-0406cbd2.0",
   "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
   "repository": {
     "type": "git",
@@ -45,33 +45,33 @@
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.5.1",
     "fuse.js": "^7.1.0",
-    "@cloud-ru/ds-accordion": "^1.1.0",
-    "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-breadcrumbs": "^1.0.18",
-    "@cloud-ru/ds-avatar": "^1.0.5",
-    "@cloud-ru/ds-button": "^1.0.3",
-    "@cloud-ru/ds-card": "^1.0.14",
-    "@cloud-ru/ds-drawer": "^1.2.2",
-    "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.2",
-    "@cloud-ru/ds-icons": "^1.2.1",
-    "@cloud-ru/ds-info-block": "^1.0.2",
-    "@cloud-ru/ds-list": "^2.2.1",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-modal": "^1.1.3",
-    "@cloud-ru/ds-portal-context": "^1.0.1",
-    "@cloud-ru/ds-promo-tag": "^1.0.2",
-    "@cloud-ru/ds-scroll": "^1.0.3",
-    "@cloud-ru/ds-segment-control": "^1.0.7",
-    "@cloud-ru/ds-skeleton": "^1.0.1",
-    "@cloud-ru/ds-search": "^1.0.9",
-    "@cloud-ru/ds-theme": "^2.0.0",
-    "@cloud-ru/ds-tooltip": "^1.0.6",
-    "@cloud-ru/ds-typography": "^1.0.0",
-    "@cloud-ru/ds-uikit-product-card-predefined": "^3.1.4",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.8",
-    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.10",
-    "@cloud-ru/ds-utils": "^1.1.0"
+    "@cloud-ru/ds-accordion": "1.1.0",
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-button": "1.0.3",
+    "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-drag-and-drop": "1.1.2",
+    "@cloud-ru/ds-drawer": "1.2.2",
+    "@cloud-ru/ds-icons": "1.2.1",
+    "@cloud-ru/ds-info-block": "1.0.2",
+    "@cloud-ru/ds-card": "1.0.14",
+    "@cloud-ru/ds-list": "2.2.2-preview-0406cbd2.0",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-modal": "1.1.3",
+    "@cloud-ru/ds-promo-tag": "1.0.2",
+    "@cloud-ru/ds-scroll": "1.0.3",
+    "@cloud-ru/ds-search": "1.0.9",
+    "@cloud-ru/ds-segment-control": "1.0.7",
+    "@cloud-ru/ds-skeleton": "1.0.1",
+    "@cloud-ru/ds-theme": "2.0.0",
+    "@cloud-ru/ds-tooltip": "1.0.6",
+    "@cloud-ru/ds-typography": "1.0.0",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.8",
+    "@cloud-ru/ds-uikit-product-card-predefined": "3.1.5-preview-0406cbd2.0",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.10",
+    "@cloud-ru/ds-utils": "1.1.0",
+    "@cloud-ru/ds-avatar": "1.0.5",
+    "@cloud-ru/ds-breadcrumbs": "1.0.19-preview-0406cbd2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/HeaderButton/HeaderButton.tsx

@@ -1,5 +1,4 @@
 import { Button, ButtonProps } from '@cloud-ru/ds-button';
-import { useThemeClassnames } from '@cloud-ru/ds-theme';
 import { TooltipProps, WithTooltip } from '@cloud-ru/ds-tooltip';
 import cn from 'classnames';
 import { ElementType } from 'react';
@@ -26,8 +25,6 @@ export function HeaderButton<T extends ElementType = 'button'>({
   className,
   ...rest
 }: HeaderButtonProps<T>) {
-  const compactThemeClassName = useThemeClassnames({ density: 'compact' });
-
   return (
     // FIXME: typescript ломается, если не указать tip явно
     //  пока не разбирался почему так
@@ -50,7 +47,7 @@ export function HeaderButton<T extends ElementType = 'button'>({
         size='m'
         appearance='neutral'
         view='simple'
-        className={cn(styles.headerButton, compactThemeClassName, className)}
+        className={cn(styles.headerButton, className)}
       />
     </WithTooltip>
   );

package/src/components/HeaderLayout/HeaderLayout.tsx

@@ -1,8 +1,7 @@
 import { Divider } from '@cloud-ru/ds-divider';
-import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { ReactNode, useRef } from 'react';
+import { ReactNode } from 'react';
 
 import { TEST_IDS } from '../../constants';
 import { useMobileLayout } from '../../hooks/useMobileLayout';
@@ -19,12 +18,10 @@ export type HeaderLayoutProps = WithSupportProps<{
 
 export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }: HeaderLayoutProps) {
   const isMobile = useMobileLayout();
-  const headerRef = useRef<HTMLElement>(null);
-
-  const header = (
+  return (
     <header
-      ref={headerRef}
       className={cn(styles.header, className)}
+      data-mobile={isMobile || undefined}
       {...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest })}
     >
       <div className={styles.top}>
@@ -35,6 +32,7 @@ export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, classNa
             <>
               <Divider orientation='vertical' />
               {menu}
+              {isMobile && <Divider orientation='vertical' />}
             </>
           )}
 
@@ -57,21 +55,12 @@ export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, classNa
       </div>
       <Divider orientation='horizontal' />
 
-      {isMobile && Boolean(breadcrumbs) && <div className={styles.bottom}>{breadcrumbs}</div>}
+      {isMobile && Boolean(breadcrumbs) && (
+        <>
+          <div className={styles.bottom}>{breadcrumbs}</div>
+          <Divider orientation='horizontal' />
+        </>
+      )}
     </header>
   );
-
-  // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
-  // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
-  // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
-  // и класс, поставленный поверх, проиграл бы их собственному.
-  if (isMobile) {
-    return (
-      <ChildThemeProvider value={{ density: DENSITY.Comfort }} rootRef={headerRef}>
-        {header}
-      </ChildThemeProvider>
-    );
-  }
-
-  return header;
 }

package/src/components/HeaderLayout/styles.module.scss

@@ -22,7 +22,6 @@
 
   box-sizing: border-box;
   height: base.$sn-primitive-dimension-24;
-  border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
 }
 
 .left {
@@ -40,3 +39,14 @@
   align-items: center;
   height: 100%;
 }
+
+.header[data-mobile] {
+  .top {
+    padding: base.$sn-primitive-dimension-0;
+  }
+
+  .left,
+  .right {
+    gap: base.$sn-primitive-dimension-0;
+  }
+}

package/src/components/Logo/styles.module.scss

@@ -39,6 +39,7 @@
 .logo {
   position: relative;
   flex-shrink: 0;
+  box-sizing: border-box;
 
   &:active:not([data-disabled]) {
     .iconDefault {

package/src/components/MainMenu/helperComponents/Banners/MenuBanner.tsx

@@ -2,7 +2,6 @@ import { Button } from '@cloud-ru/ds-button';
 import { Card } from '@cloud-ru/ds-card';
 import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
 import { PromoTag, PromoTagProps, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
-import { useThemeClassnames } from '@cloud-ru/ds-theme';
 import { Typography } from '@cloud-ru/ds-typography';
 import { WithSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
@@ -38,7 +37,6 @@ export function MenuBanner({
   ...rest
 }: MenuBannerProps): ReactElement {
   const { t } = headerLocale.useTranslations();
-  const compactThemeClassname = useThemeClassnames({ density: 'compact' });
 
   const handleClose: MouseEventHandler<HTMLButtonElement> = useCallback(
     e => {
@@ -90,7 +88,7 @@ export function MenuBanner({
 
         {onClose && (
           <Button
-            className={cn(styles.closeButton, compactThemeClassname)}
+            className={styles.closeButton}
             view='elevated'
             appearance='neutral'
             size='s'

package/src/components/MainMenu/helperComponents/Banners/styles.module.scss

@@ -13,6 +13,7 @@
 }
 
 .root {
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
 

package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.tsx

@@ -64,7 +64,7 @@ export function ContentToolbar({
   const hasSegmentItems = segmentItems && segmentItems?.length > 0;
 
   return (
-    <div className={styles.root} data-test-id={TEST_IDS.toolbar}>
+    <div className={styles.root} data-mobile={isMobile || undefined} data-test-id={TEST_IDS.toolbar}>
       {hasSegmentItems && (
         <WithSkeleton
           loading={loading}

package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.scss

@@ -7,9 +7,11 @@
   align-items: center;
   justify-content: space-between;
 
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   min-height: base.$sn-primitive-dimension-32;
+
 }
 
 .segmentControl {

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.tsx

@@ -25,7 +25,11 @@ export function SortableGroupCards({
   onServiceClick,
 }: SortableGroupCardsProps) {
   return (
-    <div className={styles.groupBody} data-mobile={isMobile || undefined}>
+    <div
+      className={styles.groupBody}
+      data-mobile={isMobile || undefined}
+      data-show-description={showDescription || undefined}
+    >
       {items.map(service => {
         if (service.hidden) {
           return null;

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.tsx

@@ -83,7 +83,12 @@ export function SubCategory({
           onServiceClick={onServiceClick}
         />
 
-        <div className={baseGroupStyles.groupBody} data-subcategory-body='expanded' data-mobile={isMobile || undefined}>
+        <div
+          className={baseGroupStyles.groupBody}
+          data-subcategory-body='expanded'
+          data-mobile={isMobile || undefined}
+          data-show-description={showDescription || undefined}
+        >
           {nestedItems.map(nestedService => (
             <DraggableServiceCard
               key={nestedGroupId + nestedService.id}
@@ -124,7 +129,12 @@ export function SubCategory({
             />
           }
         >
-          <div className={baseGroupStyles.groupBody} data-subcategory-body data-mobile={isMobile || undefined}>
+          <div
+            className={baseGroupStyles.groupBody}
+            data-subcategory-body
+            data-mobile={isMobile || undefined}
+            data-show-description={showDescription || undefined}
+          >
             {nestedItems.map(nestedService => (
               <DraggableServiceCard
                 key={nestedGroupId + nestedService.id}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss

@@ -54,7 +54,7 @@ $map-block-color-decor: (
 
   @media (hover: hover) {
     &:hover {
-      background-color: base.$sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled;
+      background-color: base.$sn-theme-color-neutral-decorTransparent;
 
       .headerActions {
         pointer-events: auto;
@@ -86,6 +86,7 @@ $map-block-color-decor: (
   display: flex;
   flex-direction: column;
 
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-8
@@ -158,6 +159,15 @@ $map-block-color-decor: (
   gap: base.$sn-primitive-dimension-4;
 
   &:not([data-mobile]) {
+    &:not([data-subcategory-body]) {
+      padding: base.$sn-primitive-dimension-4;
+    }
+
+    // Карточки без описания в десктопном мастере стоят впритык.
+    &:not([data-show-description]) {
+      gap: base.$sn-primitive-dimension-0;
+    }
+
     // Drawer десктопного меню ресайзится пользователем (см. MenuDesktop.resizable),
     // поэтому колонки реагируют на реальную ширину контейнера (container query
     // от `.rightContent`), а не на ширину viewport.
@@ -168,6 +178,7 @@ $map-block-color-decor: (
   }
 
   &[data-mobile] {
+    // Нет токена минимальной ширины карточки.
     grid-template-columns: repeat(1, minmax(200px, 1fr));
   }
 
@@ -181,7 +192,7 @@ $map-block-color-decor: (
 }
 
 .decoration {
-  --highlight-border-width: 1px;
+  --highlight-border-width: #{base.$sn-primitive-strokeWeight-strokeRegular};
 
   position: absolute;
   top: 0;

package/src/components/MainMenu/helperComponents/Favorites/Favorites.tsx

@@ -8,6 +8,7 @@ import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { MouseEvent, useMemo } from 'react';
 
+import { useDesktopComfortClassName } from '../../../../hooks/useDesktopComfortClassName';
 import { headerLocale } from '../../../../locale';
 import { FavoriteProps, InnerLink, LinksGroup } from '../../types';
 import { resolveInnerLinksByIds } from '../../utils';
@@ -30,6 +31,7 @@ export type FavoritesProps = {
 export function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }: FavoritesProps) {
   const { t } = headerLocale.useTranslations();
   const loading = favorite.loading;
+  const comfortClassName = useDesktopComfortClassName();
 
   const [segment, setSegment] = useValueControl<FavoritesSegment>({
     value: favorite.segment,
@@ -146,7 +148,7 @@ export function Favorites({ favorite, allServiceGroups, headerClassName, isMobil
         />
 
         {favorite.actions && (
-          <Droplist size='m' {...favorite.actions} closeDroplistOnItemClick>
+          <Droplist size='m' {...favorite.actions} className={comfortClassName} closeDroplistOnItemClick>
             <Button
               view='function'
               size='m'

package/src/components/MainMenu/helperComponents/Favorites/styles.module.scss

@@ -1,5 +1,10 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 
+$card-gap: base.$sn-primitive-dimension-4;
+$card-height: base.$sn-primitive-dimension-32;
+$card-height-mobile: base.$sn-primitive-dimension-40;
+$list-padding-bottom: base.$sn-primitive-dimension-8;
+
 .root {
   display: flex;
   flex-direction: column;
@@ -59,23 +64,22 @@
 
 .listScrollInner {
   height: 100%;
-  // 12 карточек + gap + padding-top + padding-bottom от .list
-  max-height: calc(
-    (#{base.$sn-primitive-dimension-32} * 12) + #{base.$sn-primitive-dimension-4} + #{base.$sn-primitive-dimension-8}
-  );
+  // Шаг карточки (высота + зазор) × 12 видимых + нижний паддинг `.list`.
+  max-height: calc((#{$card-height} + #{$card-gap}) * 12 + #{$list-padding-bottom});
 
   &[data-mobile] {
-    max-height: calc(
-      (#{base.$sn-primitive-dimension-40} * 6) + #{base.$sn-primitive-dimension-4} + #{base.$sn-primitive-dimension-8}
-    );
+    max-height: calc((#{$card-height-mobile} + #{$card-gap}) * 6 + #{$list-padding-bottom});
   }
 }
 
 .list {
   display: flex;
   flex-direction: column;
+  // Зазор между карточками избранного — из мастера (`+ slotFavourites`, FF-9057).
+  gap: $card-gap;
   align-items: stretch;
 
+  box-sizing: border-box;
   width: 100%;
   padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-8;
 }
@@ -102,6 +106,7 @@
   gap: base.$sn-primitive-dimension-4;
   align-items: stretch;
 
+  box-sizing: border-box;
   width: 100%;
   padding: base.$sn-primitive-dimension-8;
 }

package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss

@@ -36,7 +36,7 @@
 
   // NOTE: cелектор такой потому, что не получается достучаться до нужной дивки и переопределить стили без !important
   [data-test-id='header__drawer-menu'][data-small][data-position][data-width] {
-    // NOTE: ширина по макету 263px, но у дровера еще зашит паддинг. Не стал его обнулять
+    // NOTE: ширина по макету 263px (нет токена), но у дровера еще зашит паддинг. Не стал его обнулять
     // по умолчанию box-sizing: content-box; и из-за этого max-width определяется некорректно
     box-sizing: border-box;
     width: 100%;
@@ -74,13 +74,15 @@
   flex-direction: column;
   gap: base.$sn-primitive-dimension-4;
 
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   padding: base.$sn-primitive-dimension-16;
 }
 
 .menu {
-  --snack-menu-header-height: 40px;
+  --snack-menu-header-height: #{base.$sn-primitive-dimension-40};
+  // Нет токена ширины левой колонки меню.
   --snack-menu-left-width: 263px;
 
   position: relative;

package/src/components/MainMenu/helperComponents/MenuHeaderBrand/MenuHeaderBrand.tsx

@@ -11,13 +11,14 @@ export type MenuHeaderBrandProps = {
   logo?: ReactNode;
   onClose(): void;
   className?: string;
+  isMobile?: boolean;
 };
 
-export function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps) {
+export function MenuHeaderBrand({ logo, onClose, className, isMobile }: MenuHeaderBrandProps) {
   const { t } = headerLocale.useTranslations();
 
   return (
-    <div className={cn(styles.container, className)}>
+    <div className={cn(styles.container, className)} data-mobile={isMobile || undefined}>
       {logo}
       <Divider orientation='vertical' />
 

package/src/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.scss

@@ -8,6 +8,10 @@
   box-sizing: border-box;
 
   background-color: base.$sn-theme-color-neutral-background;
+
+  &[data-mobile] {
+    gap: base.$sn-primitive-dimension-0;
+  }
 }
 
 .closeButton {

package/src/components/MainMenu/helperComponents/MenuMobile/MenuMobile.tsx

@@ -1,5 +1,4 @@
 import { Divider } from '@cloud-ru/ds-divider';
-import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo } from 'react';
 
@@ -62,59 +61,54 @@ export function MenuMobile({
   }, [setOpen]);
 
   return (
-    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
-    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
-    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
-    <ChildThemeProvider value={{ density: DENSITY.Comfort }} className={styles.densityScope}>
-      <MobileDrawerCustom
-        open={open}
-        onClose={handleClose}
-        position='bottom'
-        className={styles.drawerMobile}
-        swipeEnabled={false}
-        data-test-id={TEST_IDS.mainMenu.drawerMobile}
-        closeOnPopstate
-        snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
-        disableMotions={true}
+    <MobileDrawerCustom
+      open={open}
+      onClose={handleClose}
+      position='bottom'
+      className={styles.drawerMobile}
+      swipeEnabled={false}
+      data-test-id={TEST_IDS.mainMenu.drawerMobile}
+      closeOnPopstate
+      snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
+      disableMotions={true}
+    >
+      <ScrollWithAnimatedStickyPanel
+        panel={
+          <>
+            <MenuHeaderBrand logo={logo} onClose={handleClose} className={styles.menuHeader} isMobile />
+            <Divider orientation='horizontal' />
+          </>
+        }
       >
-        <ScrollWithAnimatedStickyPanel
-          panel={
-            <>
-              <MenuHeaderBrand logo={logo} onClose={handleClose} className={styles.menuHeader} />
-              <Divider orientation='horizontal' />
-            </>
-          }
-        >
-          <MountAnimation className={styles.scrollMobile} type='fade-slide-up'>
-            {leftTop && <div className={styles.rightContent}>{leftTop}</div>}
-            {search && <Search {...search} ref={searchRef} isMobile />}
-            {!isSearching && favorite && <Favorites favorite={favorite} allServiceGroups={allServiceGroups} isMobile />}
+        <MountAnimation className={styles.scrollMobile} type='fade-slide-up'>
+          {leftTop && <div className={styles.rightContent}>{leftTop}</div>}
+          {search && <Search {...search} ref={searchRef} isMobile />}
+          {!isSearching && favorite && <Favorites favorite={favorite} allServiceGroups={allServiceGroups} isMobile />}
 
-            {hasSegments && (
-              <MainMenuDndContext>
-                <Content
-                  isMobile
-                  className={styles.rightContent}
-                  searchValue={search && search.value}
-                  rightTop={rightTop}
-                  favorite={favorite}
-                  segments={segments}
-                  searchGroups={resultItems}
-                  segmentPrefs={segmentPrefs}
-                  activeSegmentId={activeSegmentId}
-                  onActiveSegmentChange={onActiveSegmentChange}
-                  onSegmentOrderChange={onSegmentOrderChange}
-                  onSegmentExpandedChange={onSegmentExpandedChange}
-                  onSegmentServiceClick={onSegmentServiceClick}
-                  loading={loading}
-                />
-              </MainMenuDndContext>
-            )}
+          {hasSegments && (
+            <MainMenuDndContext>
+              <Content
+                isMobile
+                className={styles.rightContent}
+                searchValue={search && search.value}
+                rightTop={rightTop}
+                favorite={favorite}
+                segments={segments}
+                searchGroups={resultItems}
+                segmentPrefs={segmentPrefs}
+                activeSegmentId={activeSegmentId}
+                onActiveSegmentChange={onActiveSegmentChange}
+                onSegmentOrderChange={onSegmentOrderChange}
+                onSegmentExpandedChange={onSegmentExpandedChange}
+                onSegmentServiceClick={onSegmentServiceClick}
+                loading={loading}
+              />
+            </MainMenuDndContext>
+          )}
 
-            {!isSearching && hasBottomItems && <MenuBottom settingItems={settingItems} leftBottom={leftBottom} />}
-          </MountAnimation>
-        </ScrollWithAnimatedStickyPanel>
-      </MobileDrawerCustom>
-    </ChildThemeProvider>
+          {!isSearching && hasBottomItems && <MenuBottom settingItems={settingItems} leftBottom={leftBottom} />}
+        </MountAnimation>
+      </ScrollWithAnimatedStickyPanel>
+    </MobileDrawerCustom>
   );
 }

package/src/components/MainMenu/helperComponents/MenuMobile/styles.module.scss

@@ -4,15 +4,8 @@
 $menuHeaderHeight: base.$sn-primitive-dimension-40;
 $menuHeaderHeightWithDivider: calc(#{$menuHeaderHeight} + #{divider.$sn-divider-anatomy-container-height});
 
-// Обёртка провайдера плотности вокруг портала меню: собственного бокса у неё быть не должно,
-// иначе в строке шапки появляется лишний flex-элемент и лишний gap.
-.densityScope {
-  display: contents;
-}
-
 .menuHeader {
   height: $menuHeaderHeight;
-  padding: 0 base.$sn-primitive-dimension-4;
 }
 
 .rightContent {
@@ -33,6 +26,7 @@ $menuHeaderHeightWithDivider: calc(#{$menuHeaderHeight} + #{divider.$sn-divider-
   flex-direction: column;
   gap: base.$sn-primitive-dimension-8;
 
+  box-sizing: border-box;
   min-height: 100%;
   margin-top: $menuHeaderHeightWithDivider;
   padding: base.$sn-primitive-dimension-16;

package/src/components/MainMenu/helperComponents/MountAnimation/styles.module.scss

@@ -1,5 +1,7 @@
-$slide-x: -12px;
-$slide-y: 4px;
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$slide-x: calc(-1 * #{base.$sn-primitive-dimension-12});
+$slide-y: base.$sn-primitive-dimension-4;
 
 .wrapper {
   will-change: transform, opacity;

package/src/components/MainMenu/helperComponents/Search/styles.module.scss

@@ -3,9 +3,9 @@
 .searchWrap {
   &:not([data-mobile]) {
     flex: 1 1 auto;
-
-    // NOTE: у Search уже есть свои паддинги внутри компонента, поэтому здесь паддинги на 2px меньше
-    padding: base.$sn-primitive-dimension-2 base.$sn-primitive-dimension-10;
+    box-sizing: border-box;
+    margin: 0 base.$sn-primitive-dimension-4;
+    padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-12;
   }
 }
 

package/src/components/PathBreadcrumbs/PathBreadcrumbs.tsx

@@ -5,17 +5,16 @@ import styles from './styles.module.scss';
 
 type PathBreadcrumbsProps = {
   items: BreadcrumbsProps['items'];
-  isMobile?: boolean;
 };
 
-export function PathBreadcrumbs({ isMobile, items }: PathBreadcrumbsProps) {
+export function PathBreadcrumbs({ items }: PathBreadcrumbsProps) {
   return (
     <Breadcrumbs
       items={items}
       className={styles.breadcrumbs}
       inactiveLastItem={items.length > 1}
       separator='/'
-      size={isMobile ? 'xs' : 's'}
+      size='xs'
       data-test-id={TEST_IDS.breadcrumbs.root}
     />
   );