From 8f8d9fe209ae22db1e03a5be96968cf241e3638a Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Sat, 27 Jun 2026 13:56:27 +0200
Subject: [PATCH] style: fit 3 inventory tiles per row

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.
---
 frontend/src/components/modals/PendingDevicesModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/modals/PendingDevicesModal.tsx b/frontend/src/components/modals/PendingDevicesModal.tsx
index e825058..27b09f6 100644
--- a/frontend/src/components/modals/PendingDevicesModal.tsx
+++ b/frontend/src/components/modals/PendingDevicesModal.tsx
@@ -563,7 +563,7 @@ export function PendingDevicesModal({ open, onClose, highlightId, initialStatus
               </p>
             )}
             {!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) => (
                   <DeviceCard
                     key={d.id}
@@ -691,7 +691,7 @@ function DeviceCard({ device, selected, selectMode, highlighted, onClick, cardRe
       ref={cardRef}
       onClick={onClick}
       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 && (
         <CheckCircle2