fix

Author: just-boris

src/app-layout/__tests__/main.test.tsx

@@ -121,7 +121,7 @@ describeEachAppLayout({ themes: ['classic', 'refresh-toolbar'], sizes: ['desktop
       await waitFor(() => expect(wrapper.getElement()).toHaveStyle({ minBlockSize: 'calc(100vh - 75px)' }));
     });
 
-    (theme !== 'classic' ? test.skip : test.skip)('should set the header height to the scrolling element', () => {
+    (theme !== 'classic' ? test : test.skip)('should set the header height to the scrolling element', () => {
       Object.defineProperty(document, 'scrollingElement', { value: document.body });
       renderComponent(
         <div id="b">

src/app-layout/visual-refresh-toolbar/state/index.tsx

@@ -4,7 +4,6 @@ import React, { ForwardedRef, useLayoutEffect, useState } from 'react';
 
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { AppLayoutProps } from '../../interfaces';
-import { useGlobalScrollPadding } from '../../utils/use-global-scroll-padding';
 import { AppLayoutInternalProps, AppLayoutState } from '../interfaces';
 import { SkeletonSlotsAttributes } from '../skeleton/interfaces';
 import { MergeProps, SharedProps } from './interfaces';
@@ -36,8 +35,6 @@ export const AppLayoutStateProvider = ({ appLayoutProps, stateManager, forwardRe
   const appLayoutState = useAppLayout(hasToolbar, appLayoutProps, forwardRef);
   const skeletonSlotsAttributes = useSkeletonSlotsAttributes(hasToolbar, appLayoutProps, appLayoutState);
 
-  useGlobalScrollPadding(appLayoutState.widgetizedState?.verticalOffsets.header ?? 0);
-
   useLayoutEffect(() => {
     if (!stateManager.current?.setState) {
       console.warn('AppLayout state manager is not found');

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

@@ -24,6 +24,7 @@ import {
 } from '../compute-layout';
 import { AppLayoutState } from '../interfaces';
 import { AppLayoutInternalProps, AppLayoutInternals } from '../interfaces';
+import { useGlobalScrollPadding } from '../../utils/use-global-scroll-padding';
 
 export const useAppLayout = (
   hasToolbar: boolean,
@@ -264,6 +265,8 @@ export const useAppLayout = (
 
   const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
 
+  useGlobalScrollPadding(verticalOffsets.header ?? 0);
+
   const appLayoutInternals: AppLayoutInternals = {
     ariaLabels: ariaLabelsWithDrawers,
     headerVariant,

src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx

@@ -18,9 +18,8 @@ export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState }: S
   const { activeDrawer, navigationOpen, navigation, expandedDrawerId } = appLayoutState.widgetizedState;
   const drawerExpandedMode = !!expandedDrawerId;
   const toolsOpen = !!activeDrawer;
-  // Must use `widgetizedProps` because all layouts have to apply this mode, not just the one with toolbar
-  const drawerExpandedModeInChildLayout =
-    toolbarProps?.widgetizedProps?.expandedDrawerId ?? !!toolbarProps?.expandedDrawerId;
+  // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar
+  const drawerExpandedModeInChildLayout = !!toolbarProps?.expandedDrawerId;
   return (
     <>
       {!!toolbarProps && (