fix: Fixed a bug where horizontal suggested reply items contents are not wrapping to multiple lines. (#1115)

Fixes: [AC-2521](https://sendbird.atlassian.net/browse/AC-2521)

### Changelogs
- Fixed a bug where horizontal suggested reply items contents are not
wrapping to multiple lines.

### After
![Screenshot 2024-05-30 at 1 16
39 PM](https://github.com/sendbird/sendbird-uikit-react/assets/16806397/da2a9172-c188-4ca0-a701-b6be4dd5072b)
![Screenshot 2024-05-30 at 1 08
47 PM](https://github.com/sendbird/sendbird-uikit-react/assets/16806397/d8d717cd-a59c-49de-8430-d9a0a995c017)
 
### Figma

https://www.figma.com/design/SVbXU00FhjztekD8AiVukK/UIKit_Work-file_React?node-id=2393-13688&t=cyEn8F21R1sNrdNx-0

[AC-2521]:
https://sendbird.atlassian.net/browse/AC-2521?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: chohongm

src/modules/GroupChannel/components/SuggestedReplies/index.scss

@@ -47,14 +47,14 @@
 }
 
 .sendbird-suggested-replies__option {
-  white-space: nowrap;
-  height: 32px;
+  white-space: pre-wrap;
   font-size: 12px;
-  padding: 0 14px;
+  padding: 8px 14px;
   display: flex;
   align-items: center;
   border-radius: 18px;
   cursor: pointer;
+  word-break: break-word;
   @include themed() {
     color: t(primary--3-2);
     border: 1px solid t(primary--3-2);
@@ -71,4 +71,10 @@
       color: t(bg-0);
     }
   }
+  &.horizontal {
+    white-space: nowrap;
+  }
+  &.vertical {
+    white-space: pre-wrap;
+  }
 }

src/modules/GroupChannel/components/SuggestedReplies/index.tsx

@@ -11,15 +11,17 @@ export interface SuggestedRepliesProps {
 export interface ReplyItemProps {
   value: string;
   onClickReply: (event: React.MouseEvent<HTMLDivElement>, option: string) => void;
+  type?: 'vertical' | 'horizontal';
 }
 
 export const ReplyItem = ({
   value,
   onClickReply,
+  type = 'vertical',
 }: ReplyItemProps) => {
   return (
     <div
-      className="sendbird-suggested-replies__option"
+      className={`sendbird-suggested-replies__option ${type}`}
       id={value}
       onClick={(e) => onClickReply(e, value)}
     >
@@ -46,7 +48,7 @@ const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: Su
 
   const children = replyOptions.map((option: string, index: number) => {
     return (
-      <ReplyItem key={index} value={option} onClickReply={onClickReply}/>
+      <ReplyItem key={index} value={option} onClickReply={onClickReply} type={type} />
     );
   });