Chore: AppNotificationList- Replace VerticalGroup with Stack (#86612)

.betterer.results

@@ -1130,9 +1130,6 @@ exports[`better eslint`] = {
     "public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/core/components/AppNotifications/AppNotificationList.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/core/components/DynamicImports/SafeDynamicImport.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

public/app/core/components/AppNotifications/AppNotificationList.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { useEffect } from 'react';
 
 import { AppEvents, GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, VerticalGroup } from '@grafana/ui';
+import { useStyles2, Stack } from '@grafana/ui';
 import { notifyApp, hideAppNotification } from 'app/core/actions';
 import appEvents from 'app/core/app_events';
 import { selectVisible } from 'app/core/reducers/appNotification';
@@ -33,7 +33,7 @@ export function AppNotificationList() {
 
   return (
     <div className={styles.wrapper}>
-      <VerticalGroup>
+      <Stack direction="column">
         {appNotifications.map((appNotification, index) => {
           return (
             <AppNotificationItem
@@ -43,7 +43,7 @@ export function AppNotificationList() {
             />
           );
         })}
-      </VerticalGroup>
+      </Stack>
     </div>
   );
 }