UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

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

@@ -167,7 +167,6 @@ export default function JobsList({ refetch, loading, jobs, total }) {
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    console.log("handleTableChange -> sorter", sorter);
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
@@ -178,13 +177,26 @@ export default function JobsList({ refetch, loading, jobs, total }) {
     <div>
       <Table
         loading={loading}
+        size='small'
+        scroll={{ x: true }}
+        pagination={{
+          position: "top",
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey='id'
+        dataSource={jobs}
+        onChange={handleTableChange}
         title={() => {
           return (
-            <div style={{ display: "flex" }}>
+            <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;
@@ -195,17 +207,6 @@ export default function JobsList({ refetch, loading, jobs, total }) {
             </div>
           );
         }}
-        size="small"
-        pagination={{
-          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
-          total: total,
-        }}
-        columns={columns}
-        rowKey="id"
-        dataSource={jobs}
-        onChange={handleTableChange}
       />
     </div>
   );