fix(chat): Fix scrollable

DevExpress · Sep 4, 2024 · 17dfb0c · 17dfb0c
1 parent 6bb9fb6
commit 17dfb0c
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 31 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss
@@ -2,12 +2,17 @@
   $messagegroup-gap,
   $messagegroup-start-template,
   $messagegroup-start-gap,
+  $messagegroup-padding-top,
   $information-font-size,
   $information-color,
   $information-gap
 ) {
   .dx-chat-message-group {
     row-gap: $messagegroup-gap;
+
+    &:not(&:first-child) {
+      padding-top: $messagegroup-padding-top;
+    }
   }
 
   .dx-chat-message-group-information {

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
@@ -1,11 +1,9 @@
-@mixin chat-messagelist(
-  $padding,
-  $gap
-) {
+@mixin chat-messagelist($padding) {
   .dx-chat-message-list {
+    padding: $padding 0;
+
     .dx-scrollable-content {
-      padding: $padding;
-      row-gap: $gap;
+      padding: 0 $padding;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -27,11 +27,9 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
+  $chat-messagegroup-padding-top,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap
 );
-@include chat-messagelist(
-  $chat-messagelist-padding,
-  $chat-messagelist-gap
-);
+@include chat-messagelist($chat-messagelist-padding);
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -13,7 +13,7 @@ $chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
-$chat-messagelist-gap: null !default;
+$chat-messagegroup-padding-top: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -28,7 +28,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-min-height: 40px !default;
   $chat-messagebox-button-size: 32px !default;
   $chat-messagelist-padding: 20px !default;
-  $chat-messagelist-gap: 24px !default;
+  $chat-messagegroup-padding-top: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -38,5 +38,5 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-min-height: 32px !default;
   $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 16px !default;
-  $chat-messagelist-gap: 12px !default;
+  $chat-messagegroup-padding-top: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -27,11 +27,9 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
+  $chat-messagegroup-padding-top,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap
 );
-@include chat-messagelist(
-  $chat-messagelist-padding,
-  $chat-messagelist-gap
-);
+@include chat-messagelist($chat-messagelist-padding);
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -12,7 +12,7 @@ $chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
-$chat-messagelist-gap: null !default;
+$chat-messagegroup-padding-top: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -28,7 +28,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 34px !default;
   $chat-messagelist-padding: 20px !default;
-  $chat-messagelist-gap: 24px !default;
+  $chat-messagegroup-padding-top: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -39,5 +39,5 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 16px !default;
-  $chat-messagelist-gap: 12px !default;
+  $chat-messagegroup-padding-top: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -27,11 +27,9 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
+  $chat-messagegroup-padding-top,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap
 );
-@include chat-messagelist(
-  $chat-messagelist-padding,
-  $chat-messagelist-gap
-);
+@include chat-messagelist($chat-messagelist-padding);
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -12,7 +12,7 @@ $chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
-$chat-messagelist-gap: null !default;
+$chat-messagegroup-padding-top: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -28,7 +28,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 8px !default;
   $chat-messagebox-button-size: 36px !default;
   $chat-messagelist-padding: 20px !default;
-  $chat-messagelist-gap: 24px !default;
+  $chat-messagegroup-padding-top: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -39,5 +39,5 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 28px !default;
   $chat-messagelist-padding: 16px !default;
-  $chat-messagelist-gap: 12px !default;
+  $chat-messagegroup-padding-top: 12px !default;
 }
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -53,14 +53,14 @@ class Chat extends Widget<Properties> {
 
     super._initMarkup();
 
+    this._renderMessageBox();
+    this._renderMessageList();
+
     const { title } = this.option();
 
     if (title) {
       this._renderHeader(title);
     }
-
-    this._renderMessageList();
-    this._renderMessageBox();
   }
 
   _renderHeader(title: string): void {
@@ -76,7 +76,9 @@ class Chat extends Widget<Properties> {
     const { items = [], user } = this.option();
 
     const currentUserId = user?.id;
-    const $messageList = $('<div>').appendTo(this.element());
+    const $messageList = $('<div>');
+
+    this.element().prepend($messageList.get(0));
 
     this._messageList = this._createComponent($messageList, MessageList, {
       items,