Fix Page Layout components scrolling issue (#3347)

* fix(application-components): fix page layout components scrolling issue * chore: changeset added
commercetools · Dec 14, 2023 · 96a050a · 96a050a · github-actions · Dec 14, 2023
1 parent 77f3de5
commit 96a050a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 52 deletions.
diff --git a/.changeset/chilled-deers-shout.md b/.changeset/chilled-deers-shout.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-components': patch
+'@commercetools-frontend/application-shell': patch
+---
+
+Update Page Layout component and Custom Views styles so the former renders correctly in both Custom Applications and Custom Views.
diff --git a/packages/application-components/src/components/internals/page.styles.ts b/packages/application-components/src/components/internals/page.styles.ts
@@ -3,7 +3,7 @@ import { designTokens as appKitDesignTokens } from '../../theming';
 
 export const ContentWrapper = styled.div`
   flex: 1;
-  flex-basis: 0%;
+  flex-basis: 0;
   margin: ${appKitDesignTokens.marginForPageContent};
   overflow: auto;
 `;

diff --git a/packages/application-components/src/components/main-pages/internals/main-page.styles.ts b/packages/application-components/src/components/main-pages/internals/main-page.styles.ts
@@ -13,7 +13,7 @@ export const Divider = styled.hr`
 
 export const MainPageContent = styled.div`
   flex: 1;
-  flex-basis: 0%;
+  flex-basis: 0;
   overflow: auto;
   // NOTE: do not change to "padding" as this breaks sticky DataTable styles
   margin: ${appKitDesignTokens.marginForPageContent};

diff --git a/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx b/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx
@@ -27,6 +27,7 @@ import {
 } from '@commercetools-frontend/i18n';
 import { NotificationsList } from '@commercetools-frontend/react-notifications';
 import ApplicationLoader from '../application-loader/application-loader';
+import GlobalStyles from '../application-shell/global-styles';
 import ApplicationShellProvider from '../application-shell-provider';
 import { getBrowserLocale } from '../application-shell-provider/utils';
 import ConfigureIntlProvider from '../configure-intl-provider';
@@ -101,9 +102,9 @@ function StrictModeEnablement(props: TStrictModeEnablementProps) {
   }
 }
 
-/* 
+/*
   During e2e tests, the Custom View template is built in production mode but still runs on localhost.
-  Checking for local production mode is necessary for applying the development host URL, 
+  Checking for local production mode is necessary for applying the development host URL,
   creating an environment for testing interaction with the Custom View template.
 */
 const isLocalProdMode =
@@ -184,58 +185,61 @@ function CustomViewShell(props: TCustomViewShellProps) {
       : hostContext.hostUrl;
 
   return (
-    <ApplicationShellProvider
-      environment={window.app}
-      applicationMessages={props.applicationMessages}
-      apolloClient={props.apolloClient}
-    >
-      {({ isAuthenticated }) => {
-        if (isAuthenticated) {
-          return (
-            <CustomViewContextProvider
-              hostUrl={hostUrl}
-              customViewConfig={hostContext.customViewConfig}
-            >
-              <CustomViewShellAuthenticated
-                dataLocale={hostContext.dataLocale}
-                environment={window.app}
-                messages={props.applicationMessages}
-                projectKey={hostContext.projectKey}
+    <>
+      <GlobalStyles />
+      <ApplicationShellProvider
+        environment={window.app}
+        applicationMessages={props.applicationMessages}
+        apolloClient={props.apolloClient}
+      >
+        {({ isAuthenticated }) => {
+          if (isAuthenticated) {
+            return (
+              <CustomViewContextProvider
+                hostUrl={hostUrl}
                 customViewConfig={hostContext.customViewConfig}
               >
-                <PortalsContainer
-                  // @ts-ignore
-                  ref={layoutRefs}
-                />
-                <NotificationsContainer
-                  notificationsGlobalRef={notificationsGlobalRef}
-                  notificationsPageRef={notificationsPageRef}
-                />
-
-                <Route
-                  path={`/custom-views/${hostContext.customViewConfig.id}/projects/${hostContext.projectKey}`}
+                <CustomViewShellAuthenticated
+                  dataLocale={hostContext.dataLocale}
+                  environment={window.app}
+                  messages={props.applicationMessages}
+                  projectKey={hostContext.projectKey}
+                  customViewConfig={hostContext.customViewConfig}
                 >
-                  {props.children}
-                </Route>
-              </CustomViewShellAuthenticated>
-            </CustomViewContextProvider>
-          );
-        }
+                  <PortalsContainer
+                    // @ts-ignore
+                    ref={layoutRefs}
+                  />
+                  <NotificationsContainer
+                    notificationsGlobalRef={notificationsGlobalRef}
+                    notificationsPageRef={notificationsPageRef}
+                  />
 
-        return (
-          <AsyncLocaleData
-            locale={browserLocale}
-            applicationMessages={props.applicationMessages}
-          >
-            {({ locale, messages }) => (
-              <ConfigureIntlProvider locale={locale} messages={messages}>
-                <PageUnauthorized />
-              </ConfigureIntlProvider>
-            )}
-          </AsyncLocaleData>
-        );
-      }}
-    </ApplicationShellProvider>
+                  <Route
+                    path={`/custom-views/${hostContext.customViewConfig.id}/projects/${hostContext.projectKey}`}
+                  >
+                    {props.children}
+                  </Route>
+                </CustomViewShellAuthenticated>
+              </CustomViewContextProvider>
+            );
+          }
+
+          return (
+            <AsyncLocaleData
+              locale={browserLocale}
+              applicationMessages={props.applicationMessages}
+            >
+              {({ locale, messages }) => (
+                <ConfigureIntlProvider locale={locale} messages={messages}>
+                  <PageUnauthorized />
+                </ConfigureIntlProvider>
+              )}
+            </AsyncLocaleData>
+          );
+        }}
+      </ApplicationShellProvider>
+    </>
   );
 }