From 1f8b322e3ab0712d3b829743ea15212817f2dd9a Mon Sep 17 00:00:00 2001
From: Michael Staake <michael@staake.ai>
Date: Tue, 4 Nov 2025 06:59:02 -0800
Subject: [PATCH] Improved responsive layout for mobile

---
 .dockerignore     |  9 +++++++++
 .gitignore        | 23 +++++++++++++++++++++++
 views/vehicle.php | 24 ++++++++++++------------
 3 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 .dockerignore

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..bee4547
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,9 @@
+data/mainty.db
+error_log
+.DS_Store
+.git
+.gitignore
+README.md
+QUICKSTART.md
+DOCKER.md
+.htaccess
diff --git a/.gitignore b/.gitignore
index e43b0f9..0c0e9db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,24 @@
+# Database
+data/mainty.db
+data/*.db
+
+# Logs
+error_log
+*.log
+
+# OS Files
 .DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Environment
+.env
+
+# htaccess
+.htaccess
\ No newline at end of file
diff --git a/views/vehicle.php b/views/vehicle.php
index 7f621fa..ce0f683 100644
--- a/views/vehicle.php
+++ b/views/vehicle.php
@@ -40,8 +40,8 @@
         
         <!-- Vehicle Info Card -->
         <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
-            <div class="flex items-start justify-between">
-                <div class="flex items-start space-x-4">
+            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
+                <div class="flex flex-col sm:flex-row items-start gap-4">
                     <div class="bg-blue-100 p-4 rounded-lg">
                         <i class="bi bi-car-front-fill text-blue-600 text-3xl"></i>
                     </div>
@@ -69,15 +69,15 @@
                         </div>
                     </div>
                 </div>
-                <div class="flex space-x-2">
+                <div class="flex flex-wrap gap-2">
                     <button onclick="showEditVehicleModal()" 
                             class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
-                        <i class="bi bi-pencil"></i> Edit
+                        <i class="bi bi-pencil"></i> <span class="hidden sm:inline">Edit</span>
                     </button>
                     <div class="relative">
                         <button onclick="toggleExportMenu()" 
                                 class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
-                            <i class="bi bi-download"></i> Export
+                            <i class="bi bi-download"></i> <span class="hidden sm:inline">Export</span>
                         </button>
                         <div id="exportMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10">
                             <a href="<?php echo url('/vehicles/' . $vehicle['id'] . '/export/json'); ?>" 
@@ -161,17 +161,17 @@
                 <div class="space-y-4">
                     <?php foreach ($maintenanceItems as $item): ?>
                         <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition">
-                            <div class="flex justify-between items-start">
+                            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-3">
                                 <div class="flex-1">
-                                    <div class="flex items-center space-x-3 mb-2">
+                                    <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
                                         <h4 class="text-lg font-semibold text-gray-800"><?php echo htmlspecialchars($item['name']); ?></h4>
                                         <?php if ($item['cost']): ?>
-                                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">
+                                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm w-fit">
                                                 $<?php echo number_format($item['cost'], 2); ?>
                                             </span>
                                         <?php endif; ?>
                                     </div>
-                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600 mb-2">
+                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-sm text-gray-600 mb-2">
                                         <div>
                                             <i class="bi bi-calendar3"></i>
                                             <?php echo date('M d, Y', strtotime($item['date'])); ?>
@@ -197,14 +197,14 @@
                                         <p class="text-sm text-gray-600 mt-2"><?php echo nl2br(htmlspecialchars($item['description'])); ?></p>
                                     <?php endif; ?>
                                 </div>
-                                <div class="flex space-x-2 ml-4">
+                                <div class="flex sm:flex-row gap-2 lg:ml-4">
                                     <button onclick='showEditMaintenanceModal(<?php echo json_encode($item); ?>)' 
-                                            class="text-blue-600 hover:text-blue-800">
+                                            class="text-blue-600 hover:text-blue-800 px-2">
                                         <i class="bi bi-pencil"></i>
                                     </button>
                                     <form method="POST" action="<?php echo url('/maintenance/' . $item['id'] . '/delete'); ?>" 
                                           onsubmit="return confirm('Are you sure you want to delete this record?')" class="inline">
-                                        <button type="submit" class="text-red-600 hover:text-red-800">
+                                        <button type="submit" class="text-red-600 hover:text-red-800 px-2">
                                             <i class="bi bi-trash"></i>
                                         </button>
                                     </form>