fix: move node roles to a separate column

Author: artemmufazalov

src/components/FullNodeViewer/FullNodeViewer.scss

@@ -7,7 +7,9 @@
         display: flex;
         flex-direction: column;
 
-        width: 500px;
+        width: max-content;
+        min-width: 300px;
+        max-width: 500px;
 
         &_pools {
             display: grid;
@@ -24,4 +26,8 @@
     &__section-title {
         @include mixins.info-viewer-title();
     }
+
+    &__role {
+        color: var(--g-color-text-secondary);
+    }
 }

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -45,18 +45,6 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
     if (node?.Rack) {
         commonInfo.push({label: i18n('rack'), value: node?.Rack});
     }
-    if (node?.Roles && node?.Roles.length) {
-        commonInfo.push({
-            label: i18n('roles'),
-            value: (
-                <Flex direction={'column'}>
-                    {node.Roles.map((role) => {
-                        return <div key={role}>{role}</div>;
-                    })}
-                </Flex>
-            ),
-        });
-    }
 
     if (developerUIHref) {
         commonInfo.push({
@@ -83,7 +71,7 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
 
     return (
         <div className={b(null, className)}>
-            <Flex wrap gap={2}>
+            <Flex wrap gap={4}>
                 <Flex direction="column" gap={2}>
                     <InfoViewer
                         title={i18n('title.common-info')}
@@ -116,6 +104,19 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
                         info={averageInfo}
                     />
                 </Flex>
+
+                {node.Roles && node.Roles.length ? (
+                    <Flex direction="column" gap={2}>
+                        <div className={b('section')}>
+                            <div className={b('section-title')}>{i18n('title.roles')}</div>
+                            {node?.Roles?.map((role) => (
+                                <div className={b('role')} key={role}>
+                                    {role}
+                                </div>
+                            ))}
+                        </div>
+                    </Flex>
+                ) : null}
             </Flex>
         </div>
     );

src/components/FullNodeViewer/i18n/en.json

@@ -4,7 +4,6 @@
   "version": "Version",
   "dc": "DC",
   "rack": "Rack",
-  "roles": "Roles",
   "links": "Links",
 
   "la-interval-1m": "1 min",
@@ -16,6 +15,7 @@
 
   "title.common-info": "Common info",
   "title.endpoints": "Endpoints",
+  "title.roles": "Roles",
   "title.pools": "Pools",
   "title.load-average": "Load average"
 }