fix(fuselage): ToastBar style (#725)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>

Author: dougfabris

packages/fuselage/src/components/ToastBar/ToastBar.tsx

@@ -11,7 +11,6 @@ export type ToastBarProps = {
   variant?: 'info' | 'success' | 'error';
   className?: string;
   children?: ReactNode;
-  size?: string;
   time?: number;
   id?: string;
   onClose?: (id: string) => void;
@@ -21,7 +20,6 @@ export function ToastBar({
   children,
   className = '',
   variant = 'info',
-  size,
   time = 5,
   id,
   onClose,
@@ -65,11 +63,7 @@ export function ToastBar({
 
   return (
     <Box className={['rcx-toastbar-wrapper', toastBarAnimation]}>
-      <div
-        className={`rcx-toastbar rcx-toastbar--${variant} ${
-          size === 'large' ? 'rcx-toastbar--large' : ''
-        } ${className}`}
-      >
+      <div className={`rcx-toastbar rcx-toastbar--${variant} ${className}`}>
         <div className='rcx-toastbar-inner'>
           <Icon size='x20' name={iconName} />
           <div className='rcx-toastbar-content'>{children}</div>

packages/fuselage/src/components/ToastBar/styles.scss

@@ -3,20 +3,15 @@
 @use '../../styles/typography.scss';
 
 .rcx-toastbar {
+  position: relative;
+
   min-width: lengths.size(232);
   max-width: lengths.size(416);
 
   border-radius: lengths.border-radius(4);
 
   @include typography.use-font-scale(p2);
 
-  &--large {
-    max-width: lengths.size(360);
-    @include on-breakpoint(md) {
-      max-width: lengths.size(580);
-    }
-  }
-
   &--info {
     background-color: colors.neutral(100);
   }