From e13086fef3d847658631c44828b28751d84a0288 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 25 Sep 2020 16:49:21 +0200
Subject: [PATCH] Fix exploding table layout

---
 .../CollectionList/CollectionList.tsx         |  2 +-
 .../AssignProductDialog.tsx                   | 15 +++----
 .../TableCellAvatar/TableCellAvatar.tsx       | 25 ++++++++---
 src/components/TableHead/TableHead.tsx        | 10 ++++-
 .../DiscountCategories/DiscountCategories.tsx | 42 +++++++++++--------
 .../DiscountCollections.tsx                   | 36 +++++++++-------
 .../DiscountProducts/DiscountProducts.tsx     | 11 ++++-
 .../components/VoucherList/VoucherList.tsx    | 10 ++++-
 .../HomeProductListCard.tsx                   | 15 +++++--
 .../components/MenuList/MenuList.tsx          | 11 +++--
 .../OrderFulfillment/OrderFulfillment.tsx     |  2 +-
 .../OrderProductAddDialog.tsx                 |  3 +-
 .../components/PluginsList/PluginsList.tsx    | 20 ++++-----
 .../ProductTypeAttributes.tsx                 | 28 +++++++++----
 .../ProductVariantNavigation.tsx              | 23 ++++++++--
 .../ProductVariants/ProductVariants.tsx       | 15 ++++++-
 .../ShippingZonesList/ShippingZonesList.tsx   | 25 +++++------
 src/staff/components/StaffList/StaffList.tsx  |  4 +-
 src/utils/tables.ts                           | 10 +++++
 19 files changed, 210 insertions(+), 97 deletions(-)
 create mode 100644 src/utils/tables.ts

diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index d46c53de0..a80b9cd50 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -51,7 +51,7 @@ interface CollectionListProps
   collections: CollectionList_collections_edges_node[];
 }
 
