From bb292b4cc55f3ea99461ce066e41c6e117158b2c Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Fri, 4 Oct 2024 15:12:45 +0200
Subject: [PATCH 1/3] fix: Empty notifications height

---
 src/app-layout/visual-refresh-toolbar/index.tsx          | 1 +
 src/app-layout/visual-refresh-toolbar/interfaces.ts      | 1 +
 .../visual-refresh-toolbar/notifications/index.tsx       | 9 +++++++--
 .../visual-refresh-toolbar/notifications/styles.scss     | 6 ++++++
 .../visual-refresh-toolbar/skeleton/styles.scss          | 3 ---
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index 52a3636df1..5cae26424f 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -326,6 +326,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       setToolbarState,
       verticalOffsets,
       drawersOpenQueue,
+      notificationsHeight,
       setToolbarHeight,
       setNotificationsHeight,
       onSplitPanelToggle: onSplitPanelToggleHandler,
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 084bd8d752..a32488f05f 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -54,4 +54,5 @@ export interface AppLayoutInternals {
   onActiveGlobalDrawersChange: (newDrawerId: string) => void;
   toolsOpen: boolean;
   onToolsToggle: (value: boolean) => void;
+  notificationsHeight: number;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/notifications/index.tsx b/src/app-layout/visual-refresh-toolbar/notifications/index.tsx
index ab7262b268..f139089311 100644
--- a/src/app-layout/visual-refresh-toolbar/notifications/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/notifications/index.tsx
@@ -21,8 +21,10 @@ export function AppLayoutNotificationsImplementation({
   appLayoutInternals,
   children,
 }: AppLayoutNotificationsImplementationProps) {
-  const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;
+  const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets, notificationsHeight } =
+    appLayoutInternals;
   const ref = useRef<HTMLElement>(null);
+  const hasNotificationsContent = notificationsHeight > 0;
   useResizeObserver(ref, entry => setNotificationsHeight(entry.borderBoxHeight));
   useEffect(() => {
     return () => {
@@ -34,7 +36,10 @@ export function AppLayoutNotificationsImplementation({
   return (
     <NotificationsSlot
       ref={ref}
-      className={clsx(stickyNotifications && styles['sticky-notifications'])}
+      className={clsx(
+        stickyNotifications && styles['sticky-notifications'],
+        hasNotificationsContent && styles['has-notifications-content']
+      )}
       style={{
         insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,
       }}
diff --git a/src/app-layout/visual-refresh-toolbar/notifications/styles.scss b/src/app-layout/visual-refresh-toolbar/notifications/styles.scss
index e8daa194e2..b2d54fd5dc 100644
--- a/src/app-layout/visual-refresh-toolbar/notifications/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/notifications/styles.scss
@@ -2,7 +2,13 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+@use '../../../internal/styles/tokens' as awsui;
+
 .sticky-notifications {
   position: sticky;
   z-index: 850;
 }
+
+.has-notifications-content {
+  padding-block-start: awsui.$space-scaled-xs;
+}
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index e22439c092..5599287f67 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -156,9 +156,6 @@
 
 .notifications-container {
   grid-area: notifications;
-  &:not(:empty) {
-    padding-block-start: awsui.$space-scaled-xs;
-  }
 }
 
 .main-landmark {

From 57c7bdb0aacfdc69db19d1855ea24b6b59df9fee Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Mon, 7 Oct 2024 10:23:11 +0200
Subject: [PATCH 2/3] fix: Calculate notifications' height based on child
 element

---
 .../visual-refresh-toolbar/notifications/index.tsx           | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app-layout/visual-refresh-toolbar/notifications/index.tsx b/src/app-layout/visual-refresh-toolbar/notifications/index.tsx
index f139089311..9b2206b197 100644
--- a/src/app-layout/visual-refresh-toolbar/notifications/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/notifications/index.tsx
@@ -23,7 +23,7 @@ export function AppLayoutNotificationsImplementation({
 }: AppLayoutNotificationsImplementationProps) {
   const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets, notificationsHeight } =
     appLayoutInternals;
-  const ref = useRef<HTMLElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const hasNotificationsContent = notificationsHeight > 0;
   useResizeObserver(ref, entry => setNotificationsHeight(entry.borderBoxHeight));
   useEffect(() => {
@@ -35,7 +35,6 @@ export function AppLayoutNotificationsImplementation({
   }, []);
   return (
     <NotificationsSlot
-      ref={ref}
       className={clsx(
         stickyNotifications && styles['sticky-notifications'],
         hasNotificationsContent && styles['has-notifications-content']
@@ -44,7 +43,7 @@ export function AppLayoutNotificationsImplementation({
         insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,
       }}
     >
-      <div className={testutilStyles.notifications} role="region" aria-label={ariaLabels?.notifications}>
+      <div ref={ref} className={testutilStyles.notifications} role="region" aria-label={ariaLabels?.notifications}>
         {children}
       </div>
     </NotificationsSlot>

From ba300cc3f73c4bbc18993c8d79f969cd81efe2c7 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Mon, 7 Oct 2024 12:30:12 +0200
Subject: [PATCH 3/3] fix: Take tokens.spaceXs into sticky top offset
 calculation

---
 src/app-layout/visual-refresh-toolbar/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index 5cae26424f..e5f51881df 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -5,6 +5,7 @@ import React, { useEffect, useImperativeHandle, useState } from 'react';
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { fireNonCancelableEvent } from '../../internal/events';
+import * as tokens from '../../internal/generated/styles/tokens';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { useMobile } from '../../internal/hooks/use-mobile';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
@@ -378,7 +379,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
         {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}
         <SkeletonLayout
           style={{
-            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
+            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px + ${resolvedStickyNotifications && notificationsHeight > 0 ? tokens.spaceXs : '0px'}`,
             [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,
             paddingBlockEnd: splitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : '',
           }}