Further UI Updates.

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -191,7 +191,23 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   };
 
   return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onSearch={(value) => {
+              search.search = value;
+              history.push({ search: queryString.stringify(search) });
+            }}
+            enterButton
+          />
+        </Space>
+      }
+    >
       <Table
         loading={loading}
         scroll={{ x: true }}
@@ -205,26 +221,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         rowKey="id"
         dataSource={jobs}
         onChange={handleTableChange}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
-              <Input.Search
-                className="imex-table-header__search"
-                placeholder={t("general.labels.search")}
-                onSearch={(value) => {
-                  search.search = value;
-                  history.push({ search: queryString.stringify(search) });
-                }}
-                enterButton
-              />
-            </div>
-          );
-        }}
       />
-    </div>
+    </Card>
   );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(JobsList);