@sendbird/uikit-react 3.2.5 → 3.2.6-rc.1

package/dist/index.css

@@ -123,6 +123,9 @@
   min-height: 58px;
   box-sizing: border-box;
 }
+.sendbird--mobile-mode .sendbird-open-channel-preview {
+  width: 100%;
+}
 .sendbird-theme--light .sendbird-open-channel-preview {
   background-color: var(--sendbird-light-background-50);
   border-bottom: solid 1px var(--sendbird-light-onlight-04);
@@ -239,6 +242,10 @@
   height: 100%;
   box-sizing: border-box;
 }
+.sendbird--mobile-mode .sendbird-open-channel-list,
+.sendbird--mobile-mode .sendbird-open-channel-list-ui {
+  width: 100%;
+}
 .sendbird-theme--light .sendbird-open-channel-list,
 .sendbird-theme--light .sendbird-open-channel-list-ui {
   border-right: solid 1px var(--sendbird-light-onlight-04);
@@ -496,6 +503,9 @@
 .sendbird-theme--dark .sendbird-channel-list {
   background-color: var(--sendbird-dark-background-600);
 }
+.sendbird--mobile-mode .sendbird-channel-list {
+  width: 100%;
+}
 
 .sendbird-channel-list__header {
   height: 64px;
@@ -741,6 +751,9 @@
   border-bottom: 1px solid var(--sendbird-dark-ondark-04);
   background-color: var(--sendbird-dark-background-600);
 }
+.sendbird--mobile-mode .sendbird-channel-header {
+  width: 100%;
+}
 .sendbird-channel-header.sendbird-channel-header--allow-edit .sendbird-channel-header__title {
   cursor: pointer;
 }
@@ -966,6 +979,10 @@
 .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
   background-color: var(--sendbird-dark-background-300);
 }
+.sendbird--mobile-mode .sendbird-add-channel__modal .sendbird-modal__content {
+  margin: 0 40px;
+}
+
 .sendbird-add-channel__rectangle-wrap {
   margin-top: 26px;
 }
@@ -985,6 +1002,11 @@
   box-sizing: border-box;
   cursor: pointer;
 }
+.sendbird--mobile-mode .sendbird-add-channel__rectangle {
+  min-width: 288px;
+  width: 100%;
+  padding-right: 0;
+}
 .sendbird-theme--light .sendbird-add-channel__rectangle {
   border: 1px solid var(--sendbird-light-onlight-04);
 }
@@ -1005,6 +1027,21 @@
   height: 360px;
   overflow-y: auto;
 }
+.sendbird--mobile-mode .sendbird-create-channel--scroll {
+  height: calc(100vh - 200px);
+  height: calc(var(--sendbird-vh, 1vh) * 100 - 200px);
+}
+.sendbird-modal--full-mobile .sendbird-modal__content {
+  width: 100vw;
+  max-width: 100%;
+  height: 100%;
+}
+.sendbird--mobile-mode .sendbird-modal--full-mobile .sendbird-modal__content {
+  height: -moz-available; /* WebKit-based browsers will ignore this. */
+  height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+  height: fill-available;
+}
+
 .sendbird-modal {
   position: fixed;
   top: 0;
@@ -1016,6 +1053,10 @@
   justify-content: center;
 }
 
+.sendbird-modal__backdrop--clickoutside {
+  cursor: pointer;
+}
+
 .sendbird-modal__content {
   width: 480px;
   border-radius: 4px;
@@ -1054,6 +1095,10 @@
   margin-top: 32px;
   text-align: right;
 }
+.sendbird--mobile-mode .sendbird-modal__content .sendbird-modal__footer {
+  position: sticky;
+  bottom: 24px;
+}
 .sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
   margin-left: 8px;
   width: 80px;
@@ -1342,6 +1387,9 @@
   width: 432px;
   height: 56px;
 }
