fix(snackbar): prevent snackbar components to flex (appart main content)

adevinta · Apr 3, 2024 · cf09d89 · cf09d89
1 parent e40f336
commit cf09d89
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/components/snackbar/src/SnackbarItemAction.tsx b/packages/components/snackbar/src/SnackbarItemAction.tsx
@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from '@spark-ui/button'
+import { cx } from 'class-variance-authority'
 import { forwardRef } from 'react'
 
 import type { SnackbarItemVariantProps } from './SnackbarItem.styles'
@@ -42,7 +43,7 @@ export const SnackbarItemAction = forwardRef<HTMLButtonElement, SnackbarItemActi
           onClick?.(e)
           state.close(toast.key)
         }}
-        className={className}
+        className={cx('flex-none', className)}
         {...rest}
       >
         {children}

diff --git a/packages/components/snackbar/src/SnackbarItemClose.tsx b/packages/components/snackbar/src/SnackbarItemClose.tsx
@@ -1,6 +1,7 @@
 import { Icon } from '@spark-ui/icon'
 import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
 import { Close } from '@spark-ui/icons/dist/icons/Close'
+import { cx } from 'class-variance-authority'
 import { type ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import type { SnackbarItemVariantProps } from './SnackbarItem.styles'
@@ -47,7 +48,7 @@ export const SnackbarItemClose = forwardRef<HTMLButtonElement, SnackbarItemClose
           onClick?.(e)
           state.close(toast.key)
         }}
-        className={className}
+        className={cx('flex-none', className)}
         {...rest}
       >
         <Icon size="sm">

diff --git a/packages/components/snackbar/src/SnackbarItemIcon.tsx b/packages/components/snackbar/src/SnackbarItemIcon.tsx
@@ -9,7 +9,7 @@ export const SnackbarItemIcon = ({
   className,
   ...rest
 }: SnackbarItemIconProps): ReactElement => (
-  <Icon size="sm" className={cx('ml-md', className)} {...rest}>
+  <Icon size="sm" className={cx('ml-md flex-none', className)} {...rest}>
     {children}
   </Icon>
 )