fix(react-ui): add content wrapper and set max width for notification…

… component (#1028)

* fix(react-ui): add wrapper for notification component

* chore: add changeset for react-ui notification update

* fix(react-ui): move spacing to wrapper

.changeset/three-shrimps-give.md

@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Add max-width to notification content

packages/libs/react-ui/src/components/Notification/Notification.css.ts

@@ -20,14 +20,26 @@ export const containerClass = style([
     alignItems: 'flex-start',
     borderRadius: '$sm',
     padding: '$md',
-    gap: '$md',
     borderStyle: 'solid',
+    justifyContent: 'center',
   }),
   {
     borderLeftWidth: vars.sizes.$1,
   },
 ]);
 
+export const containerWrapperClass = style([
+  sprinkles({
+    display: 'flex',
+    width: '100%',
+    alignItems: 'flex-start',
+    gap: '$md',
+  }),
+  {
+    maxWidth: 1440,
+  },
+]);
+
 export const cardColorVariants = styleVariants(colorVariants, (color) => {
   return [
     sprinkles({

packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx

@@ -4,6 +4,7 @@ import {
   closeButtonClass,
   colorVariants,
   containerClass,
+  containerWrapperClass,
   contentClass,
   descriptionClass,
   displayVariants,
@@ -60,22 +61,24 @@ export const NotificationContainer: FC<INotificationProps> = ({
 
   return (
     <div className={classList}>
-      <Icon size="md" />
+      <div className={containerWrapperClass}>
+        <Icon size="md" />
 
-      <div className={contentClassList}>
-        {title && <h4>{title}</h4>}
-        <div className={descriptionClassList}>{children}</div>
-      </div>
+        <div className={contentClassList}>
+          {title && <h4>{title}</h4>}
+          <div className={descriptionClassList}>{children}</div>
+        </div>
 
-      {hasCloseButton && (
-        <button
-          className={closeButtonClass}
-          onClick={onClose}
-          aria-label="Close Notification"
-        >
-          <SystemIcon.Close size="md" />
-        </button>
-      )}
+        {hasCloseButton && (
+          <button
+            className={closeButtonClass}
+            onClick={onClose}
+            aria-label="Close Notification"
+          >
+            <SystemIcon.Close size="md" />
+          </button>
+        )}
+      </div>
     </div>
   );
 };