From fe176ab52ee3d23fe005c338ba66e9499869ffa5 Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Tue, 18 Jun 2024 14:20:35 +0200
Subject: [PATCH] style(snackbar): fix grid one-lined item alignments

---
 .../snackbar/src/Snackbar.stories.tsx         | 56 +++++++++++++------
 .../snackbar/src/SnackbarItem.styles.ts       |  3 +-
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/packages/components/snackbar/src/Snackbar.stories.tsx b/packages/components/snackbar/src/Snackbar.stories.tsx
index b4f580662..9552d3e63 100644
--- a/packages/components/snackbar/src/Snackbar.stories.tsx
+++ b/packages/components/snackbar/src/Snackbar.stories.tsx
@@ -215,22 +215,40 @@ export const QAWithNewLineAction: StoryFn = _args => (
   <div>
     <Snackbar />
 
-    <Button
-      onClick={() =>
-        addSnackbar({
-          message:
-            'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
-          actionLabel: 'Undo',
-          onAction: () => console.log('Undone'),
-          icon: <FavoriteFill />,
-          isClosable: true,
-          actionOnNewline: true,
-          timeout: null,
-        })
-      }
-    >
-      Display snackbar
-    </Button>
+    <div className="grid grid-cols-1 gap-xl md:grid-cols-2">
+      <Button
+        onClick={() =>
+          addSnackbar({
+            message:
+              'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
+            actionLabel: 'Undo',
+            onAction: () => console.log('Undone'),
+            icon: <FavoriteFill />,
+            isClosable: true,
+            timeout: null,
+          })
+        }
+      >
+        Display snackbar
+      </Button>
+
+      <Button
+        onClick={() =>
+          addSnackbar({
+            message:
+              'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
+            actionLabel: 'Undo',
+            onAction: () => console.log('Undone'),
+            icon: <FavoriteFill />,
+            isClosable: true,
+            actionOnNewline: true,
+            timeout: null,
+          })
+        }
+      >
+        Display snackbar with action on new line
+      </Button>
+    </div>
   </div>
 )
 
@@ -244,7 +262,8 @@ export const Action: StoryObj = {
           <Button
             onClick={() =>
               addSnackbar({
-                message: "You're done!",
+                message:
+                  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum.',
                 actionLabel: 'Undo',
                 onAction: () => console.log('Undone'),
               })
@@ -256,7 +275,8 @@ export const Action: StoryObj = {
           <Button
             onClick={() =>
               addSnackbar({
-                message: "You're done! But maybe you should care about what you just did?",
+                message:
+                  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum.',
                 actionLabel: 'Undo',
                 onAction: () => console.log('Undone'),
                 actionOnNewline: true,
diff --git a/packages/components/snackbar/src/SnackbarItem.styles.ts b/packages/components/snackbar/src/SnackbarItem.styles.ts
index b3defb057..837184b2b 100644
--- a/packages/components/snackbar/src/SnackbarItem.styles.ts
+++ b/packages/components/snackbar/src/SnackbarItem.styles.ts
@@ -87,9 +87,8 @@ export const snackbarItemVariant = cva(
           "[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']",
         ],
         false: [
-          'grid-rows-[52px_1fr]',
           'grid-cols-[min-content_1fr_min-content_min-content]',
-          "[grid-template-areas:'icon_message_action_close'_'._message_._.']",
+          "[grid-template-areas:'icon_message_action_close']",
         ],
       },
     },