From 731d67f324d6be3595a78a4ca9a1a7952b8f8df0 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Thu, 15 Jan 2026 20:56:03 -0600
Subject: [PATCH] fix: add mobile responsive breakpoint to purchase info grid
 (refs #41)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/features/vehicles/pages/VehicleDetailPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx b/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
index 1fb8fdc..5e8fa0d 100644
--- a/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
+++ b/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
@@ -420,7 +420,7 @@ export const VehicleDetailPage: React.FC = () => {
             <h3 className="text-lg font-medium text-gray-900 dark:text-avus mb-4">
               Purchase Information
             </h3>
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <DetailField
                 label="Purchase Price"
                 value={vehicle.purchasePrice ? `$${vehicle.purchasePrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : undefined}