From 637c4365ec673f09c115b38a3e49c7780c0e4f86 Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Thu, 25 Apr 2024 16:22:13 +0900
Subject: [PATCH 1/2] chore: use normal div

---
 .../components/SuggestedReplies/index.scss             |  9 +++++++--
 .../GroupChannel/components/SuggestedReplies/index.tsx | 10 +---------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.scss b/src/modules/GroupChannel/components/SuggestedReplies/index.scss
index 1f4e78691..33ba5f7ee 100644
--- a/src/modules/GroupChannel/components/SuggestedReplies/index.scss
+++ b/src/modules/GroupChannel/components/SuggestedReplies/index.scss
@@ -18,12 +18,17 @@
     }
   }
   &.horizontal {
-    width: fit-content;
-    margin-left: 64px;
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
+    padding-left: 64px;
     .sendbird-suggested-replies__option:not(:last-child) {
       margin-right: 8px;
     }
   }
+  &::-webkit-scrollbar {
+    display: none;
+  }
   @include themed() {
     font-family: var(--sendbird-font-family-default);
   }
diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
index b5632b31f..9588bf741 100644
--- a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
+++ b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
@@ -207,15 +207,7 @@ const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: Su
     );
   });
 
-  return (
-    type === 'vertical'
-      ? <div className="sendbird-suggested-replies vertical">
-        {children}
-      </div>
-      : <DraggableSuggestedReplies>
-        {children}
-      </DraggableSuggestedReplies>
-  );
+  return <div className={`sendbird-suggested-replies ${type}`}>{children}</div>;
 };
 
 export default SuggestedReplies;

From ae2b6dd5d687c27f46182175d362c828d8cdb543 Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Thu, 25 Apr 2024 21:42:04 +0900
Subject: [PATCH 2/2] chore: support full width

---
 .../GroupChannel/components/MessageList/index.scss  |  4 ++--
 .../components/SuggestedReplies/index.scss          | 13 ++++++++++++-
 src/styles/_variables.scss                          |  3 +++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/modules/GroupChannel/components/MessageList/index.scss b/src/modules/GroupChannel/components/MessageList/index.scss
index 8c0008867..add69076f 100644
--- a/src/modules/GroupChannel/components/MessageList/index.scss
+++ b/src/modules/GroupChannel/components/MessageList/index.scss
@@ -10,9 +10,9 @@
     position: relative;
     height: 100%;
     overflow-x: hidden;
-    padding: 0px 24px;
+    padding: 0 $messages-padding;
     @include mobile() {
-      padding: 0px 12px;
+      padding: 0 $messages-padding-mobile;
     }
   }
   .sendbird-separator,
diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.scss b/src/modules/GroupChannel/components/SuggestedReplies/index.scss
index 33ba5f7ee..dedcfa51b 100644
--- a/src/modules/GroupChannel/components/SuggestedReplies/index.scss
+++ b/src/modules/GroupChannel/components/SuggestedReplies/index.scss
@@ -17,11 +17,22 @@
       margin-top: 8px;
     }
   }
+
   &.horizontal {
     display: flex;
     flex-direction: row;
     overflow-x: scroll;
-    padding-left: 64px;
+
+    margin-left: -$messages-padding;
+    margin-right: -$messages-padding;
+    padding-left: $messages-padding;
+    padding-right: $messages-padding;
+    @include mobile() {
+      margin-left: -$messages-padding-mobile;
+      margin-right: -$messages-padding-mobile;
+      padding-left: calc(40px + $messages-padding-mobile);
+      padding-right: $messages-padding-mobile;
+    }
     .sendbird-suggested-replies__option:not(:last-child) {
       margin-right: 8px;
     }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 26b7ad28b..8e3394ed8 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,2 +1,5 @@
 @import './color-themes';
 @import './media-query';
+
+$messages-padding: 24px;
+$messages-padding-mobile: 12px;