feat(chat): refactor layout to use CSS Grid for improved structure and flexibility (#1839)

* feat(chat): refactor layout to use CSS Grid for improved structure and flexibility

* feat(chat): refine CSS Grid layout for better responsiveness and alignment

* feat(chat): adjust Grid layout for improved responsiveness with dynamic min-width

Author: desig9stein

src/components/chat/themes/chat.base.scss

@@ -14,26 +14,27 @@ $inline-inset: rem(16px);
 }
 
 [part='chat-container'] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr minmax(rem(320px), #{calc(rem(760px) + $inline-inset * 2)}) 1fr;
+  grid-template-rows: auto 1fr auto;
   height: 100%;
 }
 
 [part='chat-wrapper'] {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden auto;
-  width: 100%;
-  flex: 1;
-  align-items: center;
+    display: grid;
+    grid-template-columns: subgrid;
+    overflow: hidden auto;
+    grid-column: 1 / -1;
+    grid-template-rows: 1fr auto;
+    align-items: start;
 }
 
 [part='message-list'],
 [part='empty-state'],
 [part='suggestions-container'] {
-  display: block;
-  max-width: calc(rem(760px) + $inline-inset * 2);
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: subgrid;
   width: 100%;
   padding-inline: $inline-inset;
 }
@@ -44,7 +45,7 @@ $inline-inset: rem(16px);
 }
 
 [part='empty-state'] {
-  height: 100%;
+    height: 100%;
 }
 
 [part='header'] {
@@ -55,6 +56,8 @@ $inline-inset: rem(16px);
   box-shadow: var(--ig-elevation-4);
   width: 100%;
   z-index: 1;
+    grid-column: 1 / -1;
+    grid-row: 1 / 2;
 }
 
 [part='typing-indicator'] {

src/components/chat/themes/input.base.scss

@@ -7,12 +7,12 @@
     width: 100%;
     padding-block: rem(16px);
     justify-content: center;
+    grid-column: 2 / 3;
 }
 
 [part~='input-container'] {
     display: flex;
     flex-direction: column;
-    max-width: rem(760px);
     width: 100%;
     margin-inline: rem(16px);
     border-radius: rem(4px);