From 8013fa109e42135815d9b0ecb53ecbb30cac0d96 Mon Sep 17 00:00:00 2001
From: DEls <davide.els1@outlook.com>
Date: Mon, 31 Aug 2026 14:17:02 +0200
Subject: [PATCH] fix(fuel): tighten Alert + Fleet cards on smaller screens

Tighten padding, gap, and rounding on the alert cards and the
Fleet mobile card so they take less vertical and horizontal real
estate on narrow viewports. Layout restores to the roomier
current sizing once the screen reaches the 'sm' breakpoint (640px).

Per-card changes:
- AlertCard (mobile): gap-3 -> gap-2 sm:gap-3; p-4 -> p-3 sm:p-4.
- AlertListRow (desktop list): px-4 py-3 -> px-3 py-2 sm:px-4 sm:py-3;
  gap-3 -> gap-2 sm:gap-3.
- FleetMobileCard (mobile): gap-2 -> gap-1.5 sm:gap-2; p-3 -> p-2.5
  sm:p-3.
---
 src/app/dashboard/fuel/fuel-view.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/fuel/fuel-view.tsx b/src/app/dashboard/fuel/fuel-view.tsx
index 7baa5cd..937afcb 100644
--- a/src/app/dashboard/fuel/fuel-view.tsx
+++ b/src/app/dashboard/fuel/fuel-view.tsx
@@ -840,7 +840,7 @@ function AlertCard({
       href={href}
       aria-label={`View ${v.description} — ${v.alert} alert, ${v.warn} warn`}
       className={cn(
-        "flex h-full flex-col justify-between gap-3 rounded-xl border p-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F2B165]",
+        "flex h-full flex-col justify-between gap-2 rounded-xl border p-3 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F2B165] sm:gap-3 sm:p-4",
         toneClasses,
       )}
     >
@@ -938,7 +938,7 @@ function AlertListRow({
     <Link
       href={href}
       aria-label={`View ${v.description} — ${v.alert} alert, ${v.warn} warn`}
-      className="group flex items-center gap-3 rounded-lg border border-border/60 bg-card px-4 py-3 transition-colors hover:border-[#F2B165]/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F2B165]"
+      className="group flex items-center gap-2 rounded-lg border border-border/60 bg-card px-3 py-2 transition-colors hover:border-[#F2B165]/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F2B165] sm:gap-3 sm:px-4 sm:py-3"
     >
       <span
         aria-hidden
@@ -1026,7 +1026,7 @@ function FleetMobileCard({
     edit.editing ? (
       <div
         className={cn(
-          "flex flex-col gap-2 rounded-xl border border-border/60 bg-card p-3",
+          "flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card p-2.5 sm:gap-2 sm:p-3",
           edit.isDirty && "border-[#F2B165]/60 bg-[#F2B165]/5",
         )}
       >