feat: update row note position (#20)

gravity-ui · Mar 30, 2023 · 4f15395 · 4f15395
1 parent 23f9dd5
commit 4f15395
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss
@@ -17,37 +17,40 @@
 
     &__left {
         width: 180px;
+        min-height: 28px;
         display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
+        align-items: center;
 
         &-inner {
-            min-height: 28px;
-            display: flex;
-        }
-
-        &::after {
-            content: '';
-            width: 100%;
-            flex-shrink: 1;
+            display: inline;
         }
     }
 
     &__title {
-        align-self: center;
+        word-break: break-word;
+        margin-right: 3px;
+
+        &_required {
+            &::after {
+                content: '*';
+                color: var(--yc-color-text-danger);
+            }
+        }
     }
 
     &__note {
-        height: 28px;
-        display: flex;
-        align-items: center;
-        margin-left: 5px;
+        padding-right: 16px;
 
-        .yc-help-popover {
-            display: flex;
+        &-inner {
+            position: absolute;
+            margin-top: 1px;
 
-            & > span {
+            .yc-help-popover {
                 display: flex;
+
+                & > span {
+                    display: flex;
+                }
             }
         }
     }
@@ -74,7 +77,6 @@
     }
 
     &__required-mark {
-        margin-left: 2px;
         color: var(--yc-color-text-danger);
     }
 }
diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx
@@ -36,17 +36,18 @@ const RowBase = <T extends FieldValue, S extends Spec>({
         <div className={b({'extra-width': isArraySpec(spec) || arrayItem})}>
             <div className={b('left')}>
                 <div className={b('left-inner')}>
-                    <div className={b('title')}>
+                    <span className={b('title', {required: spec.required})}>
                         {spec.viewSpec.layoutTitle}
-                        {spec.required && <span className={b('required-mark')}>*</span>}
-                    </div>
+                    </span>
                     {!verboseDescription && spec.viewSpec.layoutDescription ? (
-                        <div className={b('note')}>
-                            <HelpPopover
-                                htmlContent={spec.viewSpec.layoutDescription}
-                                placement={['bottom', 'top']}
-                            />
-                        </div>
+                        <span className={b('note')}>
+                            <span className={b('note-inner')}>
+                                <HelpPopover
+                                    htmlContent={spec.viewSpec.layoutDescription}
+                                    placement={['bottom', 'top']}
+                                />
+                            </span>
+                        </span>
                     ) : null}
                 </div>
             </div>