fix: When closing the Q panel, items in the panel header (title, button group), wrap and extend beyond the top and bottom of the toolbar

Author: georgylobko

build-tools/utils/custom-css-properties.js

@@ -18,6 +18,7 @@ const customCssPropertiesList = [
   'defaultMaxContentWidth',
   'defaultMinContentWidth',
   'drawerSize',
+  'drawerMinSize',
   'footerHeight',
   'headerGap',
   'headerHeight',

src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx

@@ -124,6 +124,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
                     blockSize: drawerHeight,
                     insetBlockStart: `${placement.insetBlockStart}px`,
                     ...(!isMobile && {
+                      [customCssProps.drawerMinSize]: `${size}px`,
                       [customCssProps.drawerSize]: `${['entering', 'entered'].includes(drawerTransitionState) ? size : 0}px`,
                     }),
                   }}

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

@@ -275,8 +275,7 @@ $drawer-resize-handle-size: awsui.$space-m;
     }
 
     > .drawer-content-container {
-      // 200px as a min size ensures the content does not wrap on exiting animation
-      min-inline-size: max(calc(var(#{custom-props.$drawerSize}) - #{awsui.$space-xs}), 200px);
+      min-inline-size: calc(var(#{custom-props.$drawerMinSize}) - #{awsui.$space-xs});
       grid-column: 1 / span 1;
       background-color: awsui.$color-background-layout-panel-content;