url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: fit 3 inventory tiles per row

Browse Source 
Move the 3-column grid down to the xl breakpoint (was 2xl), tighten the
inter-tile gap and card padding so three cards fit comfortably per row at
common widths instead of two.
This commit is contained in:
Pouzor
2026-06-27 13:56:27 +02:00
parent 612280e924
commit 8f8d9fe209
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/modals/PendingDevicesModal.tsx
+2 -2
View File
@@ -563,7 +563,7 @@ export function PendingDevicesModal({ open, onClose, highlightId, initialStatus
</p> </p>
)} )}
{!loading && filtered.length > 0 && ( {!loading && filtered.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2">
{filtered.map((d) => ( {filtered.map((d) => (
<DeviceCard <DeviceCard
key={d.id} key={d.id}
@@ -691,7 +691,7 @@ function DeviceCard({ device, selected, selectMode, highlighted, onClick, cardRe
ref={cardRef} ref={cardRef}
onClick={onClick} onClick={onClick}
data-testid={`pending-card-${device.id}`} data-testid={`pending-card-${device.id}`}
className={`relative text-left rounded-lg border p-3 transition-all duration-150 ${borderClass}`} className={`relative text-left rounded-lg border p-2.5 transition-all duration-150 ${borderClass}`}
> >
{selectMode && selected && ( {selectMode && selected && (
<CheckCircle2 <CheckCircle2