fix: Aligns drawers slider to split panel and matches side nav animat…

…ion (#1587)

Co-authored-by: Katie George <[email protected]>

src/app-layout/visual-refresh/drawers.scss

@@ -21,10 +21,10 @@
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
     box-shadow: awsui.$shadow-panel;
-  }
 
-  @include styles.with-motion {
-    transition: background-color awsui.$motion-duration-refresh-only-fast;
+    @include styles.with-motion {
+      transition: background-color awsui.$motion-duration-refresh-only-fast;
+    }
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -156,7 +156,7 @@
 
   > .drawer-slider {
     grid-column: 1;
-    grid-row: 3;
+    grid-row: 1 / span 3;
     height: 100%;
     display: flex;
     align-items: center;

src/app-layout/visual-refresh/drawers.tsx

@@ -92,11 +92,12 @@ function ActiveDrawer() {
       id={activeDrawerId}
       aria-hidden={isHidden}
       aria-label={computedAriaLabels.content}
-      className={clsx(styles.drawer, sharedStyles['with-motion'], {
+      className={clsx(styles.drawer, {
         [styles['is-drawer-open']]: activeDrawerId,
         [styles.unfocusable]: isUnfocusable,
         [testutilStyles['active-drawer']]: activeDrawerId,
         [testutilStyles.tools]: isToolsDrawer,
+        [sharedStyles['with-motion']]: activeDrawerId,
       })}
       style={{
         ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),