From 348e794b8836b8c769dfd01f7c1bd86eb4078629 Mon Sep 17 00:00:00 2001
From: dxvladslavvolkov <vladislav.volkov@devexpress.com>
Date: Wed, 15 Nov 2023 14:28:06 +0400
Subject: [PATCH] Fix editors

---
 src/app/preview/editors/editors.component.css |  8 ++--
 .../preview/editors/editors.component.html    | 40 ++++++++++---------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/app/preview/editors/editors.component.css b/src/app/preview/editors/editors.component.css
index cbe0dd95..3500326b 100644
--- a/src/app/preview/editors/editors.component.css
+++ b/src/app/preview/editors/editors.component.css
@@ -31,7 +31,7 @@
 
 .editors .block .field {
     margin: 0 10px 20px 0;
-    flex: 1 0 180px;
+    flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -135,15 +135,15 @@
     display: flex;
 }
 
-.last-fields {
+.grouped-fields {
     display: flex;
     width: 100%;
 }
 
-.editors .last-fields .field.validation {
+.editors .grouped-fields .field.validation {
     flex-basis: 32%;
 }
 
-.editors .last-fields .field.daterangebox {
+.editors .grouped-fields .field.daterangebox {
     flex-basis: 66%;
 }
diff --git a/src/app/preview/editors/editors.component.html b/src/app/preview/editors/editors.component.html
index dbe16076..de871746 100644
--- a/src/app/preview/editors/editors.component.html
+++ b/src/app/preview/editors/editors.component.html
@@ -22,27 +22,31 @@
         <div class="block editors">
             <div class="header">Text Editors</div>
             <div class="block outlined">
-                <div class="field">
-                    <dx-text-box [stylingMode]="stylingModeValue" value="Outlined" label="Text Box"></dx-text-box>
-                </div>
-                <div class="field">
-                    <dx-select-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Select Box"></dx-select-box>
-                </div>
-                <div class="field">
-                    <dx-color-box [stylingMode]="stylingModeValue" value="#333" label="Color Box"></dx-color-box>
-                </div>
-                <div class="field">
-                    <dx-number-box [stylingMode]="stylingModeValue" [showSpinButtons]="true" value="123" label="Number Box"></dx-number-box>
-                </div>
-                <div class="field">
-                    <div class="value">
-                        <dx-tag-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" [value]="['Outlined']" label="Tag Box"></dx-tag-box>
+                <div class="grouped-fields">
+                    <div class="field">
+                        <dx-text-box [stylingMode]="stylingModeValue" value="Outlined" label="Text Box"></dx-text-box>
+                    </div>
+                    <div class="field">
+                        <dx-select-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Select Box"></dx-select-box>
+                    </div>
+                    <div class="field">
+                        <dx-color-box [stylingMode]="stylingModeValue" value="#333" label="Color Box"></dx-color-box>
                     </div>
                 </div>
-                <div class="field">
-                    <dx-lookup [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Lookup"></dx-lookup>
+                <div class="grouped-fields">
+                    <div class="field">
+                        <dx-number-box [stylingMode]="stylingModeValue" [showSpinButtons]="true" value="123" label="Number Box"></dx-number-box>
+                    </div>
+                    <div class="field">
+                        <div class="value">
+                            <dx-tag-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" [value]="['Outlined']" label="Tag Box"></dx-tag-box>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <dx-lookup [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Lookup"></dx-lookup>
+                    </div>
                 </div>
-                <div class="last-fields">
+                <div class="grouped-fields">
                     <div class="field validation">
                         <dx-text-box [stylingMode]="stylingModeValue" [value]="invalidValue" label="Validated">
                             <dx-validator>