chore: Make bottom drawer's header and actions always aligned

Author: georgylobko

package.json

@@ -176,7 +176,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "977 kB",
+      "limit": "978 kB",
       "ignore": "react-dom"
     }
   ],

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

@@ -332,19 +332,28 @@ export const registerRuntimeBottomDrawer = () => {
 
     mountContent: (container, mountContext) => {
       mount(
-        <Drawer header={<Box variant="h2">Global drawer</Box>}>
+        <Box padding={{ left: 'm' }}>
           <AutoIncrementCounter onVisibilityChange={mountContext?.onVisibilityChange}>
             global bottom panel
             {new Array(100).fill(null).map((_, index) => (
               <div key={index}>{index}</div>
             ))}
             <div data-testid="circle-global-bottom-content">circle-global bottom content</div>
           </AutoIncrementCounter>
-        </Drawer>,
+        </Box>,
         container
       );
     },
     unmountContent: container => unmount(container),
+    mountHeader: container => {
+      mount(
+        <Box variant="h2" padding="m">
+          Global drawer
+        </Box>,
+        container
+      );
+    },
+    unmountHeader: container => unmount(container),
     headerActions: [
       {
         type: 'icon-button',

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

@@ -81,6 +81,7 @@ function AppLayoutGlobalBottomDrawerImplementation({
     placement,
   } = widgetizedState;
   const drawerRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLHeadingElement>(null);
   const activeDrawerId = activeDrawer?.id ?? '';
 
   const computedAriaLabels = {
@@ -258,43 +259,50 @@ function AppLayoutGlobalBottomDrawerImplementation({
                   />
                 </div>
               )}
+              <header className={styles['bottom-drawer-content-header']} ref={headerRef}>
+                <div className={styles['bottom-drawer-content-header-content']}>
+                  {activeDrawer?.header ?? <div />}
+                  <div className={styles['bottom-drawer-actions']}>
+                    <ButtonGroup
+                      dropdownExpandToViewport={false}
+                      variant="icon"
+                      onItemClick={event => {
+                        switch (event.detail.id) {
+                          case 'close':
+                            onActiveGlobalBottomDrawerChange(null, { initiatedByUserAction: true });
+                            break;
+                          case 'expand':
+                            setExpandedDrawerId(isExpanded ? null : activeDrawerId);
+                            break;
+                          default:
+                            activeDrawer?.onHeaderActionClick?.(event);
+                        }
+                      }}
+                      ariaLabel="Global panel actions"
+                      items={drawerActions}
+                      __internalRootRef={(root: HTMLElement) => {
+                        if (!root) {
+                          return;
+                        }
+                        refs.close = {
+                          current: root.querySelector('[data-itemid="close"]') as unknown as Focusable,
+                        };
+                      }}
+                    />
+                  </div>
+                </div>
+              </header>
               <div
                 className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}
                 data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
               >
-                <div className={styles['drawer-actions']}>
-                  <ButtonGroup
-                    dropdownExpandToViewport={false}
-                    variant="icon"
-                    onItemClick={event => {
-                      switch (event.detail.id) {
-                        case 'close':
-                          onActiveGlobalBottomDrawerChange(null, { initiatedByUserAction: true });
-                          break;
-                        case 'expand':
-                          setExpandedDrawerId(isExpanded ? null : activeDrawerId);
-                          break;
-                        default:
-                          activeDrawer?.onHeaderActionClick?.(event);
-                      }
-                    }}
-                    ariaLabel="Global panel actions"
-                    items={drawerActions}
-                    __internalRootRef={(root: HTMLElement) => {
-                      if (!root) {
-                        return;
-                      }
-                      refs.close = { current: root.querySelector('[data-itemid="close"]') as unknown as Focusable };
-                    }}
-                  />
-                </div>
                 <div
                   className={styles['drawer-content']}
                   style={{
                     blockSize:
                       isMobile || isExpanded
                         ? drawerFullScreenHeight
-                        : `${size - GAP_HEIGHT - RESIZE_HANDLER_HEIGHT}px`,
+                        : `${size - GAP_HEIGHT - RESIZE_HANDLER_HEIGHT - (headerRef?.current?.clientHeight ?? 0)}px`,
                   }}
                 >
                   {activeDrawer?.content}

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

@@ -457,6 +457,27 @@ $ai-drawer-heider-height: 41px;
         justify-content: center;
       }
 
+      > .bottom-drawer-content-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        inset-block-start: 0;
+        box-sizing: border-box;
+
+        > .bottom-drawer-content-header-content {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: space-between;
+          block-size: 100%;
+          padding-inline-end: awsui.$space-m;
+
+          > .bottom-drawer-actions {
+            display: flex;
+          }
+        }
+      }
+
       > .drawer-content-container {
         grid-template-columns: 1fr;
         grid-template-rows: auto;

src/app-layout/visual-refresh-toolbar/state/use-bottom-drawers.ts

@@ -4,7 +4,7 @@ import { MutableRefObject, useRef, useState } from 'react';
 
 import { fireNonCancelableEvent } from '../../../internal/events';
 import { DrawerPayload, WidgetMessage } from '../../../internal/plugins/widget/interfaces';
-import { mapRuntimeConfigToDrawer } from '../../runtime-drawer';
+import { mapRuntimeConfigToAiDrawer } from '../../runtime-drawer';
 
 export interface OnChangeParams {
   initiatedByUserAction: boolean;
@@ -32,7 +32,7 @@ export function useBottomDrawers({
   const [runtimeBottomDrawers, setRuntimeBottomDrawers] = useState<Array<DrawerPayload>>([]);
   const bottomDrawerWasOpenRef = useRef(false);
   bottomDrawerWasOpenRef.current = bottomDrawerWasOpenRef.current || !!activeBottomDrawerId;
-  const bottomDrawers = runtimeBottomDrawers.map(mapRuntimeConfigToDrawer);
+  const bottomDrawers = runtimeBottomDrawers.map(mapRuntimeConfigToAiDrawer);
 
   function onActiveBottomDrawerResize({ id, size }: { id: string; size: number }) {
     setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));