+.sendbird--mobile-mode .sendbird-user-list-item {
+  width: 100%;
+}
 .sendbird-theme--light .sendbird-user-list-item {
   border-bottom: 1px solid var(--sendbird-light-onlight-04);
   background-color: var(--sendbird-light-background-50);
@@ -1371,6 +1419,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird--mobile-mode .sendbird-user-list-item .sendbird-user-list-item__title {
+  max-width: 62%;
+}
 .sendbird-user-list-item .sendbird-user-list-item__subtitle {
   position: absolute;
   top: 23px;
@@ -1380,6 +1431,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird--mobile-mode .sendbird-user-list-item .sendbird-user-list-item__subtitle {
+  max-width: 40%;
+}
 .sendbird-user-list-item .sendbird-user-list-item__checkbox {
   position: absolute;
   top: 16px;
@@ -1658,6 +1712,23 @@
   justify-content: flex-start;
   align-items: center;
 }
+.sendbird-channel-preview__leave--mobile .sendbird-modal__content {
+  max-width: calc(100% - 80px);
+}
+.sendbird-channel-preview__leave--mobile .sendbird-modal__close {
+  display: none;
+}
+.sendbird-channel-preview__leave--mobile .sendbird-channel-preview__leave-label--mobile {
+  text-decoration: none;
+}
+.sendbird-channel-preview__leave--mobile .sendbird-modal__header span {
+  display: inline-block;
+  width: calc(100% - 120px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .sendbird__offline .sendbird-channel-preview {
   cursor: not-allowed;
 }
@@ -1680,6 +1751,9 @@
 .sendbird-theme--dark .sendbird-channel-preview {
   border-bottom: solid 1px var(--sendbird-dark-ondark-04);
 }
+.sendbird--mobile-mode .sendbird-channel-preview {
+  width: 100%;
+}
 .sendbird-channel-preview:focus {
   outline: none;
 }
@@ -1692,12 +1766,18 @@
   height: 100%;
   margin-left: 16px;
 }
+.sendbird--mobile-mode .sendbird-channel-preview .sendbird-channel-preview__content {
+  position: relative;
+}
 .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper {
   display: flex;
   justify-content: space-between;
   width: 216px;
   height: 16px;
 }
+.sendbird--mobile-mode .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper {
+  width: auto;
+}
 .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header {
   display: flex;
   justify-content: flex-start;
@@ -1737,6 +1817,9 @@
   display: flex;
   justify-content: space-between;
 }
+.sendbird--mobile-mode .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower {
+  width: 100%;
+}
 .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__last-message {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1796,6 +1879,11 @@
 .sendbird-theme--dark .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
   color: var(--sendbird-dark-primary-200);
 }
+
+.sendbird--mobile-mode .sendbird-channel-preview__content__lower__unread-message-count {
+  position: absolute;
+  right: 0;
+}
 .sendbird-chat-header--default-avatar {
   width: 56px;
   height: 56px;
@@ -1865,6 +1953,116 @@
 .sendbird-theme--dark .sendbird-mention-user-label.purple {
   color: var(--sendbird-dark-primary-200);
 }
+.sendbird-textbutton {
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.sendbird-textbutton--not-underline {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.sendbird-textbutton--disabled {
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-textbutton--disabled {
+  color: var(--sendbird-light-onlight-03);
+}
+.sendbird-theme--dark .sendbird-textbutton--disabled {
+  color: var(--sendbird-dark-ondark-03);
+}
+.sendbird-theme--light .sendbird-color--onbackground-1 {
+  color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-1 {
+  color: var(--sendbird-dark-ondark-01);
+}
+.sendbird-theme--light .sendbird-color--onbackground-1--background-color {
+  background-color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-1--background-color {
+  background-color: var(--sendbird-dark-ondark-01);
+}
+
+.sendbird-theme--light .sendbird-color--onbackground-2 {
+  color: var(--sendbird-light-onlight-02);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-2 {
+  color: var(--sendbird-dark-ondark-02);
+}
+.sendbird-theme--light .sendbird-color--onbackground-2--background-color {
+  background-color: var(--sendbird-light-onlight-02);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-2--background-color {
+  background-color: var(--sendbird-dark-ondark-02);
+}
+
+.sendbird-theme--light .sendbird-color--onbackground-3 {
+  color: var(--sendbird-light-onlight-03);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-3 {
+  color: var(--sendbird-dark-ondark-03);
+}
+.sendbird-theme--light .sendbird-color--onbackground-3--background-color {
+  background-color: var(--sendbird-light-onlight-03);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-3--background-color {
+  background-color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-theme--light .sendbird-color--onbackground-4 {
+  color: var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-4 {
+  color: var(--sendbird-dark-ondark-04);
+}
+.sendbird-theme--light .sendbird-color--onbackground-4--background-color {
+  background-color: var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-color--onbackground-4--background-color {
+  background-color: var(--sendbird-dark-ondark-04);
+}
+
+.sendbird-theme--light .sendbird-color--oncontent-1 {
+  color: var(--sendbird-light-ondark-01);
+}
+.sendbird-theme--dark .sendbird-color--oncontent-1 {
+  color: var(--sendbird-dark-onlight-01);
+}
+.sendbird-theme--light .sendbird-color--oncontent-1--background-color {
+  background-color: var(--sendbird-light-ondark-01);
+}
+.sendbird-theme--dark .sendbird-color--oncontent-1--background-color {
+  background-color: var(--sendbird-dark-onlight-01);
+}
+
+.sendbird-theme--light .sendbird-color--primary {
+  color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-color--primary {
+  color: var(--sendbird-dark-primary-200);
+}
+.sendbird-theme--light .sendbird-color--primary--background-color {
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-color--primary--background-color {
+  background-color: var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--light .sendbird-color--error {
+  color: var(--sendbird-light-error-300);
+}
+.sendbird-theme--dark .sendbird-color--error {
+  color: var(--sendbird-dark-error-200);
+}
+.sendbird-theme--light .sendbird-color--error--background-color {
+  background-color: var(--sendbird-light-error-300);
+}
+.sendbird-theme--dark .sendbird-color--error--background-color {
+  background-color: var(--sendbird-dark-error-300);
+}
 .sendbird-reaction-button {
   border-radius: 8px;
   display: inline-block;
@@ -2061,116 +2259,6 @@
 .sendbird-input-label {
   margin: 4px 0;
 }
-.sendbird-textbutton {
-  text-decoration: underline;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.sendbird-textbutton--not-underline {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.sendbird-textbutton--disabled {
-  cursor: not-allowed;
-}
-.sendbird-theme--light .sendbird-textbutton--disabled {
-  color: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-textbutton--disabled {
-  color: var(--sendbird-dark-ondark-03);
-}
-.sendbird-theme--light .sendbird-color--onbackground-1 {
-  color: var(--sendbird-light-onlight-01);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-1 {
-  color: var(--sendbird-dark-ondark-01);
-}
-.sendbird-theme--light .sendbird-color--onbackground-1--background-color {
-  background-color: var(--sendbird-light-onlight-01);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-1--background-color {
-  background-color: var(--sendbird-dark-ondark-01);
-}
-
-.sendbird-theme--light .sendbird-color--onbackground-2 {
-  color: var(--sendbird-light-onlight-02);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-2 {
-  color: var(--sendbird-dark-ondark-02);
-}
-.sendbird-theme--light .sendbird-color--onbackground-2--background-color {
-  background-color: var(--sendbird-light-onlight-02);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-2--background-color {
-  background-color: var(--sendbird-dark-ondark-02);
-}
-
-.sendbird-theme--light .sendbird-color--onbackground-3 {
-  color: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-3 {
-  color: var(--sendbird-dark-ondark-03);
-}
-.sendbird-theme--light .sendbird-color--onbackground-3--background-color {
-  background-color: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-3--background-color {
-  background-color: var(--sendbird-dark-ondark-03);
-}
-
-.sendbird-theme--light .sendbird-color--onbackground-4 {
-  color: var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-4 {
-  color: var(--sendbird-dark-ondark-04);
-}
-.sendbird-theme--light .sendbird-color--onbackground-4--background-color {
-  background-color: var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-color--onbackground-4--background-color {
-  background-color: var(--sendbird-dark-ondark-04);
-}
-
-.sendbird-theme--light .sendbird-color--oncontent-1 {
-  color: var(--sendbird-light-ondark-01);
-}
-.sendbird-theme--dark .sendbird-color--oncontent-1 {
-  color: var(--sendbird-dark-onlight-01);
-}
-.sendbird-theme--light .sendbird-color--oncontent-1--background-color {
-  background-color: var(--sendbird-light-ondark-01);
-}
-.sendbird-theme--dark .sendbird-color--oncontent-1--background-color {
-  background-color: var(--sendbird-dark-onlight-01);
-}
-
-.sendbird-theme--light .sendbird-color--primary {
-  color: var(--sendbird-light-primary-300);
-}
-.sendbird-theme--dark .sendbird-color--primary {
-  color: var(--sendbird-dark-primary-200);
-}
-.sendbird-theme--light .sendbird-color--primary--background-color {
-  background-color: var(--sendbird-light-primary-300);
-}
-.sendbird-theme--dark .sendbird-color--primary--background-color {
-  background-color: var(--sendbird-dark-primary-200);
-}
-
-.sendbird-theme--light .sendbird-color--error {
-  color: var(--sendbird-light-error-300);
-}
-.sendbird-theme--dark .sendbird-color--error {
-  color: var(--sendbird-dark-error-200);
-}
-.sendbird-theme--light .sendbird-color--error--background-color {
-  background-color: var(--sendbird-light-error-300);
-}
-.sendbird-theme--dark .sendbird-color--error--background-color {
-  background-color: var(--sendbird-dark-error-300);
-}
 .sendbird-place-holder {
   position: relative;
   display: flex;
@@ -2410,6 +2498,9 @@
   white-space: nowrap;
   max-width: 780px;
 }
+.sendbird--mobile-mode .sendbird-chat-header .sendbird-chat-header__left__title {
+  max-width: calc(100vw - 240px);
+}
 .sendbird-chat-header .sendbird-chat-header__left__subtitle {
   max-width: 240px;
   overflow: hidden;
@@ -2424,6 +2515,10 @@
 .sendbird-chat-header .sendbird-chat-header__right__info {
   margin-left: 16px;
 }
+
+.sendbird-chat-header__icon_back {
+  margin-right: 8px;
+}
 .sendbird-conversation__messages .sendbird-conversation__messages-padding {
   padding-left: 24px;
   padding-right: 24px;
@@ -2521,6 +2616,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird--mobile-mode .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__nickname {
+  max-width: calc(100% - 150px);
+}
 .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__user-id {
   position: absolute;
   display: inline-block;
@@ -2530,6 +2628,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird--mobile-mode .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__user-id {
+  max-width: 100px;
+}
 .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
   position: relative;
   display: flex;
@@ -2719,6 +2820,12 @@
 .sendbird-message-content.outgoing {
   justify-content: flex-end;
 }
+.sendbird-message-content .sendbird-message-content__middle {
+  max-width: 400px;
+}
+.sendbird--mobile-mode .sendbird-message-content .sendbird-message-content__middle {
+  max-width: calc(100vw - 100px);
+}
 .sendbird-message-content .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.use-quote {
   margin-top: -8px;
   bottom: -8px;
@@ -2738,7 +2845,6 @@
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  max-width: 400px;
   align-items: flex-start;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
@@ -2828,7 +2934,6 @@
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  max-width: 400px;
   align-items: flex-end;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__quote-message {
@@ -3321,6 +3426,10 @@ div.sendbird-text-message-item-body {
   height: 270px;
   border-radius: 16px;
 }
+.sendbird--mobile-mode .sendbird-thumbnail-message-item-body {
+  width: 66vw;
+  min-width: 160px;
+}
 .sendbird-thumbnail-message-item-body.reactions {
   border-radius: 16px 16px 0px 0px;
 }
@@ -3403,6 +3512,10 @@ div.sendbird-text-message-item-body {
   min-width: 320px;
   max-width: 400px;
 }
+.sendbird--mobile-mode .sendbird-og-message-item-body {
+  width: 66vw;
+  min-width: 160px;
+}
 .sendbird-og-message-item-body .sendbird-og-message-item-body__text-bubble {
   position: relative;
   padding: 8px 12px;
@@ -3699,6 +3812,124 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__file-message .sendbird-quote-message__replied-message__file-message__type-icon {
   margin-right: 2px;
 }
+.sendbird-message__mobile-context-menu {
+  border-radius: 8px;
+  width: 180px;
+}
+
+.sendbird-message__contextmenu--hyperlink {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sendbird-message__bottomsheet--hyperlink {
+  display: block;
+}
+
+.sendbird-message__bottomsheet--hyperlink,
+.sendbird-message__contextmenu--hyperlink {
+  width: 100%;
+  text-decoration: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-family: inherit;
+}
+
+.sendbird-message__mobile-context-menu-item .sendbird-dropdown__menu-item__text {
+  display: flex;
+  justify-content: space-between;
+}
+.sendbird-theme--light .sendbird-message__mobile-context-menu-item:not(:last-child) {
+  border-bottom: 1px solid var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-message__mobile-context-menu-item:not(:last-child) {
+  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
+}
+
+.sendbird-message__bottomsheet {
+  width: 100vw;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding-top: 16px;
+}
+.sendbird-theme--light .sendbird-message__bottomsheet {
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-message__bottomsheet {
+  background-color: var(--sendbird-dark-background-600);
+}
+
+.sendbird-message__bottomsheet-reaction-bar {
+  padding-left: 0;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+  margin-top: 0;
+}
+
+.sendbird-message__bottomsheet-reaction-bar__row {
+  display: inline-block;
+}
+.sendbird-message__bottomsheet-reaction-bar__row.sendbird-message__bottomsheet-reaction-bar__all {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.sendbird-message__bottomsheet--action {
+  cursor: pointer;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+}
+.sendbird-message__bottomsheet--action .sendbird-icon {
+  margin-right: 24px;
+}
+
+.sendbird-message__bottomsheet--action-disabled {
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-message__bottomsheet--action-disabled {
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-message__bottomsheet--action-disabled {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-bottomsheet {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sendbird-bottomsheet__content {
+  z-index: 10001;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.sendbird-bottomsheet__backdrop {
+  position: fixed;
+  z-index: 10000;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.sendbird-theme--light .sendbird-bottomsheet__backdrop {
+  background-color: var(--sendbird-light-overlay-02);
+}
+.sendbird-theme--dark .sendbird-bottomsheet__backdrop {
+  background-color: var(--sendbird-dark-overlay-02);
+}
 .sendbird-fileviewer__header__right__actions__download,
 .sendbird-fileviewer__header__right__actions__delete,
 .sendbird-fileviewer__header__right__actions__close {
@@ -3734,6 +3965,9 @@ div.sendbird-og-message-item-body__text-bubble {
   display: flex;
   justify-content: space-between;
 }
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header {
+  position: relative;
+}
 .sendbird-theme--light .sendbird-fileviewer .sendbird-fileviewer__header {
   border-bottom: 1px solid var(--sendbird-light-onlight-04);
 }
@@ -3758,6 +3992,13 @@ div.sendbird-og-message-item-body__text-bubble {
   text-overflow: ellipsis;
   display: inline-block;
 }
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
+  position: absolute;
+  left: 64px;
+  top: 10px;
+  display: block;
+  max-width: calc(100vw - 240px);
+}
 .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
   max-width: 200px;
   white-space: nowrap;
@@ -3767,6 +4008,11 @@ div.sendbird-og-message-item-body__text-bubble {
   margin-left: 8px;
   padding-top: 5px;
 }
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
+  position: absolute;
+  left: 56px;
+  top: 24px;
+}
 .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right {
   display: flex;
   width: 160px;
@@ -3979,6 +4225,9 @@ div.sendbird-og-message-item-body__text-bubble {
   display: inline-block;
   box-sizing: border-box;
 }
+.sendbird--mobile-mode .sendbird-channel-settings {
+  width: 100%;
+}
 .sendbird-theme--light .sendbird-channel-settings {
   background-color: var(--sendbird-light-background-50);
   border-left: 1px solid var(--sendbird-light-onlight-04);
@@ -4090,6 +4339,9 @@ div.sendbird-og-message-item-body__text-bubble {
   text-overflow: ellipsis;
   height: 18px;
 }
+.sendbird--mobile-mode .sendbird-channel-profile .sendbird-channel-profile__title {
+  max-width: 100%;
+}
 .sendbird-channel-profile .sendbird-channel-profile__edit {
   position: absolute;
   top: 10px;
@@ -4125,6 +4377,9 @@ div.sendbird-og-message-item-body__text-bubble {
   max-height: 420px;
   overflow: scroll;
 }
+.sendbird--mobile-mode .sendbird-more-members__popup-scroll {
+  max-height: 100%;
+}
 .sendbird-more-members__popup-scroll .sendbird-user-list-item__operator {
   right: 72px;
 }
@@ -4154,6 +4409,9 @@ div.sendbird-og-message-item-body__text-bubble {
   position: relative;
   padding: 12px 22px 10px 56px;
 }
+.sendbird--mobile-mode .sendbird-channel-settings__freeze {
+  max-width: 100%;
+}
 .sendbird-theme--light .sendbird-channel-settings__freeze {
   background-color: var(--sendbird-light-background-50);
   border-bottom: 1px solid var(--sendbird-light-onlight-04);
@@ -4307,6 +4565,9 @@ div.sendbird-og-message-item-body__text-bubble {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird--mobile-mode .sendbird-user-list-item--small__subtitle {
+  max-width: 40%;
+}
 .sendbird-user-list-item--small__checkbox {
   position: absolute;
   top: 16px;
@@ -4341,6 +4602,26 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-user-list-item--small.sendbird-icon--pressed .sendbird-iconbutton {
   background-color: var(--sendbird-dark-background-700);
 }
+.sendbird-channel-settings__leave-label--mobile {
+  text-decoration: none;
+}
+
+.sendbird-channel-settings__leave--mobile .sendbird-modal__content {
+  max-width: calc(100% - 80px);
+}
+.sendbird-channel-settings__leave--mobile .sendbird-modal__close {
+  display: none;
+}
+.sendbird-channel-settings__leave--mobile .sendbird-channel-preview__leave-label--mobile {
+  text-decoration: none;
+}
+.sendbird-channel-settings__leave--mobile .sendbird-modal__header span {
+  display: inline-block;
+  width: calc(100% - 120px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .sendbird-message-search-pannel {
   position: relative;
   display: flex;
@@ -4355,6 +4636,9 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-message-search-pannel {
   background-color: var(--sendbird-dark-background-600);
 }
+.sendbird--mobile-mode .sendbird-message-search-pannel {
+  width: 100%;
+}
 .sendbird-message-search-pannel .sendbird-message-search-pannel__input__container__input-area {
   position: absolute;
   top: 14px;
@@ -4634,6 +4918,13 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-message-search-file-item.sendbird-message-search-file-item--selected .sendbird-message-search-file-item__left {
   border-left: 4px solid var(--sendbird-dark-primary-200);
 }
+.sb_mobile__panelwrap {
+  height: 100vh;
+}
+
+.sb-show-main {
+  padding: 0 !important;
+}
 .sendbird-app__wrap {
   width: 100%;
   height: 100%;
@@ -4755,6 +5046,12 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-frozen-channel-notification {
   background-color: var(--sendbird-dark-information-100);
 }
+.sendbird-oepnchannel-header__icon_back {
+  position: absolute;
+  left: 12px;
+  top: 18px;
+}
+
 .sendbird-openchannel-conversation-header {
   position: relative;
   min-height: 64px;
@@ -4772,21 +5069,33 @@ div.sendbird-og-message-item-body__text-bubble {
   text-overflow: ellipsis;
   max-width: calc(100% - 120px);
 }
+.sendbird--mobile-mode .sendbird-openchannel-conversation-header .sendbird-openchannel-conversation-header__left__title {
+  max-width: calc(100% - 160px);
+}
 .sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
   position: absolute;
   left: 20px;
   top: 16px;
 }
+.sendbird--mobile-mode .sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
+  left: 50px;
+}
 .sendbird-openchannel-conversation-header__left__title {
   position: absolute;
   left: 60px;
   top: 12px;
 }
+.sendbird--mobile-mode .sendbird-openchannel-conversation-header__left__title {
+  left: 90px;
+}
 .sendbird-openchannel-conversation-header__left__sub-title {
   position: absolute;
   left: 60px;
   top: 36px;
 }
+.sendbird--mobile-mode .sendbird-openchannel-conversation-header__left__sub-title {
+  left: 90px;
+}
 .sendbird-openchannel-conversation-header__right {
   position: absolute;
   top: 0px;
@@ -4933,6 +5242,7 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__bottom .sendbird-openchannel-user-message__right__bottom__message {
   position: relative;
   word-break: break-all;
+  white-space: pre-line;
 }
 .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__tail {
   position: relative;
@@ -4955,6 +5265,19 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-openchannel-user-message .sendbird-openchannel-user-message__context-menu .sendbird-openchannel-user-message__context-menu--icon:hover {
   background-color: var(--sendbird-dark-background-700);
 }
+.sendbird-openchannel__mobile-menu-hyperlink {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-family: inherit;
+}
 .sendbird-openchannel-admin-message {
   position: relative;
   margin: 16px 24px;
@@ -5524,6 +5847,9 @@ div.sendbird-og-message-item-body__text-bubble {
   overflow-y: scroll;
   position: relative;
 }
+.sendbird--mobile-mode .sendbird-openchannel-settings {
+  width: 100%;
+}
 .sendbird-theme--light .sendbird-openchannel-settings {
   background-color: var(--sendbird-light-background-50);
   border-left: 1px solid var(--sendbird-light-onlight-04);
@@ -5677,6 +6003,7 @@ div.sendbird-og-message-item-body__text-bubble {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-participants-accordion__member__title.self-operator,
 .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-participants-accordion__member__title.operator,
 .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-participants-accordion__member__title.user-id {
   position: absolute;