fix: apply fillWidth class to message components for consistent styling

Author: tyeongkim

src/components/molecule/message-group/compact.tsx

@@ -30,7 +30,7 @@ export function _CompactMessageGroup(props: _MessageGroupProps) {
               {timestamp}
             </Typo.Footnote>
           </Row>
-          <div>
+          <div className={fillWidth}>
             {Children.map(children, (child) => {
               if (isValidElement<MessageProps>(child)) {
                 return cloneElement(child, { variant: 'compact', sender });

src/components/molecule/message/compact.tsx

@@ -1,20 +1,21 @@
 import { _Message } from '@/components/atom/message';
 import { Paragraph } from '@/components/atom/typography';
 import { Column } from '@/components/layout/column';
+import { fillWidth } from '@/styles/utils.css';
 import { spacing } from '@/tokens/attribute.css';
 import type { _MessageProps } from './types';
 
 export function _CompactMessage(props: _MessageProps) {
   const { reply, reactions = [], children } = props;
 
   return (
-    <Column gap={spacing[6]}>
-      <Column align='start'>
+    <Column className={fillWidth} gap={spacing[6]}>
+      <Column className={fillWidth} align='start'>
         {reply && (
           <_Message.Reply author={reply.author}>{reply.content}</_Message.Reply>
         )}
         {typeof children === 'string' ? (
-          <Paragraph.Body>{children}</Paragraph.Body>
+          <Paragraph.Body className={fillWidth}>{children}</Paragraph.Body>
         ) : (
           children
         )}