chore: Adds background color to page and permutation containers (#2655)

pages/app/components/page-view.scss

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '~design-tokens' as tokens;
+
+/*
+ This sets a background color to the page's container
+ to reveal the effects of negative z-index.
+*/
+.page-container {
+  background-color: tokens.$color-background-container-content;
+}

pages/app/components/page-view.tsx

@@ -5,6 +5,8 @@ import React, { lazy, Suspense } from 'react';
 import pagesContext from '../pages-context';
 import ErrorBoundary from './error-boundary';
 
+import styles from './page-view.scss';
+
 const pagesComponents: Record<string, ReturnType<typeof lazy>> = {};
 
 export default function PageView({ pageId }: { pageId: string }) {
@@ -15,7 +17,9 @@ export default function PageView({ pageId }: { pageId: string }) {
   return (
     <ErrorBoundary key={pageId}>
       <Suspense fallback={<span>Loading...</span>}>
-        <Page />
+        <div className={styles['page-container']}>
+          <Page />
+        </div>
       </Suspense>
     </ErrorBoundary>
   );