DataGrid/TreeList - AI Prompt Editor: Fix the progressbar height (#31652)

Co-authored-by: Alyar <>

Author: Alyar666

packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss

@@ -1374,4 +1374,9 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     left: $fluent-grid-base-command-ai-header-button-offset;
     right: auto;
   }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $fluent-grid-base-ai-prompt-editor-progressbar-height;
+    border-radius: 0;
+  }
 }

packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss

@@ -43,6 +43,7 @@ $fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default;
 $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default;
 $fluent-grid-base-command-ai-text-content-padding: null !default;
 $fluent-grid-base-command-ai-header-button-offset: null !default;
+$fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
 
 @if $size == "default" {
   $fluent-grid-base-cell-height: 48px !default;

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -1173,4 +1173,10 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       outline-offset: -2px;
     }
   }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $generic-grid-base-ai-prompt-editor-progressbar-height;
+    border: none;
+    border-radius: 0;
+  }
 }

packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss

@@ -30,6 +30,7 @@ $generic-grid-base-command-ai-header-button-size: null !default;
 
 $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: 0.6;
+$generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
 
 @if $size == "default" {
   $generic-grid-base-cell-padding: 7px !default;

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -1354,4 +1354,9 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
   .dx-command-ai .dx-command-ai-header-button .dx-button {
     @include dx-button-onlyicon-sizing();
   }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $material-grid-base-ai-prompt-editor-progressbar-height;
+    border-radius: 0;
+  }
 }

packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss

@@ -32,6 +32,7 @@ $material-grid-base-header-icon-size: 15px !default;
 $material-grid-base-column-chooser-item-margin: 8px !default;
 $material-command-edit-icon-margin: 4px !default;
 $material-command-edit-text-margin: 2px !default;
+$material-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
 
 @if $size == "default" {
   $material-grid-base-cell-height: 48px !default;