fix: Avoid width jump when resizing app layout (toolbar mode only) (#…

…3066)

src/app-layout/__integ__/app-layout-refresh-content-width.test.ts

@@ -63,7 +63,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
           `Browser viewPortWidth ${viewPortWidth}: contentType '${contentType}' has default width for content, navigation and tools slot.`,
           setupTest(viewPortWidth, async page => {
             await page.setContentType(contentType);
-            await expect(page.getContentWidth()).resolves.toBe(contentWidth);
+            await expect(page.getContentWidth()).resolves.toBe(theme === 'refresh' ? contentWidth : 1620);
 
             // Open the drawers and check their width
             await page.setDrawersOpen();

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

@@ -2,6 +2,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+@use 'sass:map' as map;
 @use '../../../internal/styles' as styles;
 @use '../../../internal/styles/tokens' as awsui;
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
@@ -61,11 +62,7 @@
     grid-template-rows: min-content min-content 1fr min-content;
 
     &.has-adaptive-widths-default {
-      @each $breakpoint, $width in constants.$adaptive-content-widths {
-        @include styles.media-breakpoint-up($breakpoint) {
-          #{custom-props.$maxContentWidth}: $width;
-        }
-      }
+      #{custom-props.$maxContentWidth}: map.get(constants.$adaptive-content-widths, styles.$breakpoint-xx-large);
     }
 
     &.has-adaptive-widths-dashboard {