diff --git a/.changeset/chilled-deers-shout.md b/.changeset/chilled-deers-shout.md
new file mode 100644
index 0000000000..ccff34768e
--- /dev/null
+++ 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
index 3f71f46744..83bfbc4dbe 100644
--- 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
index cc88b868c3..51ab0e0928 100644
--- 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
index 32cd48c364..795f5e5d3b 100644
--- 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 (
-
- {({ isAuthenticated }) => {
- if (isAuthenticated) {
- return (
-
-
+
+
+ {({ isAuthenticated }) => {
+ if (isAuthenticated) {
+ return (
+
-
-
-
-
- {props.children}
-
-
-
- );
- }
+
+
- return (
-
- {({ locale, messages }) => (
-
-
-
- )}
-
- );
- }}
-
+
+ {props.children}
+
+
+
+ );
+ }
+
+ return (
+
+ {({ locale, messages }) => (
+
+
+
+ )}
+
+ );
+ }}
+
+ >
);
}