fix bug in table layout

Signed-off-by: Ronni Skansing <rskansing@gmail.com>

frontend/src/lib/components/table/Table.svelte

@@ -42,7 +42,7 @@
 		if (!pagination && sortable?.length) {
 			console.warn('You need to pass a pagination object to make the column sortable');
 		}
-		columnsLength = columns.length + 2;
+		columnsLength = columns.length + (hasActions ? 2 : 0);
 	});
 
 	let currentPage = pagination && pagination.currentPage;
@@ -82,10 +82,12 @@
 									<GhostText />
 								</TableCell>
 							{/each}
-							<TableCellEmpty />
-							<TableCellAction>
-								<GhostText square center />
-							</TableCellAction>
+							{#if hasActions}
+								<TableCellEmpty />
+								<TableCellAction>
+									<GhostText square center />
+								</TableCellAction>
+							{/if}
 						</TableRow>
 					{/each}
 				{/if}

frontend/src/lib/components/table/TableHeadCell.svelte

@@ -10,7 +10,6 @@
 	export let size = '';
 	// last tells if it the last field column before the actions column
 	export let last = false;
-	export let fillRest = false;
 	export let isGhost = false;
 	export let title = '';
 
@@ -40,7 +39,6 @@
 	class:w-48={size === 'small'}
 	class:w-56={size === 'medium'}
 	class:w-80={size === 'large'}
-	class:w-full={fillRest}
 >
 	<button
 		class="flex group cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30 rounded-md p-1 transition-colors duration-200"

frontend/src/lib/components/table/TableHeader.svelte

@@ -35,7 +35,6 @@
 					{isGhost}
 					sortable={sortableMap[column.column.toLowerCase()]}
 					last={i === columns.length - 1}
-					fillRest={i === columns.length - 1 && !hasActions}
 				/>
 			{:else}
 				<TableHeadCell
@@ -43,7 +42,6 @@
 					{pagination}
 					sortable={sortableMap[column.toLowerCase()]}
 					last={i === columns.length - 1}
-					fillRest={i === columns.length - 1 && !hasActions}
 				/>
 			{/if}
 		{/each}

frontend/src/routes/+layout.svelte

@@ -310,13 +310,16 @@
 </div>
 
 <style>
+	:global(body) {
+		min-width: 768px;
+		overflow-x: auto;
+	}
+
 	:global(body, table th) {
 		user-select: none;
 
 		/* font-family: "Phudu"; */
 		font-family: 'Titillium Web';
-		min-width: 768px;
-		overflow-x: auto;
 	}
 	:global(table) {
 		user-select: text;