From 5304f73ef6208cb82e29e4eb2c74a65c1404ad3c Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.de>
Date: Thu, 17 Oct 2024 13:47:15 +0200
Subject: [PATCH 1/2] fix: Constain main content when content paddings are
 disabled in toolbar

---
 ...disable-paddings-with-split-panel.page.tsx | 32 +++++++++++++++++--
 .../skeleton/styles.scss                      |  7 ++--
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/pages/app-layout/disable-paddings-with-split-panel.page.tsx b/pages/app-layout/disable-paddings-with-split-panel.page.tsx
index e7b3a9596a..086816d3bd 100644
--- a/pages/app-layout/disable-paddings-with-split-panel.page.tsx
+++ b/pages/app-layout/disable-paddings-with-split-panel.page.tsx
@@ -1,16 +1,29 @@
 // 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}
@@ -18,6 +31,13 @@ export default function () {
       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>
+      }
     />
   );
 }
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index 75ea6f8755..fe68a97f3a 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/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;
   }
 }
 
@@ -139,7 +139,10 @@
   z-index: 840;
   align-self: end;
   grid-area: main;
-  @include grid-column-full-content-width;
+  grid-column: 1 / -1;
+  @include desktop-only {
+    grid-column: 2 / span 4;
+  }
 }
 
 .panel-hidden {

From af780f0ac643eecdcfca790b7b0aed2d388fce65 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.de>
Date: Thu, 17 Oct 2024 15:01:49 +0200
Subject: [PATCH 2/2] chore: Address PR feedback

---
 src/app-layout/visual-refresh-toolbar/skeleton/styles.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index fe68a97f3a..ee69296b84 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -139,10 +139,7 @@
   z-index: 840;
   align-self: end;
   grid-area: main;
-  grid-column: 1 / -1;
-  @include desktop-only {
-    grid-column: 2 / span 4;
-  }
+  @include grid-column-full-content-width;
 }
 
 .panel-hidden {