Client: Improved layout of new spool icon

client/src/pages/filaments/list.tsx

@@ -8,7 +8,7 @@ import {
   DateField,
   CloneButton,
 } from "@refinedev/antd";
-import { Table, Space, Button } from "antd";
+import { Table, Space, Button, Row, Col } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -158,25 +158,32 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           filters={useListFiltersForField(dataSource, "name")}
           filteredValue={getFiltersForField(typedFilters, "name")}
           render={(value, record: IFilament) => {
-            return (
+            return {
-              <>
+              props: {
+                style: {
+                  paddingLeft: 0,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                },
+              },
+              children: (
+                <Row wrap={false} justify="space-around" align="middle">
                   {record.color_hex && (
+                    <Col flex="none">
                       <Icon
                         component={SpoolIcon}
                         style={{
                           color: "#" + record.color_hex,
-                      fontSize: 40,
+                          fontSize: 42,
-                      verticalAlign: "middle",
-                      marginLeft: -10,
                           marginRight: 0,
-                      marginTop: -20,
-                      marginBottom: -20,
                         }}
                       />
+                    </Col>
                   )}
-                {value}
+                  <Col flex="auto">{value}</Col>
-              </>
+                </Row>
-            );
+              ),
+            };
           }}
         />
         <Table.Column

client/src/pages/spools/list.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
   CloneButton,
 } from "@refinedev/antd";
-import { Table, Space, Button } from "antd";
+import { Table, Space, Button, Row, Col } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -151,25 +151,32 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           filters={useListFiltersForField(dataSource, "filament_name")}
           filteredValue={getFiltersForField(typedFilters, "filament_name")}
           render={(value, record: ISpool) => {
-            return (
+            return {
-              <>
+              props: {
+                style: {
+                  paddingLeft: 0,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                },
+              },
+              children: (
+                <Row wrap={false} justify="space-around" align="middle">
                   {record.filament.color_hex && (
+                    <Col flex="none">
                       <Icon
                         component={SpoolIcon}
                         style={{
                           color: "#" + record.filament.color_hex,
-                      fontSize: 40,
+                          fontSize: 42,
-                      verticalAlign: "middle",
-                      marginLeft: -10,
                           marginRight: 0,
-                      marginTop: -20,
-                      marginBottom: -20,
                         }}
                       />
+                    </Col>
                   )}
-                {value}
+                  <Col flex="auto">{value}</Col>
-              </>
+                </Row>
-            );
+              ),
+            };
           }}
         />
         <Table.Column