fix: Constrain main content when content paddings are disabled in toolbar

pages/app-layout/disable-paddings-with-split-panel.page.tsx

@@ -1,23 +1,43 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useContext } from 'react';
 
-import AppLayout from '~components/app-layout';
+import AppLayout, { AppLayoutProps } from '~components/app-layout';
 import Box from '~components/box';
 import SplitPanel from '~components/split-panel';
 
+import AppContext, { AppContextType } from '../app/app-context';
 import { Breadcrumbs, Navigation, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
 import * as toolsContent from './utils/tools-content';
 
+type SplitPanelDemoContext = React.Context<
+  AppContextType<{
+    splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
+    splitPanelOpen: boolean;
+  }>
+>;
+
 export default function () {
+  const {
+    urlParams: { splitPanelPosition, splitPanelOpen = false },
+    setUrlParams,
+  } = useContext(AppContext as SplitPanelDemoContext);
+
   return (
     <AppLayout
       disableContentPaddings={true}
       ariaLabels={labels}
       breadcrumbs={<Breadcrumbs />}
       navigation={<Navigation />}
       tools={<Tools>{toolsContent.long}</Tools>}
+      splitPanelPreferences={{ position: splitPanelPosition }}
+      onSplitPanelPreferencesChange={event => {
+        const { position } = event.detail;
+        setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
+      }}
+      splitPanelOpen={splitPanelOpen}
+      onSplitPanelToggle={event => setUrlParams({ splitPanelOpen: event.detail.open })}
       splitPanel={
         <SplitPanel
           header="Split panel header"
@@ -37,7 +57,13 @@ export default function () {
           <Box>Content</Box>
         </SplitPanel>
       }
-      content={<Box variant="h1">Content</Box>}
+      content={
+        <Box padding="m">
+          <div style={{ border: '1px solid magenta' }}>
+            <Box variant="h1">Content</Box>
+          </div>
+        </Box>
+      }
     />
   );
 }

src/app-layout/visual-refresh-toolbar/skeleton/styles.scss

@@ -22,7 +22,7 @@
 @mixin grid-column-full-content-width {
   grid-column: 1 / -1;
   @include desktop-only {
-    grid-column: 2 / span 4;
+    grid-column: 2 / 5;
   }
 }