fix(chat): Add padding top

DevExpress · Sep 5, 2024 · 4a191a1 · 4a191a1
1 parent 3f7780b
commit 4a191a1
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 14 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,14 +2,18 @@
   $messagegroup-gap,
   $messagegroup-start-template,
   $messagegroup-start-gap,
-  $messagegroup-padding-bottom,
+  $messagegroup-padding,
   $information-font-size,
   $information-color,
   $information-gap
 ) {
   .dx-chat-message-group {
     row-gap: $messagegroup-gap;
-    padding-bottom: $messagegroup-padding-bottom;
+    padding-bottom: $messagegroup-padding;
+
+    &:first-child {
+      padding-top: $messagegroup-padding;
+    }
   }
 
   .dx-chat-message-group-information {

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -30,7 +30,7 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
-  $chat-messagegroup-padding-bottom,
+  $chat-messagegroup-padding,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap

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-messagegroup-padding-bottom: null !default;
+$chat-messagegroup-padding: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -27,7 +27,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-button-size: 32px !default;
   $chat-messagelist-padding: 0 20px !default;
-  $chat-messagegroup-padding-bottom: 24px !default;
+  $chat-messagegroup-padding: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -36,5 +36,5 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 0 16px !default;
-  $chat-messagegroup-padding-bottom: 12px !default;
+  $chat-messagegroup-padding: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -30,7 +30,7 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
-  $chat-messagegroup-padding-bottom,
+  $chat-messagegroup-padding,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/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-messagegroup-padding-bottom: null !default;
+$chat-messagegroup-padding: 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: 0 20px !default;
-  $chat-messagegroup-padding-bottom: 24px !default;
+  $chat-messagegroup-padding: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -38,5 +38,5 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 0 16px !default;
-  $chat-messagegroup-padding-bottom: 12px !default;
+  $chat-messagegroup-padding: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -30,7 +30,7 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
-  $chat-messagegroup-padding-bottom,
+  $chat-messagegroup-padding,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap

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-messagegroup-padding-bottom: null !default;
+$chat-messagegroup-padding: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -27,7 +27,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 8px !default;
   $chat-messagebox-button-size: 36px !default;
   $chat-messagelist-padding: 0 20px !default;
-  $chat-messagegroup-padding-bottom: 24px !default;
+  $chat-messagegroup-padding: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -37,5 +37,5 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 28px !default;
   $chat-messagelist-padding: 0 16px !default;
-  $chat-messagegroup-padding-bottom: 12px !default;
+  $chat-messagegroup-padding: 12px !default;
 }