-const numberOfColumns = 5;
+const numberOfColumns = 4;
 
 const CollectionList: React.FC<CollectionListProps> = props => {
   const {
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 7c40a65ae..92a2a9a0c 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -32,11 +32,16 @@ export interface FormData {
 const useStyles = makeStyles(
   {
     avatar: {
-      "&:first-child": {
+      "&&:first-child": {
         paddingLeft: 0
-      }
+      },
+      width: 72
     },
     checkboxCell: {
+      paddingLeft: 0,
+      width: 88
+    },
+    colName: {
       paddingLeft: 0
     },
     overflow: {
@@ -44,10 +49,6 @@ const useStyles = makeStyles(
     },
     scrollArea: {
       overflowY: "scroll"
-    },
-    wideCell: {
-      paddingLeft: 0,
-      width: "100%"
     }
   },
   { name: "AssignProductDialog" }
@@ -148,7 +149,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                         className={classes.avatar}
                         thumbnail={maybe(() => product.thumbnail.url)}
                       />
-                      <TableCell className={classes.wideCell}>
+                      <TableCell className={classes.colName}>
                         {product.name}
                       </TableCell>
                       <TableCell
diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx
index a5494e839..5e1a16294 100644
--- a/src/components/TableCellAvatar/TableCellAvatar.tsx
+++ b/src/components/TableCellAvatar/TableCellAvatar.tsx
@@ -1,6 +1,6 @@
 import Avatar from "@material-ui/core/Avatar";
 import { makeStyles } from "@material-ui/core/styles";
-import TableCell from "@material-ui/core/TableCell";
+import TableCell, { TableCellProps } from "@material-ui/core/TableCell";
 import Cached from "@material-ui/icons/Cached";
 import classNames from "classnames";
 import React from "react";
@@ -11,6 +11,9 @@ export const AVATAR_MARGIN = 32;
 
 const useStyles = makeStyles(
   theme => ({
+    alignRight: {
+      justifyContent: "flex-end"
+    },
     avatar: {
       background: "none",
       border: `1px solid ${theme.palette.divider}`,
@@ -39,21 +42,33 @@ const useStyles = makeStyles(
   { name: "TableCellAvatar" }
 );
 
-interface TableCellAvatarProps {
+interface TableCellAvatarProps extends TableCellProps {
   className?: string;
   thumbnail?: string;
+  alignRight?: boolean;
   avatarProps?: string;
   children?: React.ReactNode | React.ReactNodeArray;
 }
 
 const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
-  const { children, className, thumbnail, avatarProps, ...rest } = props;
+  const {
+    children,
+    className,
+    alignRight,
+    thumbnail,
+    avatarProps,
+    ...rest
+  } = props;
 
   const classes = useStyles(props);
 
   return (
     <TableCell className={classNames(classes.root, className)} {...rest}>
-      <div className={classes.content}>
+      <div
+        className={classNames(classes.content, {
+          [classes.alignRight]: alignRight
+        })}
+      >
         {thumbnail === undefined ? (
           <Avatar className={classNames(classes.avatar, avatarProps)}>
             <Cached color="primary" />
@@ -68,7 +83,7 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
             src={thumbnail}
           />
         )}
-        <div className={classes.children}>{children}</div>
+        {!alignRight && <div className={classes.children}>{children}</div>}
       </div>
     </TableCell>
   );
diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx
index f382fa1c7..da846e74e 100644
--- a/src/components/TableHead/TableHead.tsx
+++ b/src/components/TableHead/TableHead.tsx
@@ -63,6 +63,14 @@ const useStyles = makeStyles(
   { name: "TableHead" }
 );
 
+function getColSpan(colSpan: number, dragRows: boolean): number {
+  if (dragRows) {
+    return colSpan - 2;
+  }
+
+  return colSpan - 1;
+}
+
 const TableHead: React.FC<TableHeadProps> = props => {
   const {
     children,
@@ -107,7 +115,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
           <>
             <TableCell
               className={classNames(classes.root)}
-              colSpan={colSpan - 1}
+              colSpan={getColSpan(colSpan, dragRows)}
             >
               <div className={classes.container}>
                 {selected && (
diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
index 419d68187..ddf81ad16 100644
--- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx
+++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
@@ -28,23 +28,24 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
 }
 
 const useStyles = makeStyles(
-  theme => ({
-    iconCell: {
+  {
+    colActions: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing(0.5)
+      width: 80
+    },
+    colName: {
+      width: "auto"
+    },
+    colProducts: {
+      textAlign: "right",
+      width: 140
     },
     tableRow: {
       cursor: "pointer"
-    },
-    textRight: {
-      textAlign: "right"
-    },
-    wideColumn: {
-      width: "60%"
     }
-  }),
+  },
   { name: "DiscountCategories" }
 );
 
@@ -52,8 +53,7 @@ const numberOfColumns = 4;
 
 const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
   const {
-    discount: sale,
-
+    discount,
     disabled,
     pageInfo,
     onCategoryAssign,
@@ -88,19 +88,25 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colProducts} />
+          <col className={classes.colActions} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={maybe(() => sale.categories.edges.map(edge => edge.node))}
+          items={maybe(() => discount.categories.edges.map(edge => edge.node))}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
           <>
-            <TableCell className={classes.wideColumn}>
+            <TableCell className={classes.colName}>
               <FormattedMessage defaultMessage="Category name" />
             </TableCell>
-            <TableCell className={classes.textRight}>
+            <TableCell className={classes.colProducts}>
               <FormattedMessage
                 defaultMessage="Products"
                 description="number of products"
@@ -124,7 +130,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         </TableFooter>
         <TableBody>
           {renderCollection(
-            maybe(() => sale.categories.edges.map(edge => edge.node)),
+            maybe(() => discount.categories.edges.map(edge => edge.node)),
             category => {
               const isSelected = category ? isChecked(category.id) : false;
 
@@ -147,13 +153,13 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
                   <TableCell>
                     {maybe<React.ReactNode>(() => category.name, <Skeleton />)}
                   </TableCell>
-                  <TableCell className={classes.textRight}>
+                  <TableCell className={classes.colProducts}>
                     {maybe<React.ReactNode>(
                       () => category.products.totalCount,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colActions}>
                     <IconButton
                       disabled={!category || disabled}
                       onClick={event => {
diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
index 1525ae8e8..4d61dfd7b 100644
--- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx
+++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
@@ -28,23 +28,25 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
 }
 
 const useStyles = makeStyles(
-  theme => ({
-    iconCell: {
+  {
+    colActions: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing(0.5)
+      width: 80
+    },
+    colName: {
+      width: "auto"
+    },
+    colProducts: {
+      textAlign: "right",
+      width: 140
     },
     tableRow: {
       cursor: "pointer"
     },
-    textRight: {
-      textAlign: "right"
-    },
-    wideColumn: {
-      width: "60%"
-    }
-  }),
+    textRight: {}
+  },
   { name: "DiscountCollections" }
 );
 
@@ -88,6 +90,12 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colProducts} />
+          <col className={classes.colActions} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -96,7 +104,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
-          <TableCell className={classes.wideColumn}>
+          <TableCell className={classes.colName}>
             <FormattedMessage defaultMessage="Collection name" />
           </TableCell>
           <TableCell className={classes.textRight}>
@@ -141,19 +149,19 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
                       onChange={() => toggle(collection.id)}
                     />
                   </TableCell>
-                  <TableCell>
+                  <TableCell className={classes.colName}>
                     {maybe<React.ReactNode>(
                       () => collection.name,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.textRight}>
+                  <TableCell className={classes.colProducts}>
                     {maybe<React.ReactNode>(
                       () => collection.products.totalCount,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colActions}>
                     <IconButton
                       disabled={!collection || disabled}
                       onClick={event => {
diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
index 8f3d51b38..e4d682400 100644
--- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx
+++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles(
       width: "auto"
     },
     colNameLabel: {
-      marginLeft: AVATAR_MARGIN
+      marginLeft: AVATAR_MARGIN + theme.spacing(3)
     },
     colPublished: {
       width: 150
@@ -102,6 +102,13 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colType} />
+          <col className={classes.colPublished} />
+          <col className={classes.colActions} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -124,7 +131,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
               description="product is published"
             />
           </TableCell>
-          <TableCell />
+          <TableCell className={classes.colActions} />
         </TableHead>
         <TableFooter>
           <TableRow>
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index 4733999a7..db0536d7a 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -17,6 +17,7 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { DiscountValueTypeEnum } from "@saleor/types/globalTypes";
 import { getArrowDirection } from "@saleor/utils/sort";
+import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -78,7 +79,7 @@ const useStyles = makeStyles(
   { name: "VoucherList" }
 );
 
-const numberOfColumns = 7;
+const numberOfColumns = 6;
 
 const VoucherList: React.FC<VoucherListProps> = props => {
   const {
@@ -130,6 +131,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.minSpent)}
           className={classes.colMinSpent}
         >
@@ -144,6 +146,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.startDate)}
           className={classes.colStart}
         >
@@ -158,6 +161,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.endDate)}
           className={classes.colEnd}
         >
@@ -172,6 +176,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.value)}
           className={classes.colValue}
         >
@@ -186,6 +191,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.limit)}
           className={classes.colUses}
         >
@@ -195,7 +201,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={numberOfColumns}
+            colSpan={getFooterColSpanWithBulkActions(vouchers, numberOfColumns)}
             settings={settings}
             hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
             onNextPage={onNextPage}
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index 4ebe0e70c..59cb931ba 100644
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
@@ -22,10 +22,14 @@ const useStyles = makeStyles(
       height: 64,
       width: 64
     },
-    avatarSpacing: {
+    colAvatar: {
       paddingBottom: theme.spacing(2),
       paddingRight: theme.spacing(),
-      paddingTop: theme.spacing(2)
+      paddingTop: theme.spacing(2),
+      width: 112
+    },
+    colName: {
+      width: "auto"
     },
     label: {
       paddingLeft: 0
@@ -62,6 +66,11 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
         })}
       />
       <ResponsiveTable>
+        <colgroup>
+          <col className={classes.colAvatar} />
+          <col className={classes.colName} />
+          <col />
+        </colgroup>
         <TableBody>
           {renderCollection(
             topProducts,
@@ -79,7 +88,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
                 }
               >
                 <TableCellAvatar
-                  className={classes.avatarSpacing}
+                  className={classes.colAvatar}
                   thumbnail={maybe(() => variant.product.thumbnail.url)}
                   avatarProps={classes.avatarProps}
                 />
diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx
index c2f161e66..d97470143 100644
--- a/src/navigation/components/MenuList/MenuList.tsx
+++ b/src/navigation/components/MenuList/MenuList.tsx
@@ -16,6 +16,7 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { MenuListUrlSortField } from "@saleor/navigation/urls";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
+import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -37,6 +38,9 @@ const useStyles = makeStyles(
       },
       colTitle: {}
     },
+    colAction: {
+      width: 80
+    },
     colItems: {
       textAlign: "right"
     },
@@ -50,7 +54,7 @@ const useStyles = makeStyles(
   { name: "MenuList" }
 );
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const MenuList: React.FC<MenuListProps> = props => {
   const {
@@ -116,12 +120,12 @@ const MenuList: React.FC<MenuListProps> = props => {
               id="menuListItems"
             />
           </TableCellHeader>
-          <TableCell />
+          <TableCell className={classes.colAction} />
         </TableHead>
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={numberOfColumns}
+              colSpan={getFooterColSpanWithBulkActions(menus, numberOfColumns)}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
@@ -165,6 +169,7 @@ const MenuList: React.FC<MenuListProps> = props => {
                     )}
                   </TableCell>
                   <IconButtonTableCell
+                    className={classes.colAction}
                     disabled={disabled}
                     onClick={() => onDelete(menu.id)}
                   >
diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
index 52ec5e04b..89b79e46d 100644
--- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
+++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
@@ -82,7 +82,7 @@ interface OrderFulfillmentProps {
   onTrackingCodeAdd: () => void;
 }
 
-const numberOfColumns = 4;
+const numberOfColumns = 5;
 
 const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
   const {
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 0330b72ee..53e588717 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -38,7 +38,8 @@ import {
 const useStyles = makeStyles(
   theme => ({
     avatar: {
-      paddingLeft: 0
+      paddingLeft: 0,
+      width: 64
     },
     colName: {
       paddingLeft: 0
diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx
index 37528e7c2..a6d633ba4 100644
--- a/src/plugins/components/PluginsList/PluginsList.tsx
+++ b/src/plugins/components/PluginsList/PluginsList.tsx
@@ -28,18 +28,16 @@ export interface PluginListProps
 
 const useStyles = makeStyles(
   theme => ({
-    [theme.breakpoints.up("lg")]: {
-      colAction: {
-        "& svg": {
-          color: theme.palette.primary.main
-        },
-        textAlign: "right" as "right"
+    colAction: {
+      "& svg": {
+        color: theme.palette.primary.main
       },
-      colActive: {},
-      colName: {}
+      textAlign: "right",
+      width: 200
+    },
+    colActive: {
+      width: 200
     },
-    colAction: {},
-    colActive: {},
     colName: {},
     link: {
       cursor: "pointer"
@@ -48,7 +46,7 @@ const useStyles = makeStyles(
   { name: "PluginsList" }
 );
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const PluginList: React.FC<PluginListProps> = props => {
   const {
diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
index 0487366bc..defe87b39 100644
--- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
+++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
@@ -26,16 +26,19 @@ import {
 } from "../../types/ProductTypeDetails";
 
 const useStyles = makeStyles(
-  theme => ({
-    colName: {},
-    colSlug: {
-      width: 300
-    },
-    iconCell: {
+  {
+    colAction: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing(1.5)
+      width: 80
+    },
+    colGrab: {
+      width: 60
+    },
+    colName: {},
+    colSlug: {
+      width: 300
     },
     link: {
       cursor: "pointer"
@@ -43,7 +46,7 @@ const useStyles = makeStyles(
     textLeft: {
       textAlign: "left"
     }
-  }),
+  },
   { name: "ProductTypeAttributes" }
 );
 
@@ -115,6 +118,13 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col className={classes.colGrab} />
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colSlug} />
+          <col className={classes.colAction} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           disabled={disabled}
@@ -178,7 +188,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colAction}>
                     <IconButton
                       onClick={stopPropagation(() =>
                         onAttributeUnassign(attribute.id)
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
index 39ac8e6b2..1b73f0c4f 100644
--- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
+++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
@@ -22,13 +22,18 @@ import { ProductVariantDetails_productVariant } from "../../types/ProductVariant
 
 const useStyles = makeStyles(
   theme => ({
+    colAvatar: {
+      width: 64
+    },
     colName: {
-      paddingLeft: 0,
-      textAlign: [["left"], "!important"] as any
+      paddingLeft: 0
     },
     link: {
       cursor: "pointer"
     },
+    noHandle: {
+      textAlign: "right"
+    },
     tabActive: {
       "& > td:first-child": {
         "&:before": {
@@ -92,6 +97,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
               onClick={variant ? () => onRowClick(variant.id) : undefined}
             >
               <TableCellAvatar
+                className={classes.colAvatar}
                 thumbnail={maybe(
                   () => variant.images[0].url,
                   fallbackThumbnail
@@ -115,8 +121,17 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
             </TableRow>
           ) : (
             <TableRow>
-              <TableCellAvatar className={classes.tabActive} thumbnail={null} />
-              <TableCell className={classes.colName} colSpan={2}>
+              <TableCellAvatar
+                alignRight
+                className={classNames(
+                  classes.colAvatar,
+                  classes.tabActive,
+                  classes.noHandle
+                )}
+                thumbnail={null}
+                colSpan={2}
+              />
+              <TableCell className={classes.colName}>
                 <FormattedMessage
                   defaultMessage="New Variant"
                   description="variant name"
diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx
index 3c16477a5..0df83659c 100644
--- a/src/products/components/ProductVariants/ProductVariants.tsx
+++ b/src/products/components/ProductVariants/ProductVariants.tsx
@@ -73,16 +73,19 @@ const useStyles = makeStyles(
         width: 30
       },
       colInventory: {
-        width: 270
+        width: 200
       },
       colName: {},
       colPrice: {
-        width: 150
+        width: 135
       },
       colSku: {
         width: 200
       }
     },
+    colGrab: {
+      width: 60
+    },
     colInventory: {
       textAlign: "right"
     },
@@ -278,6 +281,14 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
       )}
       {hasVariants && (
         <ResponsiveTable className={classes.denseTable}>
+          <colgroup>
+            <col className={classes.colGrab} />
+            <col />
+            <col className={classes.colName} />
+            <col className={classes.colSku} />
+            <col className={classes.colPrice} />
+            <col className={classes.colInventory} />
+          </colgroup>
           <TableHead
             colSpan={numberOfColumns}
             selected={selected}
diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
index 80a879229..c897b9129 100644
--- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
+++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -15,8 +15,8 @@ import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragment";
 import { maybe, renderCollection } from "@saleor/misc";
-import { ICONBUTTON_SIZE } from "@saleor/theme";
 import { ListActions, ListProps } from "@saleor/types";
+import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -28,17 +28,15 @@ export interface ShippingZonesListProps extends ListProps, ListActions {
 
 const useStyles = makeStyles(
   theme => ({
-    [theme.breakpoints.up("lg")]: {
-      colCountries: {},
-      colName: { width: 200 }
-    },
-    alignRight: {
+    colAction: {
       "&:last-child": {
         paddingRight: theme.spacing(1)
       },
-      width: ICONBUTTON_SIZE + theme.spacing(0.5)
+      width: 80
+    },
+    colCountries: {
+      width: 180
     },
-    colCountries: {},
     colName: {
       paddingLeft: 0
     },
@@ -49,7 +47,7 @@ const useStyles = makeStyles(
   { name: "ShippingZonesList" }
 );
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
   const {
@@ -108,12 +106,15 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
           <TableCell className={classes.colCountries}>
             <FormattedMessage defaultMessage="Countries" />
           </TableCell>
-          <TableCell />
+          <TableCell className={classes.colAction} />
         </TableHead>
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={4}
+              colSpan={getFooterColSpanWithBulkActions(
+                shippingZones,
+                numberOfColumns
+              )}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
@@ -161,7 +162,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.alignRight}>
+                  <TableCell className={classes.colAction}>
                     <IconButton
                       color="primary"
                       disabled={disabled}
diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index 2f60804de..cdb2a3f07 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -68,6 +68,8 @@ interface StaffListProps extends ListProps, SortPage<StaffListUrlSortField> {
   staffMembers: StaffList_staffUsers_edges_node[];
 }
 
+const numberOfColumns = 2;
+
 const StaffList: React.FC<StaffListProps> = props => {
   const {
     settings,
@@ -119,7 +121,7 @@ const StaffList: React.FC<StaffListProps> = props => {
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={3}
+            colSpan={numberOfColumns}
             settings={settings}
             hasNextPage={
               pageInfo && !disabled ? pageInfo.hasNextPage : undefined
diff --git a/src/utils/tables.ts b/src/utils/tables.ts
new file mode 100644
index 000000000..e7a586dfd
--- /dev/null
+++ b/src/utils/tables.ts
@@ -0,0 +1,10 @@
+export function getFooterColSpanWithBulkActions(
+  arr: any[],
+  numberOfColumns: number
+): number {
+  if (arr === undefined || arr.length > 0) {
+    return numberOfColumns + 1;
+  }
+
+  return numberOfColumns;
+}