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.
This commit is contained in:
parent
475dd77c42
commit
8013fa109e
1 changed files with 3 additions and 3 deletions
|
|
@ -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",
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue