fix: Drawer gutter with iframe content (#3537)

Author: georgylobko

pages/app-layout/utils/external-widget.tsx

@@ -8,6 +8,7 @@ import ButtonDropdown from '~components/button-dropdown';
 import Drawer from '~components/drawer';
 import awsuiPlugins from '~components/internal/plugins';
 
+import { IframeWrapper } from '../../utils/iframe-wrapper';
 import { Counter, CustomDrawerContent } from './content-blocks';
 
 const searchParams = new URL(location.hash.substring(1), location.href).searchParams;
@@ -239,10 +240,15 @@ awsuiPlugins.appLayout.registerDrawer({
 
   mountContent: container => {
     ReactDOM.render(
-      <>
-        <Counter id="circle3-global" />
-        global widget content circle 3
-      </>,
+      <IframeWrapper
+        id="circle3-global"
+        AppComponent={() => (
+          <>
+            <Counter id="circle3-global" />
+            global widget content circle 3
+          </>
+        )}
+      />,
       container
     );
   },

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

@@ -178,6 +178,7 @@ $drawer-resize-handle-size: awsui.$space-m;
       inline-size: $global-drawer-gap-size;
       background: awsui.$color-gap-global-drawer;
       border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      box-sizing: border-box;
     }
 
     > .drawer-slider {