refactor(Storage): parent node responsible for vdisks position in table

Author: ariser

src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -7,6 +7,8 @@
     width: 100%;
     height: var(--yc-text-body-2-line-height);
 
+    vertical-align: top;
+
     border: 1px solid var(--yc-color-infographics-misc-medium);
     border-radius: 2px;
     background-color: var(--yc-color-infographics-misc-light);

src/containers/Storage/StorageGroups/StorageGroups.scss

@@ -1,12 +1,20 @@
 .global-storage-groups {
     &__vdisks-wrapper {
         display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
         justify-content: center;
 
         min-width: 500px;
     }
+    &__vdisks-item {
+        flex-grow: 1;
+
+        max-width: 200px;
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0px;
+        }
+    }
     &__pool-name-wrapper {
         display: flex;
         align-items: flex-end;

src/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -194,12 +194,13 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             render: ({value, row}) => (
                 <div className={b('vdisks-wrapper')}>
                     {_.map(value as any, (el) => (
-                        <Vdisk
-                            key={stringifyVdiskId(el.VDiskId)}
-                            {...el}
-                            PoolName={row[TableColumnsIds.PoolName]}
-                            nodes={nodes}
-                        />
+                        <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                            <Vdisk
+                                {...el}
+                                PoolName={row[TableColumnsIds.PoolName]}
+                                nodes={nodes}
+                            />
+                        </div>
                     ))}
                 </div>
             ),

src/containers/Storage/Vdisk/Vdisk.scss

@@ -1,16 +1,6 @@
 .vdisk-storage {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-
-    max-width: 200px;
-    margin-right: 10px;
-
     cursor: pointer;
 
-    &:last-child {
-        margin-right: 0px;
-    }
     &__popup-wrapper {
         padding: 5px 10px;
     }