fix(System): minor css-fix for '[nonvoting]' [YTFRONT-4477]

ytsaurus · Jan 22, 2025 · ec76ecc · ec76ecc
1 parent 8986360
commit ec76ecc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/packages/ui/src/ui/pages/system/Masters/Instance.tsx b/packages/ui/src/ui/pages/system/Masters/Instance.tsx
@@ -95,27 +95,23 @@ export const Instance: FC<Props> = ({instance, hostType, allowVoting, allowServi
                 <Tooltip content={addressWithoutPort}>
                     <div className={b('host-name')}>{shortName}</div>
                 </Tooltip>
-                <Flex gap={1}>
+                <Flex gap={1} alignItems="center">
                     <span className={b('host-btn')}>
                         <ClipboardButton view="flat-secondary" text={address} />
                     </span>
-                    {allowService && (
-                        <ChangeMaintenanceButton
-                            className={b('host-btn')}
-                            path={instance.getPath()}
-                            title={`Edit ${addressWithoutPort}`}
-                            host={$physicalAddress}
-                            container={$address}
-                            maintenance={maintenance}
-                            maintenanceMessage={maintenanceMessage}
-                            onMaintenanceChange={handleOnMaintenanceChange}
-                        />
-                    )}
-                    {
-                        <Text className={b('nonvoting', {show: denyVoting})} color="secondary">
-                            [nonvoting]
-                        </Text>
-                    }
+                    <ChangeMaintenanceButton
+                        className={b('host-btn', {hidden: !allowService})}
+                        path={instance.getPath()}
+                        title={`Edit ${addressWithoutPort}`}
+                        host={$physicalAddress}
+                        container={$address}
+                        maintenance={maintenance}
+                        maintenanceMessage={maintenanceMessage}
+                        onMaintenanceChange={handleOnMaintenanceChange}
+                    />
+                    <Text className={b('nonvoting', {hidden: !denyVoting})} color="secondary">
+                        [nonvoting]
+                    </Text>
                 </Flex>
             </div>
         </>

diff --git a/packages/ui/src/ui/pages/system/Masters/MasterGroup.scss b/packages/ui/src/ui/pages/system/Masters/MasterGroup.scss
@@ -51,20 +51,31 @@
         grid-column: host;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         gap: 0 4px;
 
         &-name {
             flex: 0 1 auto;
             @include ellipsis();
         }
 
+        $host: &;
+
         &-btn {
             flex: 0 0 auto;
             visibility: hidden;
+
+            &_hidden {
+                visibility: hidden;
+            }
         }
 
         &:hover &-btn {
             visibility: visible;
+
+            &_hidden {
+                visibility: hidden;
+            }
         }
 
         &_quorum {
@@ -90,9 +101,6 @@
                 &_missing {
                     color: var(--danger-color);
                 }
-
-                &_unknown {
-                }
             }
 
             .yt-icon {
@@ -114,9 +122,8 @@
     }
 
     &__nonvoting {
-        display: none;
-        &_show {
-            display: unset;
+        &_hidden {
+            visibility: hidden;
         }
     }
 }