Fix hover shadow on toasts (#632)

* Fix hover shadow on toasts
elastic · Apr 4, 2018 · b2cc8ec · b2cc8ec
1 parent be932fa
commit b2cc8ec
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.39`.
+**Bug fixes**
+
+- Fix visual shadow glitch on hover of `EuiToast` ([#632](https://github.com/elastic/eui/pull/632))
 
 # [`0.0.39`](https://github.com/elastic/eui/tree/v0.0.39)
 

diff --git a/src-docs/src/views/toast/toast_example.js b/src-docs/src/views/toast/toast_example.js
@@ -55,7 +55,7 @@ export const ToastExample = {
       EuiGlobalToastListItem,
     },
     demo: (
-      <div style={{ width: 320 }}>
+      <div style={{ maxWidth: 320 }}>
         <EuiButton onClick={addToast}>
           Add toast to global toast list
         </EuiButton>
@@ -89,7 +89,7 @@ export const ToastExample = {
       </div>
     ),
     demo: (
-      <div style={{ width: 320 }}>
+      <div style={{ maxWidth: 320 }}>
         <Default />
       </div>
     ),
@@ -108,7 +108,7 @@ export const ToastExample = {
       </p>
     ),
     demo: (
-      <div style={{ width: 320 }}>
+      <div style={{ maxWidth: 320 }}>
         <Info />
       </div>
     ),
@@ -127,7 +127,7 @@ export const ToastExample = {
       </p>
     ),
     demo: (
-      <div style={{ width: 320 }}>
+      <div style={{ maxWidth: 320 }}>
         <Success />
       </div>
     ),
@@ -146,7 +146,7 @@ export const ToastExample = {
       </p>
     ),
     demo: (
-      <div style={{ width: 320 }}>
+      <div style={{ maxWidth: 320 }}>
         <Warning />
       </div>
     ),
@@ -165,7 +165,7 @@ export const ToastExample = {
       </p>
     ),
     demo: (
-      <div style={{ width: 320 }}>
+      <div style={{ maxWidth: 320 }}>
         <Danger />
       </div>
     ),

diff --git a/src/components/toast/_global_toast_list.scss b/src/components/toast/_global_toast_list.scss
@@ -13,8 +13,9 @@
   z-index: $euiZToastList;
   bottom: 0;
   right: 0;
-  width: $euiToastWidth + $euiSize; /* 3 */
+  width: $euiToastWidth + $euiSize + $euiSizeXL; /* 3 */
   padding-right: $euiSize;
+  padding-left: $euiSizeXL;
   max-height: 100vh; /* 1 */
 
   &:hover {
@@ -64,4 +65,3 @@
     width: 100%; /* 1 */
   }
 }
-