Make Devices and Components grids fill widescreens

Both list pages were capped at max-w-6xl and 3 columns, wasting most
of the horizontal space on wide monitors. Drop the width cap
(w-full) and step the card grid up to 4 columns at xl and 6 at 2xl.

src/routes/(app)/components/+page.svelte

@@ -27,7 +27,7 @@
 	<title>Components - My Collection</title>
 </svelte:head>
 
-<div class="mx-auto max-w-6xl">
+<div class="w-full">
 	<div class="mb-6 flex items-center justify-between">
 		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Components</h1>
 		<a href="/components/new" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
@@ -58,7 +58,7 @@
 			<a href="/components/new" class="mt-2 inline-block text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">Add your first component</a>
 		</div>
 	{:else}
-		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
 			{#each data.components as comp}
 				<a href="/components/{comp.id}"
 					class="group rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800 overflow-hidden">

src/routes/(app)/devices/+page.svelte

@@ -30,7 +30,7 @@
 	<title>Devices - My Collection</title>
 </svelte:head>
 
-<div class="mx-auto max-w-6xl">
+<div class="w-full">
 	<div class="mb-6 flex items-center justify-between">
 		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Devices</h1>
 		<a
@@ -82,7 +82,7 @@
 			<a href="/devices/new" class="mt-2 inline-block text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">Add your first device</a>
 		</div>
 	{:else}
-		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
 			{#each data.devices as device}
 				<a
 					href="/devices/{device.id}"