refactor(Dynamic/ObjectPage): make components SSR ready

.storybook/components/Footer.module.css

@@ -0,0 +1,40 @@
+.footer {
+    container: footer / inline-size;
+}
+
+.content {
+    min-height: var(--_ui5_bar_base_height);
+    display: flex;
+    align-items: center;
+    background-olor: var(--sapPageFooter_Background);
+    border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: auto;
+    overflow: hidden;
+}
+
+@container (max-width: 599px) {
+  .footer {
+    padding-inline: 1rem;
+  }
+}
+
+@container (min-width: 600px) and (max-width: 1023px) {
+  .footer {
+    padding-inline: 2rem;
+  }
+}
+
+@container (min-width: 1024px) and (max-width: 1439px) {
+  .footer {
+    padding-inline: 2rem;
+  }
+}
+
+@container (min-width: 1440px) {
+  .footer {
+    padding-inline: 3rem;
+  }
+}

.storybook/components/Footer.tsx

@@ -9,38 +9,20 @@ import {
   PopoverPlacementType,
   WrappingType
 } from '@ui5/webcomponents-react';
-import { ThemingParameters, useResponsiveContentPadding } from '@ui5/webcomponents-react-base';
 import React, { useRef } from 'react';
 import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
+import classes from './Footer.module.css';
 
 export const Footer = ({ style }) => {
   const popoverRef = useRef(null);
   const footerRef = useRef(null);
-  const responsivePaddingClass = useResponsiveContentPadding(footerRef.current);
-
   const showPrivacyPopover = (e) => {
     popoverRef.current.showAt(e.target);
   };
 
   return (
-    <footer>
-      <div
-        ref={footerRef}
-        className={responsivePaddingClass}
-        style={{
-          minHeight: 'var(--_ui5_bar_base_height)',
-          display: 'flex',
-          alignItems: 'center',
-          backgroundColor: ThemingParameters.sapPageFooter_Background,
-          borderTop: `0.0625rem solid ${ThemingParameters.sapPageFooter_BorderColor}`,
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          height: 'auto',
-          overflow: 'hidden',
-          ...style
-        }}
-      >
+    <footer className={classes.footer}>
+      <div ref={footerRef} className={classes.content} style={style}>
         <FlexBox
           justifyContent={FlexBoxJustifyContent.SpaceBetween}
           alignItems={FlexBoxAlignItems.Center}

packages/main/src/components/DynamicPage/DynamicPage.jss.ts

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { ResponsiveContainerPadding } from '../../internal/ContainerQueries';
 
 export const DynamicPageCssVariables = {
   headerDisplay: '--ui5wcr_DynamicPage_header_display',
@@ -7,6 +8,7 @@ export const DynamicPageCssVariables = {
 
 export const styles = {
   dynamicPage: {
+    container: 'DynamicPage / inline-size',
     width: '100%',
     height: '100%',
     maxHeight: '100%',
@@ -26,6 +28,12 @@ export const styles = {
       top: '-0.025rem'
     }
   },
+  header: {
+    extend: ResponsiveContainerPadding
+  },
+  title: {
+    extend: ResponsiveContainerPadding
+  },
   anchorBar: {
     position: 'sticky',
     boxShadow: ThemingParameters.sapContent_HeaderShadow,
@@ -36,6 +44,7 @@ export const styles = {
     }
   },
   contentContainer: {
+    extend: ResponsiveContainerPadding,
     paddingTop: '1rem',
     boxSizing: 'border-box',
     width: '100%',

packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`DynamicPage always show content header 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -209,7 +209,7 @@ exports[`DynamicPage always show content header 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
       style="top: 0px; z-index: 1;"
     >
@@ -257,7 +257,7 @@ exports[`DynamicPage always show content header 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -273,7 +273,7 @@ exports[`DynamicPage always show content header 1`] = `
         />
         <ui5-toggle-button
           accessible-name="Unpin Header"
-          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
           data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
@@ -285,7 +285,7 @@ exports[`DynamicPage always show content header 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     />
@@ -299,7 +299,7 @@ exports[`DynamicPage hider header button 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -407,7 +407,7 @@ exports[`DynamicPage hider header button 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
       style="top: 0px; z-index: 1;"
     >
@@ -455,7 +455,7 @@ exports[`DynamicPage hider header button 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -473,7 +473,7 @@ exports[`DynamicPage hider header button 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     >
@@ -671,7 +671,7 @@ exports[`DynamicPage render footer 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -688,7 +688,7 @@ exports[`DynamicPage render footer 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 1rem;"
     />
@@ -721,7 +721,7 @@ exports[`DynamicPage with content 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -924,7 +924,7 @@ exports[`DynamicPage with content 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
     >
       <div
@@ -971,7 +971,7 @@ exports[`DynamicPage with content 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -987,7 +987,7 @@ exports[`DynamicPage with content 1`] = `
         />
         <ui5-toggle-button
           accessible-name="Pin Header"
-          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
           data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
@@ -998,7 +998,7 @@ exports[`DynamicPage with content 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     >
@@ -1725,7 +1725,7 @@ exports[`DynamicPage without content 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -1928,7 +1928,7 @@ exports[`DynamicPage without content 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
     >
       <div
@@ -1975,7 +1975,7 @@ exports[`DynamicPage without content 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -1991,7 +1991,7 @@ exports[`DynamicPage without content 1`] = `
         />
         <ui5-toggle-button
           accessible-name="Pin Header"
-          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
           data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
@@ -2002,7 +2002,7 @@ exports[`DynamicPage without content 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     />

packages/main/src/components/DynamicPage/index.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  debounce,
-  enrichEventWithDetails,
-  ThemingParameters,
-  useResponsiveContentPadding,
-  useSyncRef
-} from '@ui5/webcomponents-react-base';
+import { debounce, enrichEventWithDetails, ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { cloneElement, forwardRef, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { createUseStyles } from 'react-jss';
@@ -242,8 +236,6 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
     }
   }, [alwaysShowContentHeader]);
 
-  const responsivePaddingClass = useResponsiveContentPadding(dynamicPageRef.current);
-
   const onDynamicPageScroll = (e) => {
     if (!isToggledRef.current) {
       isToggledRef.current = true;
@@ -283,18 +275,14 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
             !headerContent ||
             (!showHideHeaderButton && !headerContentPinnable),
           ref: componentRefTopHeader,
-          className: headerTitle?.props?.className
-            ? `${responsivePaddingClass} ${headerTitle.props.className}`
-            : responsivePaddingClass,
+          className: clsx(classes.title, headerTitle?.props?.className),
           onToggleHeaderContentVisibility: onToggleHeaderContentInternal
         })}
       {headerContent &&
         cloneElement(headerContent, {
           ref: componentRefHeaderContent,
           style: headerCollapsed === true ? { position: 'absolute', visibility: 'hidden' } : headerContent.props.style,
-          className: headerContent.props.className
-            ? `${responsivePaddingClass} ${headerContent.props.className}`
-            : responsivePaddingClass,
+          className: clsx(classes.header, headerContent?.props?.className),
           headerPinned: headerState === HEADER_STATES.VISIBLE_PINNED || headerState === HEADER_STATES.VISIBLE,
           topHeaderHeight
         })}
@@ -324,7 +312,7 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
       <div
         ref={contentRef}
         data-component-name="DynamicPageContent"
-        className={`${classes.contentContainer} ${responsivePaddingClass}`}
+        className={classes.contentContainer}
         style={{
           paddingBottom: footer ? '1rem' : 0
         }}