[EuiPanel] Adjust panel border z-index

packages/eui/changelogs/upcoming/8519.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed a visual issue of overlapping borders for layered `EuiPanel`s
+

packages/eui/src/components/panel/panel.stories.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -45,3 +46,31 @@ export const Playground: Story = {
     children: 'Panel content',
   },
 };
+
+/* Verifying that borders are applied in correct order */
+export const OverlappingPanels: Story = {
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+  args: {
+    children: 'Panel content',
+  },
+  render: function Render(args: EuiPanelProps) {
+    return (
+      <>
+        <EuiPanel {...args} />
+        <EuiPanel
+          {...args}
+          css={({ euiTheme }) => ({
+            top: `-${euiTheme.size.m}`,
+          })}
+        />
+        <EuiPanel
+          {...args}
+          css={({ euiTheme }) => ({
+            top: `-${euiTheme.size.l}`,
+          })}
+        />
+      </>
+    );
+  },
+};

packages/eui/src/components/panel/panel.styles.ts

@@ -36,11 +36,11 @@ export const euiPanelBorderStyles = (
       /* Using a pseudo element for the border instead of floating border only 
       because the transparent border might otherwise be visible with arbitrary 
       full-width/height content in light mode. */
-      &::before {
+      &::after {
         content: '';
         position: absolute;
         /* ensure to keep on top of flush content */
-        z-index: 1;
+        z-index: 0;
         inset: 0;
         border: ${euiTheme.border.width.thin} solid
           ${

packages/eui/src/components/toast/toast.styles.ts

@@ -26,7 +26,7 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
     color: string,
     width?: CSSProperties['borderWidth']
   ) => `
-    &:after {
+    &:before {
       content: '';
       position: absolute;
       /* ensure highlight border is on top of panel border */
@@ -80,7 +80,7 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
           preferred: `
             ${highlightStyles(color, borderWidth)}
 
-            &::after {
+            &::before {
               ${logicalCSS(
                 'width',
                 `calc(100% + ${mathWithUnits(
@@ -96,7 +96,7 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
           forced: `
             overflow: hidden;
 
-            &::after {
+            &::before {
               content: '';
               position: absolute;
               ${logicalCSS('top', 0)}