fix: update dimensions of the chat component (#2823)

General updates to the left hand side of the chat component dimensions Use margin from avatar for right hand side gap Set the padding for ul elements in the chat message container Remove unused id attributes
microsoftgraph · Nov 14, 2023 · 1c16883 · 1c16883
1 parent d50ace9
commit 1c16883
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/packages/mgt-chat/src/components/Chat/Chat.tsx b/packages/mgt-chat/src/components/Chat/Chat.tsx
@@ -26,16 +26,26 @@ const useStyles = makeStyles({
     paddingBlockEnd: '12px'
   },
   chatMessages: {
-    paddingInlineStart: '16px',
     height: 'auto',
+    ...shorthands.paddingInline('20px'),
     ...shorthands.overflow('auto'),
     '& img': {
       maxWidth: '100%',
       height: 'auto'
+    },
+
+    '& ul': {
+      ...shorthands.padding('unset')
+    },
+    '& .ui-chat__item__message': {
+      marginLeft: 'unset',
+      '& ul': {
+        ...shorthands.paddingInline('40px', '0px')
+      }
     }
   },
   chatInput: {
-    ...shorthands.paddingInline('24px'),
+    ...shorthands.paddingInline('16px'),
     ...shorthands.overflow('unset')
   },
   fullHeight: {

diff --git a/packages/mgt-chat/src/components/ChatHeader/ChatTitle.tsx b/packages/mgt-chat/src/components/ChatHeader/ChatTitle.tsx
@@ -19,8 +19,8 @@ const useTitleStyles = makeStyles({
     lineHeight: '32px',
     fontSize: '18px',
     fontWeight: 700,
-    marginBlockStart: '10px',
-    marginBlockEnd: '8px',
+    marginBlockStart: '11px',
+    marginBlockEnd: '7px',
     zIndex: 3
   }
 });

diff --git a/packages/mgt-chat/src/components/ChatHeader/useCommonHeaderStyles.tsx b/packages/mgt-chat/src/components/ChatHeader/useCommonHeaderStyles.tsx
@@ -2,6 +2,6 @@ import { makeStyles } from '@fluentui/react-components';
 
 export const useCommonHeaderStyles = makeStyles({
   row: {
-    paddingInlineStart: '24px'
+    paddingInlineStart: '20px'
   }
 });
diff --git a/packages/mgt-chat/src/components/ManageChatMembers/ManageChatMembers.tsx b/packages/mgt-chat/src/components/ManageChatMembers/ManageChatMembers.tsx
@@ -57,7 +57,7 @@ const useStyles = makeStyles({
     ...shorthands.padding('0 !important')
   },
   triggerButton: {
-    ...shorthands.marginInline('8px'),
+    ...shorthands.marginInline('0px', '8px'),
     ...shorthands.paddingInline('0'),
     '--spacingHorizontalSNudge': '2px',
     minWidth: 'unset !important',