Place description below buttons

Author: jperals

src/split-panel/implementation.tsx

@@ -115,49 +115,54 @@ export function SplitPanelImplementation({
           </div>
           {headerActions && <div className={styles['header-actions-slot']}>{headerActions}</div>}
         </div>
-        {showDescription && <p className={styles['header-description']}>{headerDescription}</p>}
-      </div>
-      <div className={styles['header-actions']}>
-        {!hidePreferencesButton && isOpen && (
-          <>
+        <div className={styles['header-actions']}>
+          {!hidePreferencesButton && isOpen && (
+            <>
+              <InternalButton
+                className={testUtilStyles['preferences-button']}
+                iconName="settings"
+                variant="icon"
+                onClick={() => setPreferencesOpen(true)}
+                formAction="none"
+                ariaLabel={i18nStrings.preferencesTitle}
+                ref={refs.preferences}
+              />
+              <span className={styles.divider} />
+            </>
+          )}
+
+          {isOpen ? (
             <InternalButton
-              className={testUtilStyles['preferences-button']}
-              iconName="settings"
+              className={testUtilStyles['close-button']}
+              iconName={
+                isRefresh && closeBehavior === 'collapse'
+                  ? position === 'side'
+                    ? 'angle-right'
+                    : 'angle-down'
+                  : 'close'
+              }
               variant="icon"
-              onClick={() => setPreferencesOpen(true)}
+              onClick={onToggle}
               formAction="none"
-              ariaLabel={i18nStrings.preferencesTitle}
-              ref={refs.preferences}
+              ariaLabel={i18nStrings.closeButtonAriaLabel}
+              ariaExpanded={isOpen}
             />
-            <span className={styles.divider} />
-          </>
-        )}
-
-        {isOpen ? (
-          <InternalButton
-            className={testUtilStyles['close-button']}
-            iconName={
-              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'
-            }
-            variant="icon"
-            onClick={onToggle}
-            formAction="none"
-            ariaLabel={i18nStrings.closeButtonAriaLabel}
-            ariaExpanded={isOpen}
-          />
-        ) : position === 'side' || closeBehavior === 'hide' ? null : (
-          <InternalButton
-            className={testUtilStyles['open-button']}
-            iconName="angle-up"
-            variant="icon"
-            formAction="none"
-            ariaLabel={i18nStrings.openButtonAriaLabel}
-            ref={refs.toggle}
-            ariaExpanded={isOpen}
-            onClick={hasCustomElements ? onToggle : undefined}
-          />
-        )}
+          ) : position === 'side' || closeBehavior === 'hide' ? null : (
+            <InternalButton
+              className={testUtilStyles['open-button']}
+              iconName="angle-up"
+              variant="icon"
+              formAction="none"
+              ariaLabel={i18nStrings.openButtonAriaLabel}
+              ref={refs.toggle}
+              ariaExpanded={isOpen}
+              onClick={hasCustomElements ? onToggle : undefined}
+            />
+          )}
+        </div>
       </div>
+
+      {showDescription && <p className={styles['header-description']}>{headerDescription}</p>}
     </div>
   );
 

src/split-panel/styles.scss

@@ -228,18 +228,21 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 }
 
 .header {
-  display: flex;
-  flex: auto;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
   inline-size: 100%;
   margin-block: awsui.$size-vertical-panel-icon-offset;
   margin-inline: 0;
   &.with-toolbar {
     margin-block: constants.$toolbar-vertical-panel-icon-offset;
   }
 
+  &-content,
+  &-start,
+  &-main-row,
+  &-text-and-info {
+    display: flex;
+    flex-grow: 1;
+  }
+
   &-content,
   &-start,
   &-text-and-info {
@@ -249,12 +252,22 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   &-main-row,
   &-start,
   &-text-and-info {
-    display: flex;
     flex-wrap: wrap;
     column-gap: awsui.$space-scaled-xs;
     row-gap: awsui.$space-scaled-xxs;
   }
 
+  &-content {
+    align-items: flex-start;
+  }
+
+  &-main-row {
+    flex: auto;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
   &-start {
     align-items: center;
   }