B4L/buildfor_life_repair
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Devices and Components grids fill widescreens
Deploy to LXC / deploy (push) Successful in 30s
Details

Browse Source 
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.
This commit is contained in:
grabowski
2026-07-01 13:30:27 +07:00
parent 48c5eaeb40
commit 58a0a2efaf
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/components/+page.svelte
+2 -2
View File
@@ -27,7 +27,7 @@
<title>Components - My Collection</title> <title>Components - My Collection</title>
</svelte:head> </svelte:head>
<div class="mx-auto max-w-6xl"> <div class="w-full">
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Components</h1> <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"> <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> <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> </div>
{:else} {: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} {#each data.components as comp}
<a href="/components/{comp.id}" <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"> 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
+2 -2
View File
@@ -30,7 +30,7 @@
<title>Devices - My Collection</title> <title>Devices - My Collection</title>
</svelte:head> </svelte:head>
<div class="mx-auto max-w-6xl"> <div class="w-full">
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Devices</h1> <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Devices</h1>
<a <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> <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> </div>
{:else} {: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} {#each data.devices as device}
<a <a
href="/devices/{device.id}" href="/devices/{device.id}"