align checkboxes with radiobuttons

datalens-tech · Dec 24, 2024 · 8fb40b0 · 8fb40b0
1 parent bdf5aed
commit 8fb40b0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.scss b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.scss
@@ -12,6 +12,15 @@
         height: 430px;
     }
 
+    &__row {
+        --gc-form-row-label-width: 272px;
+        margin-block-end: var(--g-spacing-2);
+
+        &:last-child {
+            margin-block-end: 0;
+        }
+    }
+
     &__help-icon {
         left: var(--g-spacing-1);
     }
@@ -37,18 +46,18 @@
     }
 
     &__item-title {
-        flex: 1;
+        width: 240px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
     }
 
     &__checkbox {
-        margin-block-start: var(--g-spacing-1);
+        margin-block-start: 6px;
     }
 
     &__radio-button {
-        width: 180px;
+        flex: 1;
     }
 
     &__text-input {

diff --git a/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
@@ -219,6 +219,7 @@ const DialogExtendedSettings = ({
             <Dialog.Body className={b('body')}>
                 <FormSection title={i18n('label_group-parameters')}>
                     <FormRow
+                        className={b('row')}
                         label={
                             <React.Fragment>
                                 {i18n('label_apply-button-checkbox')}
@@ -238,6 +239,7 @@ const DialogExtendedSettings = ({
                         />
                     </FormRow>
                     <FormRow
+                        className={b('row')}
                         label={
                             <React.Fragment>
                                 {i18n('label_reset-button-checkbox')}
@@ -257,7 +259,7 @@ const DialogExtendedSettings = ({
                         />
                     </FormRow>
                     {showAutoHeight && (
-                        <FormRow label={i18n('label_autoheight-checkbox')}>
+                        <FormRow className={b('row')} label={i18n('label_autoheight-checkbox')}>
                             <Checkbox
                                 className={b('checkbox')}
                                 checked={selectorsGroup.autoHeight}
@@ -269,6 +271,7 @@ const DialogExtendedSettings = ({
                     )}
                     {showUpdateControlsOnChange && (
                         <FormRow
+                            className={b('row')}
                             label={
                                 <React.Fragment>
                                     {i18n('label_update-controls-on-change')}