fix(PaginatedStorage): controls should be fixed (#2217)

Author: Raubzeug

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -8,6 +8,7 @@ const b = cn('ydb-table-with-controls-layout');
 interface TableWithControlsLayoutItemProps {
     children: React.ReactNode;
     className?: string;
+    wrapperClassName?: string;
 }
 
 interface TableProps extends TableWithControlsLayoutItemProps {
@@ -24,9 +25,10 @@ export const TableWithControlsLayout = ({
 TableWithControlsLayout.Controls = function TableControls({
     children,
     className,
+    wrapperClassName,
 }: TableWithControlsLayoutItemProps) {
     return (
-        <div className={b('controls-wrapper')}>
+        <div className={b('controls-wrapper', wrapperClassName)}>
             <div className={b('controls', className)}>{children}</div>
         </div>
     );

src/containers/Storage/PaginatedStorageGroups.tsx

@@ -189,12 +189,16 @@ function GroupedStorageGroupsComponent({
     };
 
     return (
-        <TableWithControlsLayout>
-            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
-            {error ? <ResponseError error={error} /> : null}
-            <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
-                {renderGroups()}
-            </TableWithControlsLayout.Table>
-        </TableWithControlsLayout>
+        <React.Fragment>
+            <TableWithControlsLayout.Controls wrapperClassName={b('controls')}>
+                {renderControls()}
+            </TableWithControlsLayout.Controls>
+            <TableWithControlsLayout>
+                {error ? <ResponseError error={error} /> : null}
+                <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
+                    {renderGroups()}
+                </TableWithControlsLayout.Table>
+            </TableWithControlsLayout>
+        </React.Fragment>
     );
 }

src/containers/Storage/PaginatedStorageNodes.tsx

@@ -192,13 +192,17 @@ function GroupedStorageNodesComponent({
     };
 
     return (
-        <TableWithControlsLayout>
-            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
-            {error ? <ResponseError error={error} /> : null}
-            <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
-                {renderGroups()}
-            </TableWithControlsLayout.Table>
-        </TableWithControlsLayout>
+        <React.Fragment>
+            <TableWithControlsLayout.Controls wrapperClassName={b('controls')}>
+                {renderControls()}
+            </TableWithControlsLayout.Controls>
+            <TableWithControlsLayout>
+                {error ? <ResponseError error={error} /> : null}
+                <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
+                    {renderGroups()}
+                </TableWithControlsLayout.Table>
+            </TableWithControlsLayout>
+        </React.Fragment>
     );
 }
 

src/containers/Storage/Storage.scss

@@ -19,4 +19,13 @@
     &__groups-wrapper {
         padding-right: 20px;
     }
+
+    &__controls {
+        width: unset;
+        margin-right: -40px;
+        padding-right: 40px;
+        padding-left: 20px;
+
+        transform: translateX(-20px);
+    }
 }